【叢林】HTML Table 表格淺談（邊框、隔行變色

此例子已經包含本文大部份內容，請對照參考。查看代碼 》

定義和用法

table標籤訂義 HTML 表格。

建立表格的四要素：table、tr、th、td

<table>

整個表格以<table>標記開始、</table>標記結束。

<tr>

Table row。表格的一行，有幾對 tr 表格就有幾行。

<td>

Table data。表格的一個單元格，一行中包含幾對 td ，一行中就有幾列。

<th>

Table head。表格的頭部的一個單元格，表格表頭。

額外元素

<tbody>、<thead>、<tfoot>

表格結構，若是不加<thead> <tbody> <tfooter> , 表格將在加載完後才顯示。加上這些， tbody包含行的內容優先顯示，沒必要等待表格結束後再顯示。
同時，若是表格很長，用tbody分段，能夠一部分一部分地顯示。
（通俗理解 table 能夠按結構一塊塊的顯示，不用等整個表格加載完後顯示。）

<caption>

表格標題

屬性

border

表格邊框的寬度。
建議設置爲 0 後自行 CSS 添加邊框樣式。

cellpadding

表格單元邊界與單元內容之間的間距（內邊距）。
建議設置爲 0 後自行 CSS 添加內邊距樣式。

cellspacing

單元格之間的間距。

實例

使用CSS3實現表格隔行變色

例子代碼更加直觀易懂 查看代碼 》
使用 CSS3的 :nth-child(n) 僞類選擇器能夠實現表格隔行變色的效果。n 可填寫 odd、even或任意數字，分別表明奇數行/列、偶數行/列或指定行/列