表格用來有架構的呈現資訊,通常用於可歸納的資料上。
針對整個表格,可以有表格的標題與摘要,用來補充表格的資訊。
表格的內容則由表頭與資料欄列所組成。
橫向的表格會有欄標題與資料列,而直向的表格則有列標題與資料欄。
通常直向的表格只會有一筆資料,而多筆資料則採橫向表格設計以避免滑鼠水平移動,進而造成二維滾動的障礙。
我們會說「文不如表」,就表示能夠歸納資料以表格方式來呈現會讓人更快速的理解,對於數據的統計也比較可以用有結構的方式顯示。
以上都是資料表格帶給我們的便利。但有些舊式網站會利用表格整齊的對齊特性來當作網頁畫面的排版工具,這又是一個沒有按照語意標籤來設計網頁的錯誤範例。
這對於導讀軟體瀏覽網站時,產生了不良的影響 。例如朗讀多餘的欄列資訊等。
若想要做網頁排版,應該使用樣式語言,如 css 等,不建議使用表格標籤來進行排版,這就是所謂的排版表格。
表格設計得當,可以幫助使用者有系統的了解資訊,但如果誤用,可能就會帶來閱讀困擾。
注意:使用表格欄列移動快速鍵時,有時會不小心將畫面旋轉,此時請至桌面空白處按滑鼠右鍵進行畫面調整。 也可以關閉 NVDA 後,使用 control + alt + 方向鍵 進行調整。
<table>
<thead>
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 體重 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
</table>
<table summary="本表格用於呈現本班的身高體重資訊">
<caption> 身高體重統計表 </caption>
<thead>
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 體重 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
</table>
因為 summary 屬性廢棄了,所以使用 chrome 時,當表格有 caption 與 summary 只會朗讀 caption,但若表格只有 summary 屬性而無 caption 時,仍會朗讀 summary 內容
<table>
<caption> 身高體重統計表 </caption>
<summary>本表格用於呈現本班的身高體重資訊</summary>
<thead>
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 體重 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td> 姓名 </td>
<td> 身高 </td>
<td> 體重 </td>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
</table>
未使用 th 就表示沒有表格欄列標題,這是不符合規範的語法
<table>
<thead>
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 體重 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
共有2筆資料
</td>
</tr>
</tfoot>
</table>
<table>
<thead>
<tr>
<th rowspan="2"> 姓名 </th>
<th colspan="2"> 個資 </th>
<th colspan="2"> 科目 </th>
</tr>
<tr>
<th> 身高 </th>
<th> 體重 </th>
<th> 數學 </th>
<th> 英文 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 小明 </td>
<td> 170 </td>
<td> 60 </td>
<td> 90 </td>
<td> 0 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
<td> 100 </td>
<td> 10 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
共有2筆資料
</td>
</tr>
</tfoot>
</table>
更複雜的表格,可能需要使用 scope 或 headers 屬性來強制對應指定欄位標題
<table>
<thead>
<tr>
<th id="e1"> name </th>
<th id="e2"> hight </th>
<th id="e3"> weight </th>
</tr>
<tr>
<th> 姓名 </th>
<th> 身高 </th>
<th> 體重 </th>
</tr>
</thead>
<tbody>
<tr>
<td headers="e1"> David </td>
<td headers="e2"> 170 </td>
<td headers="e3"> 60 </td>
</tr>
<tr>
<td> 小美 </td>
<td> 160 </td>
<td> 48 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
共有2筆資料
</td>
</tr>
</tfoot>
</table>
<table>
<tr>
<th>標題一</th>
<td>內容一</td>
</tr>
<tr>
<th>標題二</th>
<td>內容二</td>
</tr>
<tr>
<th>標題三</th>
<td>內容三</td>
</tr>
</table>
直向表格無法使用 thead 與 tbody
直接看範例效果
<table>
<tr>
<td> 1. 早睡早起身體好 </td>
<td> 2. 早起的鳥兒有蟲吃 </td>
</tr>
</table>
<table>
<thead>
<tr>
<th> </th>
<th> 星期一 </th>
<th> 星期二 </th>
</tr>
</thead>
<tbody>
<tr>
<th> 1號 </td>
<td> 上班 </td>
<td> 放假 </td>
</tr>
<tr>
<th> 2號 </td>
<td> 出差 </td>
<td> 居家 </td>
</tr>
</tbody>
</table>