Editing Help:Table (section)

== Wikicode syntax tutorial ==
<templatestyles src="Help:Table/styles.css" />
{{Main|Help:Basic table markup}}
{{For|a history of the development of wikicode table syntax|Help:Table/History of pipe syntax development{{!}}/History of pipe syntax development}}

A table may be created entirely in [[wikicode]] using special table markup [[/History of pipe syntax development|developed for the purpose]]. No knowledge of HTML is required.

=== Begin and end delimiters ===

Use <code>'''<nowiki>{|</nowiki>'''</code> to begin a table, and <code>'''|}'''</code> to end it. Each one needs to be on its own line:

<syntaxhighlight lang=wikitext class=gridbox>
{|
  table code goes here
|}
</syntaxhighlight>

Optional parameters like {{kbd|class}} may be placed on the Begin-table delimiter line. See {{slink||Class}} below.

=== Caption ===

An optional '''table [[Help: Table caption|caption]]''' is included with a line starting with a vertical bar and plus sign "<code>'''|+'''</code>" and the caption after it:

<syntaxhighlight lang=wikitext highlight=2 class=gridbox>
{|
|+ caption
  table code goes here
|}
</syntaxhighlight>

=== Row start ===

To start a new '''table [[Row (database)|row]]''', type a vertical bar and a [[hyphen]] on its own line: "<code>'''|-'''</code>". The codes for the cells in that row start on the next line.

<syntaxhighlight lang=wikitext highlight=3,5 class=gridbox>
{|
|+ The table's caption
|-
  row code goes here
|-
  next row code goes here
|}
</syntaxhighlight>

For details about rows, see {{slink||Row operations}} below.

=== Cells ===

Type the codes for each ''[[table cell]]'' in the next row, starting with a bar:

<syntaxhighlight lang=wikitext highlight=4,6,7 class=gridbox>
{|
|+ The table's caption
|-
| cell code goes here
|-
| next row cell code goes here
| next cell code goes here
|}
</syntaxhighlight>

Cells can be separated with either a new line and a single bar, or by a double bar "<code>'''||'''</code>" on the same line. Both produce the same output:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight=4>
{|
|+ The table's caption
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell A
|Cell B
|Cell C
|-
|Cell x
|Cell y||Cell z
|}
</syntaxhighlight></div>

<div class="box">
'''Produces'''
{|
|+ The table's caption
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell A
|Cell B
|Cell C
|-
|Cell x
|Cell y||Cell z
|}
</div>

For details about table cells, see {{slink||Cell operations}} below.

=== Optional parameters ===

{{anchor|wikitable class}} Optional '''parameters''' can modify the display and styling of cells, rows, or the entire table. The simplest way to add styling is to set the <code>wikitable</code> [[CSS]] class, which in Wikipedia's [[MediaWiki:Common.css|external style sheet]] is defined to apply a gray color scheme and cell borders to tables using it:

<div class="box">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight=1>
{| class=wikitable
|+ The table's caption
! Column header 1
! Column header 2
! Column header 3
|-
! Row header 1
| Cell 2 || Cell 3
|-
! Row header A
| Cell B
| Cell C
|}
</syntaxhighlight></div>

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

The table parameters and cell parameters are the same as in [[HTML]], see&nbsp;http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE and [[Table (HTML)]]. However, the {{tag|thead|o}}, {{tag|tbody|o}}, {{tag|tfoot|o}}, {{tag|colgroup|o}}, and {{tag|col|o}} elements are currently [[Help:HTML in wikitext#thead, tfoot, tbody|not supported in MediaWiki]], {{as of|lc=y|2021|12}}.

A table can be useful even if none of the cells have content. For example, the background colors of cells can be changed with cell parameters, making the table into a diagram, like [[meta:Template talk:Square 8x8 pentomino example]]. An "image" in the form of a table is much more convenient to edit than an uploaded image.

If all the cells in a row are empty the cells still show up. If the header cell is also empty for that row all the cells show up, but they are narrow. That can be fixed with a simple <nowiki><br></nowiki> in one of the cells. That is what is done here:
* {{oldid2|1206274265|Sorting buttons in a separate row|2024 revision of {{delink|{{slink|Help:Sortable tables#Sorting buttons in a separate row}}}}}}
{{t|sort under}} is simpler for putting the sorting arrows below the header text in order to narrow a table.   

With <code>colspan</code> and <code>rowspan</code> cells can span several columns or rows; {{see below|{{section link||Colspan and rowspan}}, below}}

=== Displaying a pipe character ===

Displaying a [[vertical bar|pipe]] character as part of the text of a table cell requires a workaround. See {{slink||Rendering the pipe}}.

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