4-10 表格 (table)

表格 結構

表格 結構

其他屬性說明，詳：w3schools(英) / runoob(中)

應多加注意多種屬性在HTML5之下已停用詳：runoob(中)

表格應以CSS樣式設定進行美化

表格 HTML 結構列表

本網頁未提及部份，請自行參考 w3schools 操作手冊

標籤 說明 HTML5 參考
<table> 定義為一個表格  英 ／ 中
<tr> 定義表格中的一個橫列  英 ／ 中
<th> 定義表格中的標題儲存格(預設文字粗體置中)  英 ／ 中
<td> 定義表格中的一般儲存格  英 ／ 中
<caption> 定義表格中的標題文字  英 ／ 中
<thead> 定義表格中的首區  英 ／ 中
<tbody> 定義表格中的內容區  英 ／ 中
<tfoot> 定義表格中的尾區  英 ／ 中

表格 CSS 屬性列表

本網頁未提及部份，請自行參考 w3schools 操作手冊

屬性 說明 CSS3 連結
border-collapse 設定表格中儲存格相鄰的框線合併  英 ／ 中
border-spacing 設定表格中儲存格之間的間距  英 ／ 中
caption-side 設定表格標題的位置  英 ／ 中
empty-cells 隱藏表格中空儲存格的邊框和背景  英 ／ 中
table-layout 設定表格的佈局算法  英 ／ 中

簡要說明

border-collapse屬性值

屬性值 說明
collapse 儲存格間不增加距離
separate 預設值 儲存格間增加距離
可與 border-spacing 配合，調整儲存格間距
inherit 繼承父元素的border-collapse屬性值

說明1：儲存格間距調整

表格屬性說明

說明2：表格寬度調整

表格文字美化，依一般文字美化調整

<th>：預設文字粗體置中，<td>：預設文字置左

表格寬度調整說明

說明3：合併儲存格方法

合併儲存格方法，在 HTML結構 設定

應多加注意多種屬性在HTML5之下已停用詳：runoob(中)

屬性值 說明
colspan 合併儲存格方法的 列數
rowspan 合併儲存格方法的 欄數
headers 儲存格相關聯的一個或多個表頭儲存格
合併儲存格方法說明