Help:Basic table markup

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

This help page describes basic wiki markup for tables. For a more extensive guide please see Help:Table.

Introduction[edit]

The markup for a basic table is the following:

Markup Name Comments
{| Table start It opens a table (and is required)
|+ Table caption It adds a caption
|- Table row It adds a new row (but it is optional for the first row)
! Header cell It adds a header cell, whose content can be optionally be placed on a new line
!! Header cell (on the same line) It adds a header cell on the same line
| Data cell It adds a data cell, whose content can be optionally be placed on a new line (see also the attribute separator)
|| Data cell (on the same line) It adds a data cell on the same line
| Attribute separator It separates a HTML attribute from cell or caption contents
|} Table end It closes a table (and is required)

All this markup must start on a new line, except for !!, ||, and | (when used as an attribute separator).

Example table[edit]

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

This would produce:

Caption: example table
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 row2cell2 row2cell3

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

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

Header cells are created by ! column name. Content cells are created by | cell text. You can add an extra column by just sticking ! new column name 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 | cell text to each row.

|- separates the rows. If you want to add an extra row, just add |- 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 |row1cell1 and | row1cell1 are identical. To add a pipe (|) character into cell contents, you need to use the <nowiki> markup.

Using double marks with tables[edit]

All above markup must start on a new line. This includes the cell markup (| and !). Double cell markup (|| and !!) 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: 

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

Column and row header cells[edit]

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

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

Which produces:

Caption: example table
columnheader1 columnheader2
rowheader1 row1cell1 row1cell2
rowheader2 row2cell1 row2cell2

HTML attributes[edit]

HTML attributes are often needed to be added to tables for various reasons. Attributes take the basic form:

attribute="value"

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

Important points to realize:

  • All table markup, except table end (|}), optionally accepts one or more attributes on the same line.
  • Table and row markup ({| and |-) do not directly hold content. Therefore, do not add a pipe (|) after any attributes
  • Cell markup (|, ||, !, !!) and caption markup (|+) directly hold content. So separate any attributes from content with a single pipe (|), with attributes coming before content. This applies even when cell content is on a new line, which is permissible.

Adding HTML attributes to whole tables and rows[edit]

Tables and rows use the following markup: {|, |- and |}. Attributes can be added to {| and |-. They do not directly hold content, so they should not have an added pipe (|) after any attributes.

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

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

An example is the

{| class="wikitable"

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

{| class="wikitable" style="color:red"

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:

|- style="height: 100px"

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

Adding HTML attributes to cells and captions[edit]

The markup for cells and captions are: |, ||, !, !! and |+.

Cells and captions directly hold content. So attributes need to be kept separate from cell content or captions with a single pipe (|), with the attributes before the content. Cell content or captions may follow on the same line, or on a following line, to the markup.

Adding to data cells can be done like this: 

| attribute="value" | row1cell1
| attribute="value" | row1cell2
| attribute="value" | row1cell3

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

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

Adding to header cells can be done like this: 

! attribute="value" | header1
! attribute="value" | header2
! attribute="value" | header3

If the header cells are on the same line, attributes can be added like this: : ! attribute="value" | header1 !! attribute="value" | header2 !! attribute="value" | header3

Adding to captions can be done like this:: |+ attribute="value" | Caption Title

For example, lets say we wanted to make some cells' text red colored. The attribute to do so is style="color: red". It could be added to some cells in a table like 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
|}

Then it would produce this:

Caption: some cells red text.
header1 header2 header3
row1cell1 row1cell2 row1cell3
row2cell1 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.

Commonly included[edit]

Commonly included HTML attributes in tables include:

class
For example class="wikitable". The class attribute is normally applied to a complete table. Other classes include class="wikitable sortable" (sortable tables) and class="wikitable mw-collapsible" (collapsing tables).
style
For example style="color:red". 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 rowspan="2". Used for formatting cells so they extend beyond their normal extent of one row, in this example two rows.
colspan
For example colspan="2". Used for formatting cells so they extend beyond their normal extent of one column, in this example two columns.
scope
For example scope="col" or scope="row". Not essential, but specifies that a header cell is either a header for a column or row. Use scope="colgroup" colspan="2" or scope="rowgroup" rowspan="2" to specify that a header cell is a header for a group of columns or rows, in this example two columns or rows.

Other HTML attributes are used with tables, but many are deprecated by HTML5. See "table", "caption", "table row", "header cell" and "data cell" for some deprecated and rarely used attributes.

Cell contents on new lines[edit]

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: 

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

Its output is:

One row table
cell1 cell2 cell3

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

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

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

One row table

cell1

cell2

cell3

How tables are formed[edit]

If you use the following wiki markup for a table: 

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

The MediaWiki software translates it into the following HTML: 

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

The <table>...</table> tags opens and closes the table. The <caption>...</caption> tags adds a caption. The <tr>...</tr> tags opens and closes table rows. The <th>...</th> tags adds a header cell. The <td>...</td> tags adds a data cell. The optional <tbody>...</tbody> tags defines where the table body starts and ends.

HTML attributes can be added by insertion within the opening tag. For example <table> can have an attribute added like this: <table attribute="value">, or <table attribute1="value1" attribute2="value2"> 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 manual of style on tables. Also, note that the <thead>, <tbody>, <tfoot>, <colgroup>, and <col> tags are not supported in wikitext.

See also[edit]

For further help with tables, see:

Retrieved from "https://en.wikipedia.org/w/index.php?title=Help:Basic_table_markup&oldid=1074841590"