首頁 > web前端 > html教學 > 淺析HTML Table表格的使用方法

淺析HTML Table表格的使用方法

不言
發布: 2018-07-28 11:21:43
原創
1804 人瀏覽過

這篇文章要跟大家介紹的文章內容是關於淺析HTML Table表格的使用方法,有很好的參考價值,希望可以幫助到有需要的朋友。

定義與用法

table標籤定義 HTML 表格。

建立表格的四個要素:tabletrthtd

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

<tr> <p>Table row。表格的一行,有幾對 tr 表格就有幾行。 </p> <h3><code><td> <p>Table data。表格的一個儲存格,一行中包含幾對 td ,一行中就有幾列。 </p> <h3><code><th> <p>Table 頭。表格的頭部的一個單元格,表格表頭。 </p> <h2>額外元素</h2> <h3><code><tbody>、<code><thead>、<code><tfoot><p>表格結構,如果不加<code><thead> </thead> <tbody> <tfooter> , 表格將在載入完後才顯示。加上這些, <code>tbody包含行的內容優先顯示,不必等待表格結束後再顯示。
同時,如果表格很長,用tbody分段,可以一部分一部分顯示。
(簡單理解table 可以按結構一塊塊的顯示,不用等整個表格加載完後顯示。)

<caption></caption>

表格標題

屬性

border

表格邊框的寬度。
建議設定為 0 後自行 CSS 新增邊框樣式。

cellpadding

表格單元邊界與單元內容之間的間距(內邊距)。
建議設定為 0 後自行 CSS 新增內邊距樣式。

cellspacing

單元格之間的間距。

實例

使用CSS3實作表格隔行變色

淺析HTML Table表格的使用方法
#使用CSS3的:nth-child(n) 偽類選擇器可以實現表格隔行變色的效果。
n 可填入odd、even或任意數字,分別代表奇數行/列、偶數行/列或指定行/列

相關推薦:

HTML的格式及標籤介紹

如何簡述html的基本結構(附程式碼)

以上是淺析HTML Table表格的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板