Qiuwen:无障碍访问：修订间差异

{{参见|Help:表格}}

表格可以用来呈现二维的数据。在HTML中，表格是具有一定的语义的。因此，表格不仅需要在视觉上正确，还应该有恰当的语义。

=== 使用标题单元格 ===

{{shortcut|QW:DTAB}}

标题单元格内置了加粗、居中的样式，同时还具有相应的语义。因此，请恰当地使用标题单元格。在HTML中，它代表{{tag|th}}元素。而在wikitext表格语法中，它是使用<code>!</code>（感叹号）来实现的<ref>{{Cite web |title=H51: Using table markup to present tabular information |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H51 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref><ref>{{Cite web |title=11.2.6 Table cells: The TH and TD elements |url=https://www.w3.org/TR/html40/struct/tables.html#h-11.2.6 |website=HTML 4.01 Specification |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。

{{编辑演示

|title=正确使用标题单元格的例子

|result=-{}-

{{(!}} class="wikitable"

! 标题单元格1 !! 标题单元格2

{{!}}-

{{!}} 数据1-1 {{!!}} 数据1-2

{{!}}-

{{!}} 数据2-1 {{!!}} 数据2-2

{{!)}}

}}

请不要仅通过样式来使得一些单元格看上去像是标题单元格。

{{编辑演示

|title=使用样式伪造标题单元格的错误例子

|result=-{}-

{{(!}} class="wikitable"

{{!}} style="text-align: center" {{!}} '''标题单元格1'''

{{!}} style="text-align: center" {{!}} '''标题单元格2'''

{{!}}-

{{!}} 数据1-1 {{!!}} 数据1-2

{{!}}-

{{!}} 数据2-1 {{!!}} 数据2-2

{{!)}}

}}

如有可能，您可以使用<code>scope="col"</code>或者<code>scope="row"</code>来更加清晰地表明这个标题单元格的用途，这有助于屏幕阅读器更好的阅读这个表格<ref name="H63">{{Cite web |title=H63: Using the scope attribute to associate header cells and data cells in data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H63 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。

{{编辑演示

|title=使用<code>scope</code>参数的正确例子

|result=-{}-

{{(!}} class="wikitable"

! scope="col" {{!}} 列标题0

! scope="col" {{!}} 列标题1

! scope="col" {{!}} 列标题2

{{!}}-

! scope="row" {{!}} 行标题1

{{!}} 数据1-1 {{!!}} 数据1-2

{{!}}-

! scope="row" {{!}} 行标题2

{{!}} 数据2-1 {{!!}} 数据2-2

{{!)}}

}}

=== 表格标题 ===

表格标题是显示在表格最上方的文本描述整个表格的内容<ref name="H39">{{Cite web |title=H39: Using caption elements to associate data table captions with data tables |url=https://www.w3.org/WAI/WCAG21/Techniques/html/H39 |website=Techniques for WCAG 2.1 |publisher=[[W3C]] |access-date=2023-05-15}}</ref>。在HTML中，表格标题是{{tag|caption}}标签。在wikitext中，表格标题是以<code>|+</code>（管道符号和一个加号）开始的内容。

{{编辑演示|title=使用表格标题的例子

|result=-{}-

{{(!}} class="wikitable"

{{!}}+ 表格标题

! 标题单元格1 !! 标题单元格2

{{!}}-

{{!}} 数据1-1 {{!!}} 数据1-2

{{!}}-

{{!}} 数据2-1 {{!!}} 数据2-2

{{!)}}

}}

不建议使用横跨一整行的单元格来表示一个表格标题，因为这语义不太正确。

{{编辑演示|title=伪造表格标题的例子

|result=-{}-

{{(!}} class="wikitable"

! colspan="2" {{!}} 表格标题

{{!}}-

! 标题单元格1 !! 标题单元格2

{{!}}-

{{!}} 数据1-1 {{!!}} 数据1-2

{{!}}-

{{!}} 数据2-1 {{!!}} 数据2-2

{{!)}}

}}