目录
引入：
table这个概念，我已经不是第一次遇到了，第一次遇到它是在数据库中，table即表，是对数据进行统计的的一种图形。
HTML中表的实现：
假设我们想在HTML页面中显示一个表，即table，需要了解以下几个标签
（1）table标签
HTML界面中如果像创建一个表，势必就要有相应的table标签，表中有关所有内容的代码都写到table标签中，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
</table>
</body>
</html>
（2）tr标签
tr是table-row的缩写，即在HTML界面中的表中，表是以行为单位元素的，每一行都需要一对tr标签，每一对tr标签再table表中会独自占用一行，且写在同一table标签中的内容在同一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>河南工业大学</span>
<table>
<tr>
</tr>
</table>
</body>
</html>
（3）th标签
th是table-head的缩写，即为table表的表头，也是数据库表中的字段行。以为塌腰占一行，所以td标签要写在tr标签内。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<!--tr table row-->
<tr>
<!--th table head-->
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
</table>
</body>
</html>页面效果如下：
（4）td标签
有了表头就势必要有数据，就需要用到td标签，td即table-data的缩写，即用来向table表中添加数据的标签，由于它也是table表中的一个行元素，所以td标签也要写在tr标签内，如下，向表中插入三条数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table>
<!--tr table row-->
<tr>
<!--th table head-->
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<!--th table data-->
<td>1</td>
<td>Tom</td>
<td>1234567</td>
<td>USA</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>1234567</td>
<td>UK</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>3</td>
<td>Wangming</td>
<td>1234567</td>
<td>China</td>
<td>add,update,delete</td>
</tr>
</table>
</body>
</html>
效果如下图：
到这里，理论上来说我们已经完成了一个完整的表了，但这个表还不够完整，一般我们能看到的表都有边框，而且数据之间用实线隔开，这里就要简单讲下CSS的使用：
拓展 ：
CSS简单来说就是用来控制HTML页面样式的选择器，给相应的页面赋予特定的样式，用style标签控制：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<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>
</head>
<body>
<table>
<!--tr table row-->
<tr>
<!--th table head-->
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<!--th table data-->
<td>1</td>
<td>Tom</td>
<td>1234567</td>
<td>USA</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>1234567</td>
<td>UK</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>3</td>
<td>Wangming</td>
<td>1234567</td>
<td>China</td>
<td>add,update,delete</td>
</tr>
</table>
</body>
</html>效果如下：
其他操作：
（1）列合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">/*标签选择器*/
span{
color: red;
}
table{
width: 80%;
border: black 1px solid;
border-spacing: 0px;
border-collapse:collapse ;
}
th{
height: 60px;
border: black 1px solid;
text-align: center;
}
td{
height: 50px;
text-align: center;
vertical-align: bottom;
border: black 1px solid;
}
</style>
</head>
<body>
<table>
<tr>/*在表中添加一行*/
<td colspan="5">学生信息</td><!--colspan用于将一行中的列合并，参数用于控制要合并的列数-->
</tr>
<!--tr table row-->
<tr>
<!--th table head-->
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<!--th table data-->
<td>1</td>
<td>Tom</td>
<td>1234567</td>
<td>USA</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>2</td>
<td>Jim</td>
<td>1234567</td>
<td>UK</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>3</td>
<td>Wangming</td>
<td>1234567</td>
<td>China</td>
<td>add,update,delete</td>
</tr>
</table>
</body>
</html>
（2）行合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">/*标签选择器*/
span{
color: red;
}
table{
width: 80%;
border: black 1px solid;
border-spacing: 0px;
border-collapse:collapse ;
}
th{
height: 60px;
border: black 1px solid;
text-align: center;
}
td{
height: 50px;
text-align: center;
vertical-align: bottom;
border: black 1px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="5">学生信息</td><!--colspan用于将一行中的列合并，参数用于控制要合并的列数-->
</tr>
<!--tr table row-->
<tr>
<!--th table head-->
<th>序号</th>
<th>姓名</th>
<th>联系电话</th>
<th>家庭地址</th>
<th>操作</th>
</tr>
<tr>
<!--th table data-->
<td rowspan="3">1</td><!--将序号这一列从本条数据后的三行合并，rowspan用于行合并，参数用于控制合并行数-->
<td>Tom</td>
<td>1234567</td>
<td>USA</td>
<td>add,update,delete</td>
</tr>
<tr>
<!--合并时，被合并的数据合并列原有的数据要删除-->
<td>Jim</td>
<td>1234567</td>
<td>UK</td>
<td>add,update,delete</td>
</tr>
<tr>
<td>Wangming</td>
<td>1234567</td>
<td>China</td>
<td>add,update,delete</td>
</tr>
</table>
</body>
</html>
效果如下：
对于CSS的使用，我之后会详细讲述，本片中只是为了完善表的外观而简单叙述 。
