Editing Help:Table (section)

=== Scope ===

'''Column headers''' are identified by <code>! scope="col" |</code> instead of <code>|</code>. '''Row headers''' are identified by <code>! scope="row" |</code> instead of <code>|</code>. Each header cell should be on a separate line in the wiki-markup. The <code>scope="col"</code> and <code>scope="row"</code> markup should be used for column and row headers in all data tables because it explicitly associates the header with the corresponding cells, which helps ensure a consistent experience for screen readers. The Manual of Style [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Overview of basics|requires the use of scope for column and row headers]].

For [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Complex tables|complex tables]], when a header spans two columns or rows, use <code>! scope="colgroup" colspan="2" |</code> or <code>! scope="rowgroup" rowspan="2" |</code> respectively to clearly identify the header as a column header of two columns or a row header of two rows. When headers are unclear, this can cause accessibility issues; therefore, use <code>id=</code> to set a unique value without spaces on each header, then reference the id(s) on the data cells that have unclear headers using <code>headers=</code> with a space separating each id.

Header cells typically render differently from regular cells, depending on the browser. They are often rendered in a bold font and centered. If this rendering is not desired from an aesthetic point of view, the table can be styled with the "{{visible anchor|plainrowheaders}}" class which left-aligns the row headers and removes the bolding. Left-alignment of row headers only occurs if <code>class=wikitable</code> and <code>scope=row</code> are both used. 

<div class="box">
A typical example may be marked up like this:

'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="7,8,10,11">
{| class="wikitable plainrowheaders"
 |+ The table's caption
 ! scope=col | Column header 1
 ! scope=col | Column header 2
 ! scope=col | Column header 3
 |-
 ! scope=row | Row header 1
 | Cell 2 || Cell 3
 |-
 ! scope=row | Row header A
 | Cell B || Cell C
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class="wikitable plainrowheaders"
 |+ The table's caption
 ! scope=col | Column header 1
 ! scope=col | Column header 2
 ! scope=col | Column header 3
 |-
 ! scope=row | Row header 1
 | Cell 2 || Cell 3
 |-
 ! scope=row | Row header A
 | Cell B || Cell C
|}
</div>