跳到主要內容
:::|

5.5:H305004 表格須提供表格摘要說明(如summary屬性)

說明:網頁內容設計者若必須使用表格來呈現資訊時,必須對此表格提供摘要結結構說明,以利視障者透過點字機或是語音合成器來辨別表格資訊。

範例:一般網頁上的表格設計常忽略了提供摘要說明,不良的設計如下。

不良設計

沒有在TABLE標籤中使用summary屬性提供表格摘要說明。

不良設計:

< TABLE border= " 1 " > 
< CAPTION > 台灣主要城市氣溫與紫外線強度 < /CAPTION > 
< TR > 
< TH > 主要城市 < /TH > 
< TH > 氣溫溫度 < /TH > 
< TH > 紫外線強度 < /TH > 
< /TR > 
< TR > 
< TD > 台北 < /TD > 
< TD > 35度 < /TD > 
< TD > 普通 < /TD > 
< /TR > 
< !--表格內容略-- > 
< /TABLE >

正確示範

有使用summary屬性來為提供詳細的表格說明。

正確範例:

< TABLE border= " 1 " summary= " 此台灣主要城市氣溫與紫外線強度表格中,
第一直欄是主要城市,第二直欄是氣溫溫度,第三直欄是紫外線強度。 " > 
< CAPTION > 台灣主要城市氣溫與紫外線強度 < /CAPTION > 
< TR > 
< TH > 主要城市 < /TH > 
< TH > 氣溫溫度 < /TH > 
< TH > 紫外線強度 < /TH > 
< /TR > 
< TR > 
< TD > 台北 < /TD > 
< TD > 35度 < /TD > 
< TD > 普通 < /TD > 
< /TR > 
< !--表格內容略-- > 
< /TABLE >

 

正確範例:

< TABLE border= " 1 " summary= " 此表格是王小強與李大明的旅行開支表,表格分為
五直欄,第一直欄標示兩人的消費日期,第二三四五直欄則依序為該日期的餐飲
費、住宿費、交通費以及小計,而在最後一橫列有總計資料。 " > 
< CAPTION > 旅行開支表 < /CAPTION > 
< TR > 
< TH > < /TH > 
< TH id= " a2 " axis= " 費用 " > 餐飲費 < /TH > 
< TH id= " a3 " axis= " 費用 " > 住宿費 < /TH > 
< TH id= " a4 " axis= " 費用 " > 交通費 < /TH > 
< TD > 小計 < /TD > 
< /TR > 
< TR > 
< TH id= " a6 " axis= " 姓名 " > 王小強 < /TH > 
< TH > < /TH > 
< TH > < /TH > 
< TH > < /TH > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD id= " a7 " axis= " 日期 " > 92年10月18日 < /TD > 
< TD headers= " a6 a7 a2 " > 350 < /TD > 
< TD headers= " a6 a7 a3 " > 1200 < /TD > 
< TD headers= " a6 a7 a4 " > 240 < /TD > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD id= " a8 " axis= " 日期 " > 92年10月19日 < /TD > 
< TD headers= " a6 a8 a2 " > 400 < /TD > 
< TD headers= " a6 a8 a3 " > 1500 < /TD > 
< TD headers= " a6 a8 a4 " > 300 < /TD > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD > 小計 < /TD > 
< TD > 750 < /TD > 
< TD > 2700 < /TD > 
< TD > 540 < /TD > 
< TD > 3990 < /TD > 
< /TR > 
< TR > 
< TH id= " a10 " axis= " 姓名 " > 李大明 < /TH > 
< TH > < /TH > 
< TH > < /TH > 
< TH > < /TH > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD id= " a11 " axis= " 日期 " > 92年10月20日 < /TD > 
< TD headers= " a10 a11 a2 " > 310 < /TD > 
< TD headers= " a10 a11 a3 " > 1350 < /TD > 
< TD headers= " a10 a11 a4 " > 320 < /TD > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD id= " a12 " axis= " 日期 " > 92年10月21日 < /TD > 
< TD headers= " a10 a12 a2 " > 440 < /TD > 
< TD headers= " a10 a12 a3 " > 1740 < /TD > 
< TD headers= " a10 a12 a4 " > 230 < /TD > 
< TD > < /TD > 
< /TR > 
< TR > 
< TD > 小計 < /TD > 
< TD > 750 < /TD > 
< TD > 3090 < /TD > 
< TD > 550 < /TD > 
< TD > 4390 < /TD > 
< /TR > 
< TR > 
< TH > 總計 < /TH > 
< TD > 1500 < /TD > 
< TD > 5790 < /TD > 
< TD > 1090 < /TD > 
< TD > 8380 < /TD > 
< /TR > 
< /TABLE >

上一頁| 回首頁