1.表格标签
1.1表格的作用
表格主要用于显示、展示数据，它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要，一个清爽简约的表格能够把繁杂的书表现的十分有条理。
1.2表格的基本语法
<table>
<tr>
<td>单元格里面的文本</td>
...
</tr>
...
</table>
<!--
1.<table></table>标签是用于定义表格的标签。
2.<tr></tr>标签用于定于表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td是指表格数据(table data)，即单元格内的内容。
-->
先举个栗子：
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗且居中显示。
加上表头
<th>(table head的缩写)标签表示HTML表格的表头部分。
現在我们把刚才的表格做一个优化
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来，我们的表格就有了表头
1.4表格属性(如边框和大小)
表格标签这个部分我们实际不常用，在网页开发中一般通过CSS来设置。
属性名 属性值 描述
align left、center、right规定表格相对周围元素的对齐方式。
border 1或"" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值 规定表格的宽度
height 像素值 规定表格的高度
这些属性要写到表格标签的里面显示。
表格居中：
首先我们加上align属性
<table align="center">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来，我们的表格就居中显示了：
加上边框
我们继续对我们的代码进行优化，这次加上border属性：
<table align="center" border="1">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来我们的表格就有了边框：
消除单元格空隙：
但是，我们可以看到，表格看起来还是有点点奇怪：表格的单元格之间有空隙，而且文本和边框太近了，所以我们加上cellpadding、cellspacing属性：
<table align="center" border="1" cellpadding="10" cellspacing="0">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
这样一来，就解决了上面的问题：
宽度和高度完善和完整代码：
最后我们来把表格的宽度和高度设定一下，并且把最终的完整版代码写到这：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="100">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</table>
</body>
</html>
我们得到了最终的完成品：
### (补充)表格结构标签
使用场景：因为表格的代码很长，为了让表格部分的代码更加的条理化，可以将表格分为表格头部标签和表格主体标签：
<table align="center" border="1" cellpadding="10" cellspacing="0" width="300" height="100">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr><td>美杜莎</td> <td>女</td> <td>180</td></tr>
<tr><td>熏儿</td> <td>女</td> <td>18</td></tr>
<tr><td>云韵</td> <td>女</td> <td>28</td></tr>
<tr><td>小医仙</td> <td>女</td> <td>18</td></tr>
</tbody>
</table>
这样，我们的代码就看起来结构更加清晰了。而且，这两个标签里面的内容还可以隐藏：
展开：
4030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
