HTML+CSS教程:表格Table元素網頁製作技巧

文章簡介：table元素在HTML中用於呈現表格式資料。你可以把它作為一個描述和展示可用於試算表的資料的方法。

<table>元素在HTML中用於呈現表格式資料。你可以把它作為一個描述和展示可用於試算表的資料的方法。其本質上由這兩個東西組成：行和列。在這篇文章中我們會探索應該如何使用它們，什麼時候使用，和其他所有你需要知道的東西。

一個非常基礎的例子

下面是一個非常簡單的表格式資料例子：

這是一個跨多軸的資料。想象下，通過你得手指划過某一行來瞭解某個人的相關資訊。或者從上至下來感受某個資料點的模式和變化。

表頭和表體

上面這個基礎例子中我們沒有做的一件事是沒有語義地指出第一行是該表格的頭部。我們本應該這麼做。整個第一行的部分沒有包含資料，它只是每個列的標題。因此，我們可以<thead>元素來完成這件事情，它會包裹第一個<tr>元素(它會包裹所有的行所需要的頭部資訊)

HTML代碼如下所示：

當你使用了<thead>元素後，<table>元素中不能有直接的<tr>子項目，所有的行必須存在於<thead>，<tbody>和<tfoot>裡面。要注意的是我們會把所有的資料行包含在<tbody>裡面。

表尾

連同<thead>和<tbody>一起的還有<tfoot>,用於包裹指出表格頁尾的行。和<thead>一樣,它只是語義地指出了輔助資訊，沒包含別的資料。

<tfoot>獨一無二的一點是它在HTML中的位置，它緊跟著<thead>並位於<tbody>的前面！你可能會認為它是table標籤結束前的最後一個元素，但情況並不是這樣。因為頁尾可能包含了用於理解表格的必要資訊，因為在資源序列中它應當排在在資料的前面。

儘管首先在資源序列中出現，<tfoot>確實渲染在了表格的底部，這使其成為一個不同尋常的HTML元素。

舉個例子，它可以用於這樣的情境，在一個很長或很高的表格中，<tfoot>重複了表頭的資訊，使得讀者更容易地在底部看到列表的標題資訊，而不用回到頭部查看。但你並沒有必要這樣來使用它。

在一些元素位置根據需要從上至下跳動的布局中，<tfoot>是個不錯的技巧。舉個例子，雖然一個導航在螢幕的底部，但在HTML源碼中導航應該在頂部。

儲存格：td和th

在表格中一個獨立的儲存格總是<td>或<th>兩者之一，只要你願意，你可以把任何東西放進表格的儲存格中，但要使這些元素成為表格中的儲存格元素。<th>是“表格的標題”，<td>是“表格的資料”。

使用我們現有的簡單例子，頂行是所有的頭部資訊。它們是資料的標題而不是資料，而剩下的所有行都為資料。如下：

<th>元素並不是必須放在<thead>元素當中。它們簡單地指出了頭部資訊。因此它們也能用於<tbody>元素的第一行當中。我們會在後面給出這樣的一個例子。