Editing Help:Table (section)

=== 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.