TAS 樣式選單 – HTML 表格

以下是可用於呈現資訊的基本 HTML 表格。當要在 TAS 網站上傳達表格訊息時，這應該是「首選」。

以下是必須修改表格 HTML 才能建立上述樣式的方法：

• 包括一個 <caption> 中的元素 <tbody> 部分，在任何 <tr>。這包括整個表格的粗體“標題”。將其包含在 <table> 元素確保它向螢幕閱讀器描述整個表格。
• 新增一個屬性 style="width:100%" 到 <table> 元素，強制其跨越頁面容器的寬度。如果需要更窄的桌子，這是可選的。
• 新增一個「部落格」類 <table> element – 這將表格邊框設定為折疊，並根據 TAS Web 調色板為其著色。它還確保在 CSS 中正確選擇其他類別。
• 為每個添加一個“header”類 <th> 頂行中的元素。這可確保他們從 TAS Web 調色板獲得背景顏色。
• 對於任何左列標題單元格，請確保它是 <th> 元素，但添加一個“left”類別而不是“header”類別。這確保它不會獲得背景陰影，並且文字與單元格的左側對齊。
• 除非您的表格只有一行或一列標題；確保每個標題單元格都有一個 scope 屬性。例如;如果第一行和第一列都是標題，則需要範圍屬性，如上表所示。
• 新增一個屬性 style="width: __%;" 在各個 <th> 在第一行中，突出顯示的是數字。此百分比應適合調整表格列的大小。這可以控制設計中的列。省略任何寬度 <th> 元素將讓它們根據最寬的內容進行彎曲，沒有空格。內容將包裹在儲存格內（<th> or <td>) 在任何空格字元處，沒有設定寬度。

其中每一項都是可選的，但卻是 TAS 網站上基本表格的標準。

以下是一些指導創作/編輯過程的提示，以幫助使表格資料符合簡單的 HTML 表格格式。

• 避免合併表格單元格－雖然在 Excel 中合併儲存格很常見，但 HTML 表格中的合併儲存格本質上很難構建，即使編碼正確；螢幕閱讀軟體對資訊的解析不一致。
  • 如果可能的話，重組資訊。有時，將一個表拆分為兩個不同的表比重新編碼單個表以適應螢幕閱讀器更容易。例如;如果提供了顯示兩個不同年份資料的表格 - 包括兩個不同的表格，並根據年份為每個表格新增標題。
• 使用 <caption> 用於命名整個表的元素，而不是一個 <h#> 元素位於外面 <table> 元件。
• 使用較低級別 <h#> 如果您需要使用標題，請在表格中的元素（又稱；不要破壞表格內頁面的 h 元素層次結構）。
• 使用 scope, colspan以及 rowspan 適當地賦予屬性
  • scope 當同時存在垂直和水平表格標題單元格時，用於識別標題單元格的上下文（例如，標題單元格是用於行還是列）
  • colspan 當儲存格跨多列合併時使用 - 確定跨多少列合併
  • rowspan 當跨多行合併儲存格時使用 - 確定跨多行合併的行數
• 避免版面配置表格 – 「版面配置表格」是指表格 HTML 元素用於定位 HTML 內容，但所有表格功能都設定為不顯示（例如，無邊框、無標題等）。這是一個使用現有知識來達到預期效果的範例，而無需了解相關效果。最終;自 HTML 4.0 (1999) 以來，佈局表已被強烈反對；定位和呈現應該透過 CSS 來控制。如有疑問：請聯絡 TAS M&T 的人員協助 CSS 佈局。