版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
-
table表的概念
与数据库中的table表有所不同，html中的表虽然也用于统计数据，但其可以更加自由的定义表的格式形状
-
HTML中表的制作
-
table标签
如果想要在html中创建一个表，那么我们第一步就是使用table标签，这个标签囊括了整个表的全部内容，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
/* 内容 */
</table>
</body>
</html>
-
tr标签
tr是table-row的缩写，row即“行”，我们都知道，一个表是由行和列组成的，而在html中，表是一行一行来写的，每一行内容都需要tr标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
</tr>
</table>
</body>
</html>
-
th标签
th是table-head的缩写，即表头，也就是表中某列数据所对应的意义，因为表头是写成一行的，所以需要写在tr标签内，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
效果为
-
td标签
td是table-data的缩写，即表中数据。一个表，除了表头以外还需要有数据，所以我们需要用td标签来向表中添加数据，之前提到，table中写入数据都是按行来的，所以td标签也要写在tr标签内。例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>Tom</td>
<td>123</td>
<td>USA</td>
<td>学习</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>456</td>
<td>UK</td>
<td>吃饭</td>
</tr>
<tr>
<td>3</td>
<td>Lihua</td>
<td>789</td>
<td>China</td>
<td>玩</td>
</tr>
</table>
</body>
</html>
效果为
这样子，差不多一个表的大概意思已经有了，但是这个表的形式还不够完整，一个完整的表在行列之间应该还有实线相隔，并且表外围有一个边框，下面就要讲一下如何完善表的样式。
-
表的样式
-
css
css，是一种用于控制HTML页面样式的选择器，可以根据编写者的选择，为页面创造出想要的样式，使用style标签，下面演示如何完善表的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<style type="text/css">/*标签选择器*/
span{
color: red;
}
table{/*控制整个表的样式*/
width: 80%;/*设置表宽度在页面宽度的占比*/
border: black 1px solid;/*设置边框样式*/
border-spacing: 0px;/*消除边框与边框之间的空隙*/
border-collapse:collapse ;/*将合并后的边框宽度减半*/
}
th{/*控制th标签的样式*/
height: 60px;/*设置高度*/
border: black 1px solid;/*设置边框样式*/
text-align: center;/*设置文本水平方向的方位*/
}
td{/*控制td的样式*/
height: 50px;/*设置高度*/
text-align: center;/*设置文本水平方向的方位*/
vertical-align: bottom;/*设置文本竖直方向的方位*/
border: black 1px solid;/*设置边框样式*/
}
</style>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>Tom</td>
<td>123</td>
<td>USA</td>
<td>学习</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>456</td>
<td>UK</td>
<td>吃饭</td>
</tr>
<tr>
<td>3</td>
<td>Lihua</td>
<td>789</td>
<td>China</td>
<td>玩</td>
</tr>
</table>
</body>
</html>
效果为
-
数据合并
现实中，由于某些数据之间存在共享数据的情况，所以我们会将相同数据进行合并，避免表的结构冗杂，这就是数据合并，而数据合并分为行合并与列合并。
-
行合并
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <style type="text/css">/*标签选择器*/ span{ color: red; } table{/*控制整个表的样式*/ width: 80%;/*设置表宽度在页面宽度的占比*/ border: black 1px solid;/*设置边框样式*/ border-spacing: 0px;/*消除边框与边框之间的空隙*/ border-collapse:collapse ;/*将合并后的边框宽度减半*/ } th{/*控制th标签的样式*/ height: 60px;/*设置高度*/ border: black 1px solid;/*设置边框样式*/ text-align: center;/*设置文本水平方向的方位*/ } td{/*控制td的样式*/ height: 50px;/*设置高度*/ text-align: center;/*设置文本水平方向的方位*/ vertical-align: bottom;/*设置文本竖直方向的方位*/ border: black 1px solid;/*设置边框样式*/ } </style> <table> <tr> <th>序号</th> <th>姓名</th> <th>联系电话</th> <th>家庭地址</th> <th>操作</th> </tr> <tr> <td rowspan="3">1</td><!--将序号这一列从本条数据后的三行合并，rowspan用于行合并，参数用于控制合并行数--> <td>Tom</td> <td>123</td> <td>USA</td> <td>学习</td> </tr> <tr> <!--因为相同数据已经合并，所以此处不用再写--> <td>Jim</td> <td>456</td> <td>UK</td> <td>吃饭</td> </tr> <tr> <!--因为相同数据已经合并，所以此处不用再写--> <td>Lihua</td> <td>789</td> <td>China</td> <td>玩</td> </tr> </table> </body> </html>效果为
-
列合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<style type="text/css">/*标签选择器*/
span{
color: red;
}
table{/*控制整个表的样式*/
width: 80%;/*设置表宽度在页面宽度的占比*/
border: black 1px solid;/*设置边框样式*/
border-spacing: 0px;/*消除边框与边框之间的空隙*/
border-collapse:collapse ;/*将合并后的边框宽度减半*/
}
th{/*控制th标签的样式*/
height: 60px;/*设置高度*/
border: black 1px solid;/*设置边框样式*/
text-align: center;/*设置文本水平方向的方位*/
}
td{/*控制td的样式*/
height: 50px;/*设置高度*/
text-align: center;/*设置文本水平方向的方位*/
vertical-align: bottom;/*设置文本竖直方向的方位*/
border: black 1px solid;/*设置边框样式*/
}
</style>
<table>
<tr>
<td colspan="5">学生信息</td><!--colspan用于将一行中的列合并，参数用于控制要合并的列数-->
<tr>
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>Tom</td>
<td>123</td>
<td>USA</td>
<td>学习</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>456</td>
<td>UK</td>
<td>吃饭</td>
</tr>
<tr>
<td>3</td>
<td>Lihua</td>
<td>789</td>
<td>China</td>
<td>玩</td>
</tr>
</table>
</body>
</html>
效果为