Richardpruen: 1 revision imported

2022-01-02T17:20:25Z

1 revision imported

← Older revision		Revision as of 18:20, 2 January 2022
(No difference)

Wikipedia>John of Reading: Reverted 1 edit by 180.241.168.113 (talk): The example markup should match the example table

2021-12-14T15:13:42Z

Reverted 1 edit by 180.241.168.113 (talk): The example markup should match the example table

New page

{{Wikipedia how-to|H:BTM}}
This help page describes basic wiki markup for tables. For a more extensive guide please see [[Help:Table]].

==Introduction==
The markup for a basic table is the following. All this markup must start on a new line, except for <code>!!</code>, <code>||</code>, and <code>|</code> (when used as an attribute separator).

{| class="wikitable"
|
<nowiki />{|
| '''Table start'''
| It opens a table
|-
|
<nowiki />|+
| '''Table caption'''
| It adds a caption.
|-
|
<nowiki />|-
| '''Table row'''
| It separates rows (but it is optional for the first row).
|-
|
<nowiki />!
| '''Header cell'''
| It adds a header cell, which can be optionally be placed on the next line.
|-
|
<nowiki />!!
| '''Header cells on the same line'''
| Header cells may be added on the same line separated by double marks.
|-
|
<nowiki />|
| '''Data cell'''
| It adds a data cell, which can be optionally be placed on the next line. Also see "attribute separator" below.
|-
|
<nowiki />||
| '''Data cells on the same line'''
| Data cells may be added on the same line separated by double marks.
|-
|
<nowiki />|
| '''Attribute separator'''
| It is used to separate HTML attributes from cell contents (both data or header), or caption contents.
|-
|
<nowiki />|}
| '''Table end'''
| It closes a table.
|}

===Example table===

<pre style="width:50%">
{| class="wikitable"
|+ Caption: example table
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}
</pre>

This would produce:

{| class="wikitable"
|+ Caption: example table
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}

<code>{|</code> opens a table, and <code>|}</code> closes it. <code>class="wikitable"</code> is used with a lot of tables on Wikipedia, and adds some standard formatting, and follows on the same line as <code>{|</code>.

<code>|+ Caption: example table</code> adds the caption "Caption: example table" to the top of the table. The caption is optional.

Columns headers are created by <code>! column name</code>. Cells are created by <code>| cell text</code>. The divider between rows is <code>|-</code>. You can add an extra column by just sticking <code>! new column name</code> at the end of the last column name. To fill the cells in that column, you need to add another cell to each row: fill it by typing <code>| cell text</code>. If you want to add an extra row, just add <code>|-</code> to the table, and fill it with however many cells are appropriate.

The important thing to note is that there must be an equal number of cells on each line (unless overridden by rowspan or colspan, see below).

Blank spaces at the beginning of a line are ignored. Thus <code>|row1cell1</code> and <code>| row1cell1</code> are identical. To add a pipe (<code>|</code>) character into cell contents, you need to use the {{xtag|nowiki}} markup.

===Using double marks with tables===

All above markup must start on a new line. This includes the cell markup (<code>|</code> and <code>!</code>). Double cell markup (<code>||</code> and <code>!!</code>) can be used to avoid this and to add consecutive cells to a single line.

For example, this would produce the same table as above:

<pre style="width:60%">
{| class="wikitable"
|+ Caption: example table
|-
! header1 !! header2 !! header3
|-
| row1cell1 || row1cell2 || row1cell3
|-
| row2cell1 || row2cell2 || row2cell3
|}
</pre>

===Column and row header cells===

Header cells may be column or row header cells. For example, the following table has both:

<pre style="width:60%">
{| class="wikitable"
|+ Caption: example table
|-
!
! columnheader1
! columnheader2
|-
! rowheader1
| row1cell1
| row1cell2
|-
! rowheader2
| row2cell1
| row2cell2
|}
</pre>

Which produces:

{| class="wikitable"
|+ Caption: example table
|-
! !! columnheader1 !! columnheader2
|-
! rowheader1
| row1cell1
| row1cell2
|-
! rowheader2
| row2cell1
| row2cell2
|}

==HTML attributes==

[[HTML attribute]]s are often needed to be added to tables for various reasons. Attributes take the basic form:

<code>attribute="value"</code>

Multiple attributes can be applied by repeating this, like <code>attribute1="value1" attribute2="value2" </code>

Important points to realize:
* All table markup, except table end (<code>|}</code>), optionally accepts one or more attributes on the same line.
* Cell markup (<code>|</code>, <code>||</code>, <code>!</code>, <code>!!</code>) and caption markup (<code>|+</code>) hold content. So separate any attributes from content with a single pipe (<code>|</code>), even when cell content is on a new line, which is permissible.
* Table and row markup (<code>{|</code> and <code>|-</code>) do not directly hold content. Therefore, do ''not'' add a pipe (<code>|</code>) after any attributes.

===Adding HTML attributes to cells and captions===
This is how to cell contents, including header cell contents, and also captions.

Cells hold content, e.g. <code>row1cell1</code>. The markup for cells and captions are: <code>|</code>, <code>||</code>, <code>!</code>, <code>!!</code> and <code>|+</code>. Attributes need to be kept separate from cell content or captions with a single pipe (<code>|</code>). Cell content or captions may follow on the same line, or on a following line.

So attributes can be inserted like this:

<pre style="width:30%">
| attribute="value" | row1cell1
| attribute="value" | row1cell2
| attribute="value" | row1cell3
</pre>

Where <code>attribute="value"</code> indicates one or more attribute, for example <code>style="color: red"</code>.

If the cells are on the same line, attributes can be added like this: <code>| attribute="value" | row1cell1 || attribute="value" | row1cell2 || attribute="value" | row1cell3 </code>

Adding to the ''header'' can be done like this:

<pre style="width:30%">
! attribute="value" | header1
! attribute="value" | header2
! attribute="value" | header3
</pre>

Or like this: <code>! attribute="value" | header1 !! attribute="value" | header2 !! attribute="value" | header3 </code>

Adding to the ''caption'' is done like this: <code> |+ attribute="value" | Caption Title </code>

For example, lets say we wanted to make some cells' text red colored. The attribute to do so is <code>style="color: red"</code>. It could be added to some cells in a table like this:
<pre style="width:70%">
{| class="wikitable"
|+ Caption: some cells red text.
|-
! header1
! header2
! header3
|-
| style="color: red" | row1cell1
| row1cell2
| style="color: red" | row1cell3
|-
| row2cell1
| style="color: red" | row2cell2
| row2cell3
|}
</pre>

Then it would produce this:

{| class="wikitable"
|+ Caption: some cells red text.
|-
! header1
! header2
! header3
|-
| style="color: red" | row1cell1
| row1cell2
| style="color: red" | row1cell3
|-
| row2cell1
| style="color: red" | row2cell2
| row2cell3
|}

As you can see, a red color has been added to some of the cells' text. Note that, optionally, cell contents could be added to new lines if desired.

===Adding HTML attributes to whole tables and rows===
Tables and rows use the following markup: <code>{|</code>, <code>|-</code> and <code>|}</code>. Attributes can be added to <code>{|</code> and <code>|-</code>. They do not directly hold content. Because of this, they should ''not'' have an added pipe (<code>|</code>) after any attributes.

Attributes can be added to the table markup like this: <code>{| attribute="value"</code>, where <code>attribute="value"</code> indicates one or more attributes.

Attributes can be added to the row markup like this: <code>|- attribute="value"</code>.

An example is the

<code><nowiki>{| class="wikitable"</nowiki></code>

used before, that applies a class to an entire table. Likewise you could add a second attribute: for example,

<code>{| class="wikitable" style="color:red"</code>

would apply two attributes, class and style. That style attribute would give text a red color.

An example of an attribute applied to a table row:

<code>|- style="height: 100px"</code>

would apply a style attribute, in this case to make the height of a table row 100px.

===Commonly included===
Commonly included HTML attributes in tables include:

;class: For example <code>class="wikitable"</code>. The [[Wikipedia:Catalogue of CSS classes|class attribute]] is normally applied to a complete table. Other classes include <code>class="wikitable sortable"</code> (sortable tables) and <code>class="wikitable mw-collapsible"</code> (collapsing tables).
;style: For example <code>style="color:red"</code>. It is used for ''CSS'' ([[Cascading Style Sheets]]) styling, and can be applied to whole tables, table captions, table rows and individual cells.
;rowspan: For example <code>rowspan="2"</code>. Used for formatting table rows and cells so they extend beyond their normal extent of one row, in this example two rows.
;colspan: For example <code>colspan="2"</code>. Used for formatting table rows and cells so they extend beyond their normal extent of one column, in this example two columns.
;scope: For example <code>scope="col"</code> or <code>scope="row"</code>. Not essential, but specifies that the cell is either a header for a column or row. Use <code>scope="colgroup" colspan="2"</code> or <code>scope="rowgroup" rowspan="2"</code> to specify that the cell is a header for a group of columns or rows.

Other HTML attributes are used with tables, but many are deprecated by [[HTML5]]. See [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table "table"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption "caption"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr "table row"], [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th "header cell"] and [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td "data cell"] for some deprecated attributes.

==Cell contents on new lines==

''Cell content'' may follow on the same line after its ''cell markup'' (which may include attributes); or on lines below the cell markup.

Cell content that uses its own markup may need to start on a new line; this can happen with things like lists, headings, or nested tables.

For example, take the following single row table:

<pre style="width:70%">
{| class="wikitable"
|+ One row table
| style="color:blue" | cell1
| cell2
| style="color:blue" | cell3
|}
</pre>

Its output is:

{| class="wikitable"
|+ One row table
| style="color:blue" | cell1
| cell2
| style="color:blue" | cell3
|}

Cell contents can be added to new lines if so desired:

<pre style="width:70%">
{| class="wikitable"
|+ One row table
| style="color:blue" |
cell1
|
cell2
| style="color:blue" |
cell3
|}
</pre>

Its output is similar, but the vertical height is increased:

{| class="wikitable"
|+ One row table
| style="color:blue" |
cell1
|
cell2
| style="color:blue" |
cell3
|}

==How tables are formed==
If you use the following wiki markup for a table:

<pre style="width:60%">
{| class="wikitable"
|+ Caption: example table
|-
! header1
! header2
! header3
|-
| row1cell1
| row1cell2
| row1cell3
|-
| row2cell1
| row2cell2
| row2cell3
|}
</pre>

The [[MediaWiki]] software translates it into the following [[HTML]]:

<syntaxhighlight lang="html" style="width:60%">
<table class="wikitable">
<caption>Caption: example table</caption>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td>row1cell1</td>
<td>row1cell2</td>
<td>row1cell3</td>
</tr>
<tr>
<td>row2cell1</td>
<td>row2cell2</td>
<td>row2cell3</td>
</tr>
</tbody>
</table>
</syntaxhighlight>

The {{Tag|table}} tags opens and closes the table. The {{Tag|caption}} tags adds a caption. The {{Tag|tr}} tags opens and closes table rows. The {{Tag|th}} tags adds a header cell. The {{Tag|td}} tags adds a data cell. The optional {{Tag|tbody}} tags defines where the table body starts and ends.

HTML attributes can be added by insertion within the opening tag. For example <code><nowiki><table></nowiki></code> can have an attribute added like this: <code><nowiki><table attribute="value"></nowiki></code>, or <code><nowiki><table attribute1="value1" attribute2="value2"></nowiki></code> for two attributes. All other tags follow the same rule.

You can add a table using HTML coding rather than wiki markup, as described at [[HTML element#Tables]]. However it is discouraged due to readability reasons; see the [[Wikipedia:Manual of Style/Tables|manual of style on tables]]. Also, note that the {{Tag|thead|o}}, {{Tag|tbody|o}}, {{Tag|tfoot|o}}, {{Tag|colgroup|o}}, and {{Tag|col|o}} tags are [[Help:HTML in wikitext#Tables|not supported in wikitext]].

==See also==

For further help with tables, see:

* [[Help:Introduction to tables with Wiki Markup]], a brief introduction to tables
* [[Help:Table]], an in-depth and comprehensive guide to tables
* [[Help:Sorting]], sortable tables typically use <code>class="wikitable sortable"</code>
* [[Help:Collapsing]], collapsing tables typically uses <code>class="wikitable mw-collapsible"</code>
* {{Wikibooks-inline|Editing Wikitext/Tables}}
* {{Wikibooks-inline|Editing Wikitext/Tables Ready to Use}}
* [[Wikipedia:Manual of Style/Tables]], the Manual of Style for best practices for tables
** [[Wikipedia:Table dos and don'ts]], a quick guide to the Manual of Style for tables
* [[Wikipedia:Advanced table formatting]], some advanced techniques

[[Category:Wikipedia how-to]]
[[Category:Wikipedia tables]]

{{Wikipedia technical help}}

Help:Basic table markup - Revision history

Richardpruen: 1 revision imported

Wikipedia>John of Reading: Reverted 1 edit by 180.241.168.113 (talk): The example markup should match the example table