Web - 第十六章 | HTML 表格高級功能和可訪問性
HTML 表格更高級的功能，比如像表格的標題/摘要，以及將你表格中的各行分組成頭部、正文、頁腳部分，提高視障用戶的可訪問性。
表格標題節
表格增加一個標題，通過<caption>元素，再把<caption>元素放入 <table>元素中。
你應該把它放在<table> 標籤的下面。
標題意味著包含對於表格內容的描述，這對那些希望可以快速瀏覽網頁中的表格對他們是否有幫助的讀者們來說，是非常好的功能。特別是盲人用戶，不需要讓屏幕閱讀設備讀出很多單元格的內容，來讓用戶了解這張表格講的是什麼，而是可以依靠標題的內容，來決定是否需要了解更詳細的內容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
td {
text-align: center;
}
caption {
padding: 10px;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <table>
<caption>水果減肥計劃</caption>
<colgroup>
<col>
<col style="background-color: yellow">
</colgroup>
<tr>
<th>第一天</th>
<th>第二天</th>
</tr>
<tr>
<td>蘋果</td>
<td>橘子</td>
</tr>
<tr>
<td>葡萄</td>
<td>芭樂</td>
</tr>
</table>
|
注：這個summary屬性也可以在<table>元素中使用，用來提供一段描述，同樣可以被屏幕閱讀設備閱讀。我們推薦使用 <caption>元素來代替使用，因為 summary被HTML5規範，deprecated (廢除了)，也不能被視力正常的用戶閱讀。(它不會出現在頁面上)
添加<thead>, <tfoot>,和<tbody>結構
由於你的表格在結構上有點複雜，如果把它們定義得更加結構化，那會幫助我們更能了解結構。一個明確的方法是使用 <thead>, <tfoot>,和<tbody>,這些元素允許你把表格中的部分標記為表頭、頁腳、正文部分。
這些元素不會使表格更易於屏幕閱讀器用戶訪問，也不會造成任何視覺上的改變。然而，它們在應用樣式和佈局上會起到作用，可以更好地讓CSS 應用到表格上。給你一些有趣的例子，在長表格的情況下，你可以在每個打印頁面上使表格頁眉和頁腳重複，你也可以讓表格的正文部分顯示在一個單獨的頁面上，並通過上下滾動來獲得內容。
<thead>需要嵌套在table元素中，放置在頭部的位置，因為它通常代表第一行，第一行中往往都是每列的標題，但是不是每種情況都是這樣的。如果你使用了<col>/ <colgroup>元素，那麼<thead>元素就需要放在它們的下面。
<tfoot>需要嵌套在table元素中，放置在底部(頁腳)的位置，一般是最後一行，往往是對前面所有行的總結，比如，你可以按照預想的方式將<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(瀏覽器仍將它呈現在表格的底部)
<tbody>需要嵌套在table元素中，放置在<thead>的下面或者是 <tfoot> 的下面，這取決於你如何設計你的結構。( <tfoot>放在<thead>下面也可以生效)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
th {
background-color: rgb(235,235,235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <table>
<caption>花費記錄表</caption>
<thead>
<tr>
<th>項目</th>
<th>位置</th>
<th>日期</th>
<th>評價</th>
<th>價格</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">加總</td>
<td>920</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>掛號</td>
<td>診所</td>
<td>05/24</td>
<td>普通</td>
<td>250</td>
</tr>
<tr>
<td>牛肉麵</td>
<td>餐廳</td>
<td>05/25</td>
<td>很好</td>
<td>140</td>
</tr>
<tr>
<td>點心</td>
<td>便利商店</td>
<td>05/25</td>
<td>普通</td>
<td>80</td>
</tr>
<tr>
<td>拍照</td>
<td>相片館</td>
<td>05/26</td>
<td>差勁</td>
<td>450</td>
</tr>
</tbody>
</table>
|
注：<tbody>總是包含在每個表中，如果你沒有在代碼中指定它，那就是隱式的。可以來驗證一下，打開一個你之前沒有包含 <tbody> 的例子，然後在你的 browser developer tools 中觀察你的代碼，你會看到瀏覽器為你添加了這個標籤。你也許會想問，為什麼你應該在所有表中都需要這個元素，因為它可以讓你更好地控製表格結構和样式。
嵌套表格
在一個表格中嵌套另外一個表格是可能的，只要你包含完整的結構，包括<table>元素。這樣通常是不建議的，因為這種做法會使標記看上去很難理解，對使用屏幕閱讀的用戶來說，可訪問性也降低了。以及在很多情況下，也許你只需要插入額外的單元格/行/列到已有的表格中。然而有時候是必要的，比如你想要從其他資源中更簡單地導入內容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
th {
background-color: rgb(235,235,235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>
|
適用於視障用戶的表格
一個表格可以是一個便利的工具，或者讓我們快速訪問資料，並允許我們查找不同的值。比如，你只需要稍微看一眼下列的表格，你就能得知2016 年8 月份在Gent 出售了多少個Rings (戒指)。為了理解訊息，我們讓資料與列標題或行標題之間建立視覺聯繫。
假設你無法通過視覺關聯這些資料呢? 那麼你應該如何閱讀上述的表格? 視力受損的用戶經常使用一個屏幕閱讀設備來為他們讀出網頁上的訊息。對於盲人來說，閱讀簡單的文字沒有什麼問題，但是要理解一張表格的內容，這就有一些難度了。雖然，使用正確的標記，我們可以用程序化來代替視覺關聯。
注：根據世界衛生組織2017年的資料，大約有2.53億人患有視覺障礙。
使用列和行的標題
屏幕閱讀設備會識別所有的標題，然後在它們和它們所關聯的單元格之間產生編程關聯。列和行標題的組合將標識和解釋每個單元格中的資料，以便屏幕閱讀器用戶可以類似於視力正常的用戶的操作來理解表格。
scope屬性
scope屬性，可以添加在<th>元素中，用來幫助屏幕閱讀設備更好地理解那些標題單元格。
1
2
3
4
5
6
7
8
9
| <thead>
<tr>
<th scope="col">項目</th>
<th scope="col">位置</th>
<th scope="col">日期</th>
<th scope="col">評價</th>
<th scope="col">價格</th>
</tr>
</thead>
|
每一行都可以這樣定義一個行標題 (如果我們已經使用了th 和td 元素):
1
2
3
4
5
6
7
| <tr>
<th scope="row">掛號</th>
<td>診所</td>
<td>05/24</td>
<td>普通</td>
<td>250</td>
</tr>
|
scope 屬性定義將表頭單元與資料單元相關聯的方法。
scope 屬性標識某個單元是否是列、行、列組或行組的表頭。
scope 屬性不會在普通瀏覽器中產生任何視覺變化。
屏幕閱讀器可以利用該屬性。
詳細解釋
使用scope 屬性，可以將資料單元格與表頭單元格聯繫起來。
通過屬性值row，表頭行包括的所有表格都將和表頭單元格聯繫起來。指定col，會將當前列的所有單元格和表頭單元格綁定起來。
使用rowgroup 和colgroup 會將單元格的行組（由<thead>、<tbody>或<tfoot>標籤定義）或列組中的所有單元格和表頭單元格綁定起來（由<col>或<colgroup>標籤定義）
這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。
註：以上參考了
MDN web docs 的 HTML table advanced features and accessibility 文章。
w3school 的 HTML
標籤的scope 屬性 | 文章。
