此例子已經包含本文大部分內容,請對照參考。查看代碼 》
定義和用法
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或任意數字,分別代表奇數行/列、偶數行/列或指定行/列