表格本身并不是用来布局，而是用来展示表格数据
1.基本结构
table:表格标签(默认独占一行,宽度100%)
tr:行标签
td/th:单元格标签，其中th标签中的文本会显示为粗体居中（单元格的宽度由同一列中的最宽的那个元素决定）
<body style="padding:30px;">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
</tr>
</table>
</body>
2.caption标签
caption标签用来定义表格的标题,caption标签的文本会居中显示
<body style="padding:30px;">
<table>
<caption>我是表格的标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>简介</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
<td>本名张君宝，自创太极拳剑，将武当派发扬光大</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
<td>金庸武侠小说《神雕侠侣》的主人公</td>
</tr>
</table>
</body>
3.table标签的属性
table标签有以下几个属性：
(1)border属性：为表格添加边框
<body style="padding:30px;">
<table border="1">
...
</table>
<table border="10">
...
</table>
</body>
(2)cellspacing属性:设置各个单元格之间的间距，默认值为2
<body style="padding:30px;">
<table border="1" cellspacing="5">
...
</table>
<table border="1" cellspacing="0">
...
</table>
</body>
(3)cellpadding属性:设置单元格的内边距,默认值为1
因为单元格的宽度由同一列中的最宽的那个元素决定，所以这个属性只在同一列中的最宽的那个元素上才能看到效果
<body style="padding:30px;">
<table border="1" cellspacing="0">
...
</table>
<table border="1" cellspacing="0" cellpadding="10">
...
</table>
</body>
(4)width/height属性:设置表格的宽高，默认由子元素撑开。如果表格设置的宽高大于表格子元素的总大小，则会把剩余的空间均分给子元素
<table border="1" cellspacing="0" cellpadding="10" width="700">
...
</table>
(5)align属性:设置表格的在父元素中的水平对齐方式
<table border="1" cellspacing="0" cellpadding="10" align="center">
...
</table>
PS:这些属性同样适用于td标签
4.单元格合并
在td标签中设置下面的属性就可以进行单元格合并
colspan：跨列合并单元格（横向）
rowspan：跨行合并单元格（纵向）
<body style="padding:30px;">
<table border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>/</th>
<th>CPU</th>
<th>主板</th>
<th>显卡</th>
<th>总价</th>
</tr>
<tr>
<td>配置一</td>
<!-- 跨列合并 -->
<td colspan="2" align="center">1349</td>
<!-- <td>459</td> -->
<td>1099</td>
<td>2448</td>
</tr>
<tr>
<td>配置二</td>
<td>949</td>
<td>459</td>
<td>1099</td>
<!-- 跨行合并 -->
<td rowspan="2">2507</td>
</tr>
<tr>
<td>配置三</td>
<td>549</td>
<td>459</td>
<td>1499</td>
<!-- <td>2507</td> -->
</tr>
</table>
</body>
