1 表格的主要作用
表格主要用于顯示、展示數(shù)據(jù)痘括。因為它可以讓數(shù)據(jù)顯示得非常的規(guī)整长窄，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候纲菌，能夠熟練運(yùn)用表格就顯得很重要挠日。一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理（合理的使用表格也能夠有效提高 SEO）。
注意：表格不是用來布局頁面的驰后，而是用來展示數(shù)據(jù)的肆资。表格常用于表單數(shù)據(jù)的 “布局”。
特別強(qiáng)調(diào)灶芝，表格是用于表單數(shù)據(jù)的 “布局”郑原，而不是頁面的布局唉韭！
2 表格的基本語法
<table>
<tr>
<td>單元格</td>
...
</tr>
...
</table>
-
<table></table>是用于定義表格的標(biāo)簽 -
<tr></tr>用于定義表格中的行，必須嵌套在<table></table>標(biāo)簽中 -
<td></td>用于定義表格中的單元格犯犁，必須嵌套在<tr></tr>標(biāo)簽中 - 字母 td 指表格數(shù)據(jù)（table data）属愤，即：數(shù)據(jù)單元格的內(nèi)容
- 單元格 td 里面可以放任何的元素
3 表頭單元格標(biāo)簽
一般表頭單元格位于表格的第一行或第一列，作用是：突出重要性酸役，表頭單元格里面的文本內(nèi)容默認(rèn)加粗居中顯示住诸。
<th> 標(biāo)簽表示 HTML 表格的表頭部分（table head 的縮寫）。
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
...
</tr>
...
</table>
4 表格屬性
注意：表格標(biāo)簽的屬性在實際開發(fā)中并不常用涣澡，而是通過后面的 CSS 來設(shè)置贱呐，這里了解即可。
以下屬性都寫在 table 開始標(biāo)簽內(nèi)入桂，多個屬性之間用空格隔開奄薇。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
...
</table>
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
align |
left、center抗愁、right
|
規(guī)定表格相對周圍元素的對齊方式（默認(rèn) left）馁蒂，注意指的是整個表格的對齊方式（表格是在父盒子中默認(rèn)往左靠，還是居中或是往右靠）蜘腌，而不是指單元格內(nèi)容的對齊方式（單元格內(nèi)容對齊可以通過：style="text-align: center;" 設(shè)置）（了解） |
border |
1 或 ""
|
規(guī)定表格單元是否擁有邊框沫屡，默認(rèn)為 ""，表示沒有邊框（了解） |
cellpadding |
像素值 | 規(guī)定單元邊沿與其內(nèi)容之間的空白撮珠，默認(rèn) 1 像素（了解） |
cellspacing |
像素值 | 規(guī)定單元格之間的空白沮脖，默認(rèn) 2 像素（了解） |
width |
像素值 或 百分比 | 規(guī)定表格的寬度（了解） |
height |
像素值 或 百分比 | 規(guī)定表格的高度（了解） |
5 表格結(jié)構(gòu)標(biāo)簽
使用場景：因為表格可能很長，為了更好的表示表格的語義劫瞳，可以將表格分割成：表格頭部 和 表格主體 兩大部分倘潜。
在表格標(biāo)簽中绷柒，分別用：<thead> 標(biāo)簽表示表格的頭部區(qū)域志于，<tbody> 標(biāo)簽表示表格的主體區(qū)域，這樣可以更好的分清表格結(jié)構(gòu)废睦。
-
<thead></thead>：用于定義表格的頭部伺绽，<thead>內(nèi)部必須擁有<tr>標(biāo)簽，一般是位于第一行嗜湃，且一般<tr>標(biāo)簽中推薦放置<th>標(biāo)簽 -
<tbody></tbody>：用于定義表格的主體奈应，主要用于放數(shù)據(jù)本體 - 以上標(biāo)簽都是放在
<table></table>標(biāo)簽中
<table>
<!-- 頭部區(qū)域 -->
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
...
</tr>
</thead>
<!-- 主體區(qū)域 -->
<tbody>
<tr>
<td>周吉瑞</td>
<td>男</td>
<td>18</td>
...
</tr>
...
</tbody>
</table>
6 合并單元格
特殊情況下，可以把多個單元格合并為一個單元格购披，這里會最簡單的合并單元格即可杖挣。
合并單元格的方式：
- 跨行合并（上下合并）：
rowspan="合并單元格的個數(shù)" - 跨列合并（左右合并）：
colspan="合并單元格的個數(shù)"
目標(biāo)單元格：（寫合并代碼）
- 跨行：最上側(cè)單元格為目標(biāo)單元格，寫合并代碼
- 跨列：最左側(cè)單元格為目標(biāo)單元格刚陡，寫合并代碼
合并單元格三步曲：
- 先確定是跨行還是跨列合并
- 找到目標(biāo)單元格惩妇，寫上
合并方式=合并的單元格數(shù)量株汉，比如：<td colspan="2"></td> - 刪除多余單元格
<!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>Document</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
【綜合案例】
<!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>Document</title>
</head>
<body>
<table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1</td>
<td colspan="3">234</td>
<!-- <td>3</td> -->
<!-- <td>4</td> -->
</tr>
<tr>
<!-- <td>1</td> -->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<!-- <td>1</td> -->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
