表格本身並不是用來布局，而是用來展示表格數據
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>
