HTML表格概述

表格的基本結構

表格的基本標簽有標簽<table>（表格），<tr>標簽（表格行）,<td>標簽（表格單元格）。

<tr>標簽和<td>標簽必須在標簽<table>與</table>標簽之間才有效。

除了基本標簽外還有表格標題<caption>標簽、表頭<th>標簽。

瀏覽器會將<caption>標簽中的內容在表格正上方居中顯示。一個表格只能有一個標題標簽。

瀏覽器會以粗體和居中的樣式顯示<th>元素中的內容。

代碼示例與效果顯示

表格語義化：

為了更深一層對表格進行語義化，HTML引入了thead、tbody和tfoot這三個標簽。這三個標簽把表格分為三部分：表頭、表身、表腳。有了這三個標簽，表格HTML代碼語義更加良好，結構更加清晰。

語法：

<caption>表格標題</caption>

<table>

<thead>

<tr>

<th>表頭單元格1</th>

<th>表頭單元格2</th>

<th>表頭單元格3</th>

</tr>

</thead>

<tbody>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

<td>標磚單元格3</td>

</tr>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

<td>標準單元格3</td>

</tr>

<tfoot>

<tr>

<td>標準單元格1</td>

<td>標準單元格2</td>

<td>標準單元格3</td>

</tr>

</tfoot>

</table>

<thead>、<tbody>、<tfoot>這三個標簽很重要，雖然加了跟沒加顯示效果一樣，但它從語義上區分了表頭，表身和表腳，使結構更加清晰。

合并行rowspan屬性

rowspan是<td>的一個屬性。

<td rowspan="跨度的行數">

測試代碼和顯示效果

不加rowspan屬性顯示效果展示

合并列colspan屬性

? colspan是<td>的一個屬性。

<td colspan="跨度的列數">，用法跟rowspan屬性差不多

代碼測試與顯示效果

不加colspn屬性效果展示

仔細看，<td>跨兩列</td>不加colspan屬性的話，顯示效果與加了的差別。

【小技巧】:表格合并行屬性和表格合并列屬性在內容不能完全放于一個單元格內時非常有用。通過跨越許多單元格，不需要改變表格就能將更多的文字放入單元格。