天天看點

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

本節書摘來自異步社群《html、css、javascript 網頁制作從入門到精通》一書中的第6章,第6.7節,作者:【美】john resig(萊西格) , bear bibeault(貝比奧特) 譯者: 徐濤 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

還有一些标記是用來表示表格結構的,包括表首标記< thead >、表主體标記< tbody >以及表尾标記< tfoot >。這些通過成對出現的标記設定,應用到表格裡用于整體規劃表格的行列屬性。使用這些标記能對表格的一行或多行單元格屬性進行統一修改,進而省去了逐一修改單元格屬性的麻煩。

6.7.1 表格的表首标記< thead >

表首樣式的開始标記是< thead >,結束标記是 thead >。它們用于定義表格最上端表首的樣式,可以設定背景顔色、文字對齊方式、文字的垂直對齊方式等。

文法:

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

說明:

在該文法中,bgcolor、align、valign的取值範圍與單元格中的設定方法相同。在< thead >标記内還可以包含< td >、< th >和< tr >标記,而一個表元素中隻能有一個< thead >标記。

舉例:

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構
《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

在代碼中加粗部分的代碼标記為設定表格的表首,在浏覽器中預覽效果,如圖6.33所示。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

6.7.2 表格的表主體标記< tbody >

與表首樣式的标記功能類似,表主體樣式用于統一設計表主體部分的樣式,标記為。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

在該文法中,bgcolor、align、valign的取值範圍與< thead >标記中的相同。一個表元素中隻能有一個< tbody >标記。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構
《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

在代碼中加粗部分的代碼标記為設定表格的表主體,在浏覽器中預覽效果,如圖6.34所示。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

6.7.3 表格的表尾标記< tfoot >

< tfoot >标記用于定義表尾樣式。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

在該文法中,bgcolor、align、valign的取值範圍與< thead >标記中的相同。一個表元素中隻能有一個< tfoot >标記。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構
《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

在代碼中加粗部分的代碼标記為設定表格的表尾,在浏覽器中預覽效果,如圖6.35所示。

《HTML、CSS、JavaScript 網頁制作從入門到精通》——6.7 表格的結構

繼續閱讀