【HTML】表格标签（table，tr，td）

最新推荐文章于 2025-03-21 21:35:34 发布

我一直在流浪

最新推荐文章于 2025-03-21 21:35:34 发布

阅读量2.3k

点赞数 1

分类专栏：【基础学习-JavaWeb/前端】

本文链接：https://blog.csdn.net/qq_42764468/article/details/100024046

版权

【基础学习-JavaWeb/前端】专栏收录该内容

105 篇文章

订阅专栏

* 表格的主要作用是什么？
	表格主要作用是布局
	可以先将表格画出来,然后往表格中放入数据
	现代的网页布局采用table比较少，采用div布局比较多
	
* 表格相关语法：
1. 表格是table标签
2. border是table标签的一个属性，border是属性名,1px是属性值
	border="1px",表示表格边框的宽度是1像素
	px可以省略,默认就是像素
	border='1px'
	border=1px
	border=1
3. width是表格宽度的一个属性
    width="50px"
    width="50p%"页面百分比
4. height是表示表格的高度的一个属性
    height="300px"
5. align是表格的对齐方式,td和tr标签中也可以设置这个属性
    align="center"表示表格居中
    align="left"表示表格居左
    align="right"表示表格居右

<!--
关于HTML的实现标签,实现表格
1.表格的主要作用是什么？
    表格主要作用是布局
    可以先将表格画出来,然后往表格中放入数据
    现代的网页布局采用table比较少，采用div布局比较多
-->
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--center标签表示居中-->
<center>员工列表</center>

<!--hr表示横线标签 color设置横线颜色，width设置横线宽度-->
<hr color="red" width="60%">

<!--
1.表格是table标签
2.border是table标签的一个属性，border是属性名,1px是属性值
   border="1px",表示表格边框的宽度是1像素
   px可以省略,默认就是像素
   border='1px'
   border=1px
   border=1
3.width是表格宽度的一个属性
    width="50px"
    width="50p%"页面百分比
4.height是表示表格的高度的一个属性
    height="300px"
5.align是表格的对齐方式,td和tr标签中也可以设置这个属性
    align="center"表示表格居中
    align="left"表示表格居左
    align="right"表示表格居右
-->
    <table border="1px" width="50%" height="300px" align="center">
        <!--tr标签标示一行-->
        <tr align="center">
            <!--td标签标示一个单元格-->
            <td align="center">学</td>
            <td>习</td>
            <td>HTML</td>
        </tr>
        <tr>
            <td>学</td>
            <td>习</td>
            <td>HTML</td>
        </tr>
        <tr>
            <td>学</td>
            <td>习</td>
            <td>HTML</td>
        </tr>
    </table>
</body>
</html>

实例：员工表格

<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" width="30%" align="center">
        <tr align="center">
            <td>员工编号</td>
            <td>员工姓名</td>
            <td>员工薪水</td>
        </tr>
        <tr align="center">
            <td>7689</td>
            <td>张三</td>
            <td>8000</td>
        </tr>
        <tr align="center">
            <td>7690</td>
            <td>李四</td>
            <td>10000</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
单元格的合并：

<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--
合并单元格：
行合并：rowspan,rowspan="2"合并两个单元格
列合并：colspan,colspan="2"合并两个单元格
-->
    <table border="1" width="30%" align="center">
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <!--删除表格6-->
        </tr>
        <tr align="center">
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述


<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--
合并单元格：
行合并：rowspan,rowspan="2"合并两个单元格
列合并：colspan,colspan="2"合并两个单元格
-->
    <table border="1" width="30%" align="center">
        <tr align="center">
            <td>1</td>
            <td>2</td>
            <td rowspan="2">3</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>5</td>
            <!--删除表格6-->
        </tr>
        <tr align="center">
            <td>7</td>
            <td colspan="2">8</td>
            <!--删除表格9-->
        </tr>
    </table>
</body>
</html>