Editing Help:Table (section)

== Whole table operations ==

=== Class ===

One or more classes may be added to the [[#Begin and end delimiters|§&nbsp;Begin-table delimiter]] line at the top of the table, and may be used to supply predefined style to the table. The wikicode table {{kbd|class}} attribute [[Help:Basic table markup#How tables are formed|corresponds directly]] to the "{{kbd|class}}" [[HTML attribute|attribute of the HTML]] <code>&lt;table></code> element. To add multiple classes to a table, place them all on the same line, embedded in double quotes and separated by a space:
<syntaxhighlight lang=wikitext class=grid>
{| class="wikitable sortable collapsible"
</syntaxhighlight>

Some predefined classes are:
{| class="wikitable sortable floatright"
|+ A sortable wikitable
|-
! breed
! ht
! wt	
|-
| Labrador Retriever
| 23
| 70
|-
| French Bulldog
| 12
| 25
|-
| German Shepherd
| 27
| 78
|-
| Golden Retriever
| 23
| 71
|-
| English Bulldog
| 14
| 45
|}
* {{kbd|wikitable}} – provides column headers with bold font on shaded background, and other common style. See [[Help:Table/Advanced#Horizontal alignment in cells|here]] for details. This class should be used for almost all tables, unless there is a reason not to.
* {{kbd|sortable}} – adds up & down icons to column headers which enable sorting the table on a given column. See [[Help:Sortable tables#Creating sortable tables|sortable tables]].
* {{kbd|mw-collapsible}} – See [[Help:Table/Advanced#Collapsible tables|collapsible tables]].{{efn|group=note|Collapsible tables: the class {{kbd|collapsible}} is available, but no longer recommended; use {{kbd|mw-collapsible}} instead. See [[Help:Table/Advanced#Collapsible tables|here]] for further details.}}
* {{kbd|plainrowheaders}} – applies left-aligned and normal-weight formatting of row headers. See [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Layout of table headers|Table header layout]]. Must be placed after ''wikitable'' if they both appear in the class declaration.
* {{kbd|floatright}} – same as applying <code><nowiki>style="float:right; clear:right; margin-left:8px"</nowiki></code> to the entire table
* {{kbd|floatleft}} – same as applying <code><nowiki>style="float:left; clear:left; margin-right:8px"</nowiki></code> to the entire table

Note: [[Template:Table]] may also be used to apply classes to the [[#Begin and end delimiters|§&nbsp;Begin-table delimiter]] line.

=== Captions and summaries ===
{{More|Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Proper table captions and summaries}}
Explicit table ''captions'' (or ''titles'') are recommended for data tables as a best practice; the Wikipedia Manual of Style [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Correct table captions|considers them a high priority]] for accessibility reasons ([[screen readers]]), as a caption is explicitly associated with the table, unlike a normal wikitext heading or introductory sentence. All data tables on Wikipedia require captions. A caption is provided with the <code>|+</code> markup, similar to a table row (<code>|-</code>), but it does not contain any cells, and is not within the table border. Captions are always displayed, appearing as a title centered (in most browsers), above the table. A caption can be styled (with inline, not block, CSS), and may include wikilinks, reference citations, etc.

Many article editors dislike table captions when the table is directly below, or not far away from, a similar article heading. But [[screen reader]] users still need a table caption to quickly browse from table to table. In this case use the popular {{t|sro}} template: '''[[Template:Screen reader-only]].''' Add the template to the table caption, and then only screen reader users will see it. Example:
:<syntaxhighlight lang="wikitext" inline>|+ {{sro|Table caption}}</syntaxhighlight>

For current table caption and summary guidelines see the w3.org page: '''[https://www.w3.org/WAI/tutorials/tables/caption-summary Caption & Summary, in Tables Tutorial].''' [[Web Accessibility Initiative]] (WAI). The summary info in the paragraph below is out of date: 

A {{em|summary}} provides an overview of the data of a table for text and audio browsers, and does not normally display in graphical browsers. The summary (also a high Manual of Style priority for tables) is a synopsis of content, and does not repeat the caption text; think of it as analogous to an image's <code>alt</code> description. A summary is added with <code>summary="{{var|Summary text here.}}"</code>, on the same line as the <code><nowiki>{|</nowiki></code> that opened the table, along with any <code>class=</code> and other parameters for the table as a whole. <!--{{em|The summary cannot be styled, wikilinked, or otherwise marked up, but must be simple, plain text. It cannot even include italics.}} (It may contain character entity codes, such as <code>&amp;ndash;</code>.)--> '''The <code>summary=</code> attribute is, however, [[Wikipedia:HTML 5#Table_attributes|obsolete in HTML&nbsp;5]].'''

<div class="box" style="max-width:30em;">
'''Wiki markup''' example showing left-aligned caption with a source citation:
<syntaxhighlight lang="wikitext">
{| class=wikitable
|+ style="text-align: left;" | Data reported for 2014–2015, by region<ref name="Garcia 2005"/>
|-
! scope=col | Year !! scope=col | Africa !! scope=col | Americas !! scope=col | Asia & Pacific !! scope=col | Europe
|-
! scope=row | 2014
| 2,300 || 8,950 || ''9,325'' || 4,200
|-
! scope=row | 2015
| 2,725 || ''9,200'' || 8,850 || 4,775
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|+ style="text-align: left;" | Data reported for 2014–2015, by region{{dummy ref|99}}
|-
! scope=col | Year !! scope=col | Africa !! scope=col | Americas !! scope=col | Asia & Pacific !! scope=col | Europe
|-
! scope=row | 2014
| 2,300 || 8,950 || ''9,325'' || 4,200
|-
! scope=row | 2015
| 2,725 || ''9,200'' || 8,850 || 4,775
|}
</div>

=== Colspan and rowspan ===
{{anchor|Cells spanning multiple rows or columns|Mélange|Merged cells|Colspan and rowspan}}
It is possible to create cells that stretch over two or more columns. For this, one uses <code>|colspan={{var|n}} | {{var|content}}</code>.
Similarly, one can create cells that stretch over two or more rows. This requires <code>|rowspan={{var|m}} | {{var|content}}</code>. In the table code, one must {{em|leave out the cells that are covered by such a span}}. The resulting column- and row-counting must fit.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext line highlight=8,19>
{| class=wikitable style="text-align: center;"
!col1
!col2
!col3
!col4
|-
!row1
| colspan=2 | A
<!-- column counting: cell 'B' can not exist -->
|C
|-
!row2
|AA
|BB
|CC
|-
!row3
|AAA
| rowspan=2 | BBB
|CCC
|-
!row4
|AAAA
<!-- row counting: cell 'BBBB' can not exist -->
|CCCC
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable style="text-align: center;"
!col1
!col2
!col3
!col4
|-
!row1
| colspan=2 | A
<!-- column counting: cell 'B' can not exist -->
|C
|-
!row2
|AA
|BB
|CC
|-
!row3
|AAA
| rowspan=2 | BBB
|CCC
|-
!row4
|AAAA
<!-- row counting: cell 'BBBB' can not exist -->
|CCCC
|}
</div>

In the code, the cell <code>| colspan="2" | A</code> spans two columns. Note that, in the next column, {{em|a cell expected to contain "B" does not exist}}.

Similar: in the code, cell <code>| rowspan="2" | BBB</code> spans two rows. {{em|A cell expected to contain "BBBB" does not exist}}.

<div class="box" style="max-width:30em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext line highlight=14>
{| class=wikitable
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan=2 | A
| colspan=2 style="text-align: center;" | B
<!-- column 3 of this row occupied by cell B (which is to the left) -->
|-
<!-- column 1 of this row occupied by cell A (above) -->
| C
| D
|-
| E
| rowspan=2 colspan=2 style="text-align: center;" | F
<!-- column 3 of this row occupied by cell F (to the left) -->
|-
| G
<!-- columns 2 and 3 of this row occupied by cell F (above) -->
|-
| colspan=3 style="text-align: center;" | H
<!-- columns 2 and 3 of this row occupied by cell H (to the left) -->
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
! Column 1 !! Column 2 !! Column 3
|-
| rowspan=2 | A
| colspan=2 style="text-align: center;" | B
|-
| C <!-- column 1 occupied by cell A -->
| D
|-
| E
| rowspan=2 colspan=2 style="text-align: center;" | F
|-
| G
<!-- columns 2 and 3 of this row occupied by cell F -->
|-
| colspan=3 style="text-align: center;" | H
|}
</div>

Note that using <code>rowspan=2</code> for cell '''G''' combined with <code>rowspan=3</code> for cell '''F''' to get another row below '''G''' and '''F''' won't work, because all (implicit) cells would be empty.

Below is the same table with the order of the declared rows and cells shown in parentheses. The uses of <code>rowspan</code> and <code>colspan</code> are also shown.

<div class="box" style="max-width:30em;">
'''Wikitext'''
<syntaxhighlight lang=wikitext>
{| class=wikitable
|-
! Column 1<br>(row 1 cell 1) !! Column 2<br>(row 1 cell 2) !! Column 3<br>(row 1 cell 3)
|-
| rowspan=2 | A<br>(row 2 cell 1)<br><code>rowspan=2</code>
| colspan=2 style="text-align: center;" | B<br>(row 2 cell 2)<br><code>colspan=2</code>
|-
| C<br>(row 3 cell 1) <!-- column 1 occupied by cell A -->
| D<br>(row 3 cell 2)
|-
| E<br>(row 4 cell 1)
| rowspan=2 colspan=2 style="text-align: center;" |F<br>(row 4 cell 2)<br><code>rowspan=2 colspan=2</code>
|-
| G<br>(row 5 cell 1) <!-- column 2+3 occupied by cell F -->
|-
| colspan=3 style="text-align: center;" | H<br>(row 6 cell 1)<br><code>colspan=3</code>
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{| class=wikitable
|-
! Column 1<br>(row 1 cell 1) !! Column 2<br>(row 1 cell 2) !! Column 3<br>(row 1 cell 3)
|-
| rowspan=2 | A<br>(row 2 cell 1)<br><code>rowspan=2</code>
| colspan=2 style="text-align: center;" | B<br>(row 2 cell 2)<br><code>colspan=2</code>
|-
| C<br>(row 3 cell 1) <!-- column 1 occupied by cell A -->
| D<br>(row 3 cell 2)
|-
| E<br>(row 4 cell 1)
| rowspan=2 colspan=2 style="text-align: center;" |F<br>(row 4 cell 2)<br><code>rowspan=2 colspan=2</code>
|-
| G<br>(row 5 cell 1) <!-- column 2+3 occupied by cell F -->
|-
| colspan=3 style="text-align: center;" | H<br>(row 6 cell 1)<br><code>colspan=3</code>
|}
</div>
Note that although cell '''C''' is in column 2, '''C''' is the 1st cell declared in row 3, because column 1 is occupied by cell '''A''', which was declared in row 2. Cell '''G''' is the only cell declared in row 5, because cell '''F''' occupies the other columns but was declared in row 4.