HTML Table 表格

HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，以下做個簡單的表格範例。

<table border="1">
　<tr>
　<td>這裡可以放表格內容</td>
　</tr>
</table>

呈現結果如下

這裡可以放表格內容

範例中使用了<table> 與 </table> 的標籤把內容包起來，<tr></tr> 標籤代表的是一行，而 <td></td> 標籤則代表一列，為了清楚呈現，我們還為 table 加上了 border="1" 的設定，這代表這個 table 的邊框粗細是 1，在實際使用上你也可以設定為其它的値，例如 border="0" 則不會顯示邊框。請注意 HTML 語法都必須用一個開始標籤與一個結束標籤把內容包起來，開始標籤與結束標籤是對等的，缺一不可。

除了可以寫一個單純的表格之外，我們還可以設定 table 的寬度、高度或邊框樣式，要做這些設定，你必須先了解幾個能夠控制表格的元素，例如 width、border、background ... 等。

width：控制 table 的寬度
border：控制 table 邊框的粗細
background：控制背景圖片
colspan：控制儲存格橫跨幾個欄位
rowspan：控制儲存格垂直跨幾個欄位

接著我們寫幾個範例

兩個欄位的 table 表格範例

<table width="300" border="1">
　<tr>
　<td>這裡是第一個欄位</td>
　<td>這裡是第二個欄位</td>
　</tr>
</table>

呈現結果如下

這裡是第一個欄位

這裡是第二個欄位

兩行兩欄位的 Table 表格範例

<table border="1">
　<tr>
　<td>這裡是第一行的第一個欄位</td>
　<td>這裡是第一行的第二個欄位</td>
　</tr>
　<tr>
　<td>這裡是第二行的第一個欄位</td>
　<td>這裡是第二行的第二個欄位</td>
　</tr>
</table>

呈現結果如下

這裡是第一行的第一個欄位	這裡是第一行的第二個欄位
這裡是第二行的第一個欄位	這裡是第二行的第二個欄位

接著我們把第一行變成一個欄位

<table border="1">
　<tr>
　<td colspan="2">這裡是第一行</td>
　</tr>
　<tr>
　<td>這裡是第二行的第一個欄位</td>
　<td>這裡是第二行的第二個欄位</td>
　</tr>
</table>

呈現結果如下

這裡是第一行
這裡是第二行的第一個欄位	這裡是第二行的第二個欄位

最後做一個兩欄位的 Table，第一個欄位 rowspan="2"，第二個欄位有兩行

<table border="1">
　<tr>
　<td rowspan="2">這是第一個欄位</td>
　<td>這裡是第二個欄位第一行</td>
　</tr>
　<tr>
　<td>這裡是第二個欄位第二行</td>
　</tr>
</table>

呈現結果

這是第一個欄位	這裡是第二個欄位第一行
	這裡是第二個欄位第二行

延伸閱讀