HTML中Table表格怎么用

發(fā)布時間：2021-01-26 12:30:03 來源：億速云閱讀：196 作者：小新欄目：web開發(fā)

小編給大家分享一下HTML中Table表格怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

定義和用法

table標(biāo)簽定義 HTML 表格。

創(chuàng)建表格的四要素：`table`、`tr`、`th`、`td`

`<table>`

整個表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。

`<tr>`

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

`<td>`

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

`<th>`

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

額外元素

`<tbody>`、`<thead>`、`<tfoot>`

表格結(jié)構(gòu)，如果不加<thead> <tbody> <tfooter> , 表格將在加載完后才顯示。加上這些， tbody包含行的內(nèi)容優(yōu)先顯示，不必等待表格結(jié)束后再顯示。
同時，如果表格很長，用tbody分段，可以一部分一部分地顯示。
（通俗理解 table 可以按結(jié)構(gòu)一塊塊的顯示，不用等整個表格加載完后顯示。）

`<caption>`

表格標(biāo)題

屬性

`border`

表格邊框的寬度。
建議設(shè)置為 0 后自行 CSS 添加邊框樣式。

`cellpadding`

表格單元邊界與單元內(nèi)容之間的間距（內(nèi)邊距）。
建議設(shè)置為 0 后自行 CSS 添加內(nèi)邊距樣式。

`cellspacing`

單元格之間的間距。

實例

使用CSS3實現(xiàn)表格隔行變色

HTML中Table表格怎么用
使用 CSS3的 :nth-child(n) 偽類選擇器可以實現(xiàn)表格隔行變色的效果。
n 可填寫 odd、even或任意數(shù)字，分別代表奇數(shù)行/列、偶數(shù)行/列或指定行/列

看完了這篇文章，相信你對“HTML中Table表格怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

HTML中Table表格怎么用

定義和用法

創(chuàng)建表格的四要素：table、tr、th、td

<table>

<tr>

<td>

<th>

額外元素

<tbody>、<thead>、<tfoot>

<caption>

屬性

border

cellpadding

cellspacing

實例