HTML表格：日常消費賬單表格展示網頁
在日常生活中財務報表、日曆等，都常使用表格展示。通常，表格數據都由行和列組成。
最基本的表格
在HTML表中，一個表格(table)由行(tr)組成，每一行由單元格組成，單元格有標題單元格(th)和數據單元格(td)。
一個最基本的表格如下：
<body>
<table>
<!-- 第一行 -->
<tr>
<td>第一行第一個單元格數據</td>
<td>第一行第二個單元格數據</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一個單元格數據</td>
<td>第二行第二個單元格數據</td>
</tr>
</table>
</body>
顯示效果如下：
這是一個2行2列的表格，可以看到<table>元素中包含了兩行，即兩個<tr>元素；每行有兩列，即每個<tr>中包含兩個<td>元素。
提示：
- tr: table row 行
- th: table head 表頭
- td: table data 列
帶邊框的表格
在第一個例子中，表格沒有邊框，看起來不太明顯。那麼，如何設置帶邊框的表格呢？
我們可以指定<table>元素的border屬性值。
<table border="1">
</table>
顯示效果如下：
通過CSS樣式控制邊框：
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 簡單表格</title>
<style type="text/css">
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table border="1">
<!-- 第一行 -->
<tr>
<td>第一行第一個單元格數據</td>
<td>第一行第二個單元格數據</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一個單元格數據</td>
<td>第二行第二個單元格數據</td>
</tr>
</table>
</body>
</html>
顯示效果如下：
帶表頭的表格
一般情況下，我們都會指定表格的表頭信息，可以使用<th>標題單元格進行定義。
舉例如下：
<body>
<table width="400">
<!-- 表標題 -->
<caption>通訊錄</caption>
<!-- 表頭 -->
<tr>
<th scope="col">姓名</th>
<th scope="col">電話</th>
<th scope="col">備註</th>
</tr>
<tr>
<td>李雯</td>
<td>18012311234</td>
<td>家人</td>
</tr>
<tr>
<td>王謙</td>
<td>17812311234</td>
<td>同事</td>
</tr>
<tr>
<td>周佳</td>
<td>17413511234</td>
<td>高中同學</td>
</tr>
</table>
</body>
顯示效果如下：
其中，
- 我們設定了<table>元素的width屬性，改變了表格的寬度。
- 我們使用<caption>元素設置了表格的標題；
- 數據第一行<tr>元素中，使用<th>元素指定了表頭。本例中有三列信息，所以包含了三個<th>元素；
- 並且，我們設置了<th>元素的屬性scope的值爲col。
scope 屬性
<th>元素的scope屬性用於定義表頭數據與單元數據關聯的方法。本例中值爲col,表示規定的是列的表頭。
其他的一些值含義如下：
| 值 | 含義 |
|---|---|
| col | 單元格是列的表頭 |
| row | 規定單元格是行的表頭 |
| colgroup | 單元格是列組的表頭 |
| rowgroup | 單元格是行組的表頭 |
列組和行組的概念將在單元格跨越多行或多列的表格小節中講述和使用。
結構更清晰的表格
爲了使表格的整體結構更加的清晰，我們還能夠使用<thread>、<tbody>和<tfoot>
元素來定義表格。
舉例如下：
<body>
<table width="400">
<caption>運動會跑步成績</caption>
<thead>
<!-- 表格頭部 -->
<tr>
<th scope="col">長度</th>
<th scope="col">李雯</th>
<th scope="col">王謙</th>
<th scope="col">周佳</th>
</tr>
</thead>
<tbody>
<!-- 表格主體 -->
<tr>
<th scope="row">100米</th>
<td>14s</td>
<td>16s</td>
<td>13s</td>
</tr>
<tr>
<th scope="row">200米</th>
<td>26s</td>
<td>23s</td>
<td>25s</td>
</tr>
<tr>
<th scope="row">400米</th>
<td>70s</td>
<td>73s</td>
<td>69s</td>
</tr>
</tbody>
<tfoot>
<!-- 表格尾部 -->
<tr>
<th scope="row">總用時</th>
<td>110s</td>
<td>112s</td>
<td>107s</td>
</tr>
</tfoot>
</table>
顯示效果如圖：
顧名思義，<thread>元素標記表格第6行到第10行爲頭部；<tbody>元素包圍了第15行到第32行的所有數據行；最後,<tfoot>元素標記表格的尾部。
此例中，我們將列值的總和行作爲表格的尾部。通常，我們都會建議大家使用這三種元素來定義表格，因爲這樣做表格的總體結構更爲清晰。
單元格跨越多行或多列的表格
我們經常會看到這樣的表格：
其中的單元格，跨越了多行或者多列。在HTML中要如何實現呢？
我們可以設定colspan 和rowspan 屬性讓 <th> 或 <td>單元格跨越多行或多列。
上述表格代碼如下：
<body>
<table>
<caption>彩排安排</caption>
<thead>
<!-- 表格頭部 -->
<tr>
<th scope="rowgroup">時間</th>
<th scope="col">週一</th>
<th scope="col">週二</th>
<th scope="col">週三</th>
</tr>
</thead>
<tbody>
<!-- 表格主體 -->
<tr>
<th scope="row">上午8點</th>
<td>開場舞</td>
<td colspan="2">歌曲串燒</td>
</tr>
<tr>
<th scope="row">上午9點</th>
<td>小品</td>
<td>相聲</td>
<td rowspan="2">大型魔術</td>
</tr>
<tr>
<th scope="row">上午10點</th>
<td>雜藝表演</td>
<td>樂隊歌曲</td>
</tr>
</tbody>
</table>
</body>
在此例中，表格頭部第7行，scope="rowgroup"指定了該單元格是行組的表頭。表格中，第3行的第3列和第4列爲合併單元格，我們設置第18行colspan="2",表示該單元格跨越兩列；同理，第24行設置rowspan="2"表示該單元格跨越兩行。
所以，
要設置單元格跨越多行，只需設置屬性rowspan="n";
設置單元格跨越多列，只需設置屬性colspan="n".
n是單元格要跨越的行數或列數。