TAS 样式菜单 – HTML 表格

以下是可用于呈现信息的基本 HTML 表格。当要在 TAS 网站上传达表格信息时，这应该是“首选”。

以下是必须修改表格 HTML 以创建上述样式的方法：

• 包括一个 <caption> 中的元素 <tbody> 部分之前 <tr>。这包括整个表格的加粗“标题”。包括 <table> 元素确保它向屏幕阅读器描述整个表格。
• 添加属性 style="width:100%" 以及 <table> 元素，强制其跨越页面容器的宽度。如果希望表格更窄，则这是可选的。
• 将“博客”类添加到 <table> 元素 – 这会将表格边框设置为折叠，并根据 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 元素（即不要破坏表格内页面的 h 元素层次结构）。
• 使用 scope, colspan及 rowspan 适当地赋予属性
  • scope 用于在表格中同时存在垂直和水平标题单元格时，识别标题单元格的上下文（例如，标题单元格是针对行还是针对列）
  • colspan 用于在多列单元格合并时使用——用于标识合并了多少列
  • rowspan 用于在多行单元格合并时使用——用于标识合并了多少行
• 避免布局表格——“布局表格”是指使用表格 HTML 元素来定位 HTML 内容，但所有表格功能均设置为不显示（例如，无边框、无标题等）。这是使用现有知识实现所需效果的示例，而无需了解相关效果。最终，自 HTML 4.0（1999 年）以来，强烈反对使用布局表格；定位和呈现应通过 CSS 进行控制。如有疑问：请联系 TAS M&T 的人员以协助进行 CSS 布局。