- 精通HTML5+CSS3+JavaScript網頁設計(視頻教學版)(第2版)
- 王英英
- 349字
- 2019-12-09 14:23:56
4.2 完整的表格標記
上面講述了表格中最常用也是最基本的三個標記<table>、<tr>和<td>,使用它們可以構建出最簡單的表格。為了讓表格結構更清楚,以及配合后面學習的CSS樣式,更方便地制作各種樣式的表格,表格中還會出現表頭、主體、腳注等。
按照表格結構,可以把表格的行分組,稱為“行組”。不同的行組具有不同的意義。行組分為3類——“表頭”“主體”和“腳注”,三者相應的HTML標記依次為<thead>、<tbody>和<tfoot>。
此外,在表格中還有兩個標記。標記<caption>表示表格的標題,在一行中除了<td>標記表示一個單元格以外,還可以使用<th>定義表格內的表頭單元格。
【例4.5】(實例文件:ch04\4.5.html)

從上面的代碼可以發現,使用<caption>標記定義了表格標題,<thead>、<tbody>和<tfoot>標記對表格進行了分組。在<thead>部分使用<th>標記代替<td>標記定義單元格,<th>標記定義的單元格默認加粗。網頁預覽效果如圖4-8所示。

圖4-8 完整的表格結構
技巧提示
<caption>標記必須緊隨<table>標記之后。
推薦閱讀
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- Vue.js Web開發案例教程(在線實訓版)
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- 網頁制作實用教程(第3版)
- 社交網站界面設計(原書第2版)
- CSS圖鑒
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計實戰視頻教程
- 動態網頁設計與制作(HTML5+CSS3+JavaScript)(第3版)
- Web程序設計
- Dreamweaver CS4網頁制作入門、進階與提高
- 網頁設計綜合實踐教程
- 外貿獨立站建站實操從入門到精通
- 從缺陷中學習C-C++
- 中文版Dreamweaver CS6高手之道
- 眾妙之門:電子商務網站設計指南