- HTML5+CSS3+JavaScript從入門到精通(微課精編版)
- 前端科技
- 587字
- 2019-08-15 16:37:59
6.1 認識表格結構
表格由行、列、單元格3部分組成。單元格是行與列交叉的部分,它組成表格的最小單位,數據的輸入和修改都是在單元格中進行的。單元格可以拆分,也可以合并。以Excel為例,用戶可以很清晰地了解表格的各個組成部分,如圖6.1所示。

圖6.1 表格結構分析
在HTML中,表格由<table>標簽來定義,每個表格均有若干行,行由<tr>標簽定義,每行被分割為若干單元格,單元格由<td>標簽定義。字母td表示表格數據(table data),即數據單元格的內容,數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
設計符合標準的表格結構,用戶應該注意每個標簽的語義性和使用規則,簡單說明如下所示。
<table>:定義表格。在<table>標簽內部可以放置表格的標題、表格行、表格列、表格單元以及其他表格對象。
<caption>:定義表格標題。<caption>標簽必須緊隨<table>標簽之后。只能為每個表格定義一個標題。通常這個標題會被居中顯示在表格之上。
<th>:定義表頭單元格。<th>標簽內部的文本通常會呈現為粗體、居中顯示。
<tr>:在表格中定義一行。
<td>:在表格中定義一個單元格。
<thead>:定義表頭結構。
<tbody>:定義表格主體結構。
<tfoot>:定義表格的頁腳結構。
<col>:在表格中定義針對一個或多個列的屬性值。只能在<table>或<colgroup>標簽中使用。
<colgroup>:定義表格列的分組。通過該標簽,可以對列組進行格式化。只能在<table>標簽中使用。
【示例】下面示例使用上述表格標簽對象,設計一個符合標準的表格結構,代碼如下所示。

在符合標準的表格結構中很少見到各種表格屬性,代碼簡潔,數據明了,表格功能單一。
推薦閱讀