嘗試一下
| 學生 | 對什麼感興趣 | 年齡 |
|---|---|---|
| Chris | HTML 表格 | 22 |
| Dennis | Web 無障礙 | 45 |
| Sarah | JavaScript 框架 | 29 |
| Karen | Web 效能 | 36 |
| 平均年齡 | 33 | |
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
thead,
tfoot {
background-color: rgb(228 240 245);
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
td:last-of-type {
text-align: center;
}
tbody > tr:nth-of-type(even) {
background-color: rgb(237 238 242);
}
tfoot th {
text-align: right;
}
tfoot td {
font-weight: bold;
}
內容類型
流內容
允許內容
按照以下順序：
一個可選的
零個或更多的
一個可選的元素，
一個在以下元素之前或之後的可選
元素：
零個或更多的
元素，或者，一個或更多的
標籤省略
不允許，開始和結束標籤都是必須的。
允許父元素
任何允許流內容的元素
允許 ARIA 規則
任何
DOM 介面
HTMLTableElement
屬性
這個元件包含了 全域屬性（global attributes）。
棄用屬性
align
這個枚舉屬性會指示表格中的文字要如何對齊。可用值如下：left：意思是表格應該顯示在文件的左方。
center：意思是表格應該顯示在文件的中間。
right：意思是表格應該顯示在文件的右方。在 CSS 要得出類似效果，應該設定 margin-left 與 margin-right；如果要置中，則要把 margin 屬性設定為 0 auto。
bgcolor
定義表格的背景與內容顏色。它使用六位十六進制 RGB code，前缀需要加上 '#' 。也可以用預先定義的顏色字串可用。在 CSS 要得出類似效果，應該使用 background-color 屬性。
border
這個屬性以像素為單位，定義了圍繞於表格框架的大小。如果設為 0，代表 frame 屬性為空。在 CSS 要得出類似效果，應該使用 border 屬性。
cellpadding
這個屬性定義了元件與邊界線之間的空白，以及要不要顯示。如果輸入像素，像素長度的空白會套用到四個邊；如果輸入百分比，內容將居中、整體的垂直空間（上與下）會使用這個百分比表示。橫向空間（左與右）也適用這個規則。在 CSS 要得出類似效果，應該對
| 使用 padding。
cellspacing This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.To achieve a similar effect, apply the border-spacing property to the
更多範例 html 有表頭的簡單表格
有 thead、tfoot 和 tbody 的表格
有 colgroup 的表格
有colgroup和col的表格
有標題的簡單表格
table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; } 無障礙議題 Caption 提供 如此也能幫助螢幕閱讀器之類的輔具使用者、視力條件差、還有認知障礙的人。 MDN Adding a caption to your table with Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials Scope 行列 雖然在 HTML5 裡面 scope 屬性已經過時，但很多螢幕閱讀器會利用這屬性，複製不使用屏幕閱讀器的人的視覺關聯，以便推斷可能的視覺位置。 示例 html
在 元素提供 scope="col" 的宣告，有助於描述該單位屬於第一列。在 | 元素提供 scope="row" 則有助於描述該單位屬於第一行。
| MDN Tables for visually impaired users Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0 複雜的表格 針對單格複雜到無法歸類於直向或橫向的表格，諸如螢幕閱讀器之類的輔助技術，可能就無法解析。在這種情況下，通常就需要 colspan 與 rowspan 屬性。 理想情況下，可以考慮使用其他方式來呈現表格的內容，例如把表格切分到不必依賴 colspan 和 rowspan 屬性。除了幫助使用輔助技術的人了解表格的內容之外，這樣也會使認知障礙者受益，因為他們可能難以理解表格佈局描述的關聯。 如果表格無法切分，請結合 [id](/zh-TW/docs/Web/HTML/Global_attributes#id) 與 [headers](/zh-TW/docs/Web/HTML/Element/td#headers) 使用，以便程序化地關聯各表格單位與標題。 MDN Tables for visually impaired users Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0 規範 Specification HTML# the-table-element 瀏覽器相容性 參見 適合格式化 |