Jump to content

Help:Basic table markup

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Jroberson108 (talk | contribs) at 02:08, 13 December 2023 (→HTML attributes: Consolidate.). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

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

Introduction

The wikitext markup for a table uses the following:

Markup Name Comments
{| Table start It opens a table (and is required)
|+ Table caption It adds a caption (and is optional, but recommended according to accessibility guidelines)
|- Table row It adds a new row (and is optional for the first row)
! Header cell It adds a header cell, whose content can 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 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)

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

Example table

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
! Column header 1
! Column header 2
! Column header 3
|-
| Data 1
| Data 2
| Data 3
|-
| Data 4
| Data 5
| Data 6
|}

Produces:

Table caption
Column header 1 Column header 2 Column header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

{| opens a table, and |} closes it. class="wikitable" is frequently used to apply standard formatting to a table, and is added on the same line as {|.

|+ Table caption adds the caption "Table caption" to the top of the table. The caption is optional, but recommended according to accessibility guidelines.

Header cells are created by ! Header cell. Data cells are created by | Data cell. A new column can be added by adding another column header. To fill in the data for that column, add another data cell to the remaining rows.

|- adds a new row, which should be followed by the same number of cells found in other rows. rowspan="2" and colspan="2" can be used to combine cells.

Blank spaces at the beginning of a line are ignored, thus |Data and | Data are identical. To add a literal pipe (|) character to cell content, use the <nowiki> markup.

Using double marks with tables

Double cell markup can be used to add consecutive cells to a single line with !! and || instead of using new lines between each ! and |.

For example, this produces the same table found in the previous section:

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
! Column header 1 !! Column header 2 !! Column header 3
|-
| Data 1 || Data 2 || Data 3
|-
| Data 4 || Data 5 || Data 6
|}

Column and row header cells

Header cells may be for columns or rows. For example, the following table has both.

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
! Column header 1
! Column header 2
! Column header 3
|-
! Row header 1
| Data 1
| Data 2
|-
! Row header 2
| Data 3
| Data 4
|}

Produces:

Table caption
Column header 1 Column header 2 Column header 3
Row header 1 Data 1 Data 2
Row header 2 Data 3 Data 4

HTML attributes

HTML attributes are often needed for various reasons. An attribute takes the basic form attribute="value", where combining multiple repeats this with attribute="value" attribute2="value2".

Important points to realize:

  • All table markup, except table end (|}), can have attributes added.
  • Table and row markup ({|, |-, and |}) don't directly hold content. Therefore, do not add a pipe (|) after any attributes.
  • Cell markup (!, !!, |, ||) and caption markup (|+) directly hold content. Therefore, attributes should be followed by a pipe (|) before the content. This applies even when cell content is on a new line, which is permissible.

Adding HTML attributes to whole tables

Tables use the {| and |} markup, which attributes cannot be added to |}. The markup doesn't directly hold content, so attributes should not be followed by a pipe (|).

The syntax for table attributes is:

{| attribute="value" attribute2="value2"

For example, the "wikitable" class is frequently applied to the entire table so those tables have similar styling. The second attribute styles the text color as red, which the text it styles is found in the caption and cells:

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

Adding HTML attributes to captions

Captions use the |+ markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content.

The syntax for caption attributes is:

|+ attribute="value" attribute2="value2" | Table caption

For example, this styles the text color as red for the caption:

|+ style="color: red;" | Table caption

Adding HTML attributes to rows

Rows use the |- markup. The markup doesn't directly hold content, so attributes should not be followed by a pipe (|).

The syntax for row attributes is:

|- attribute="value" attribute2="value2"

For example, this styles the row height to 100 pixels and the text color as red for all the row's cells:

|- style="height: 100px; color: red;"

Adding HTML attributes to header cells

Header cells use the ! and !! markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content.

The syntax for header cell attributes is: 

! attribute="value" attribute2="value2" | Header 1
! attribute="value" attribute2="value2" | Header 2

or

! attribute="value" attribute2="value2" | Header 1 !! attribute="value" attribute2="value2" | Header 2

For example, these style the text color as red for the first and third column header cells: 

! style="color: red;" | Column header 1
! Column header 2
! style="color: red;" | Column header 3

Adding HTML attributes to data cells

Data cells use the | and || markup. The markup does directly hold content, so attributes should be followed by a pipe (|) before the content.

The syntax for data cell attributes is: 

| attribute="value" attribute2="value2" | Data 1
| attribute="value" attribute2="value2" | Data 1

or

| attribute="value" attribute2="value2" | Data 1 || attribute="value" attribute2="value2" | Data 1

For example, these style the text color as red for the first and third data cells: 

| style="color: red;" | Data 1
| Data 2
| style="color: red;" | Data 3

Common attributes

Common HTML attributes included in tables:

class
Often used to apply CSS styling and/or JavaScript functionality to an element. Multiple can be added separated by a space. For example, adding class="wikitable" to the table start markup styles the table. A second class can be added for sorting class="wikitable sortable" or to toggle visibility class="wikitable mw-collapsible". See also the list of class attributes.
style
This is called an inline style, and can be used to add CSS styles to an element, such as color, font, size, and more. For table markup, it can be applied to whole tables, table captions, table rows, and individual cells. Scope should be considered where applying it to a row could affect all that row's cells and applying it to the table could affect all the table's cells and caption. For example style="color: red;" stylizes text as red.
rowspan
Extends a cell beyond its normal one row. For example, rowspan="2" specifies the cell should span two rows.
colspan
Extends a cell beyond its normal one column. For example, colspan="2" specifies the cell should span two columns.
scope
Specifies whether a header cell is a header for a column, row, or group of columns or rows. It has no visual effect, but is used by screen readers and is recommended according to accessibility guidelines. For example for a column (scope="col"), row (scope="row"), group of columns that span two columns (colspan="2" scope="colgroup"), or group of rows that span two rows (rowspan="2" scope="rowgroup").

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

Sometimes cell content may need to be on a separate line than the cell markup, for instance, when the cell contains a list or nested table.

Same line example:

Wikitext: 

| style="color: red;" | Data 1
| Data 2
| style="color: red;" | Data 3

Produces:

One row table
Data 1 Data 2 Data 3

Separate line example, which has extra spacing due to the MediaWiki software translating the newline and content into a paragraph of content:

Wikitext: 

| style="color: red;" |
Data 1
|
Data 2
| style="color: red;" |
Data 3

Produces:

One row table

Data 1

Data 2

Data 3

How tables are formed

The MediaWiki software translates wikitext into HTML.

Example:

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
! Column header 1
! Column header 2
! Column header 3
|-
| Data 1
| Data 2
| Data 3
|-
| Data 4
| Data 5
| Data 6
|}

HTML: 

<table class="wikitable">
  <caption>Table caption</caption>
  <tbody>
    <tr>
      <th>Column header 1</th>
      <th>Column header 2</th>
      <th>Column header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Produces:

Table caption
Column header 1 Column header 2 Column header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

The <table>...</table> tags opens and closes a table. The <caption>...</caption> tags add a caption. The <tr>...</tr> tags opens and closes table rows. The <th>...</th> tags add header cells. The <td>...</td> tags add data cells. 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, a table with attributes would be <table attribute="value" attribute2="value2">. All other tags follow the same rule.

You can add a table using HTML rather than wiki markup, as described at HTML element#Tables. However, HTML tables are discouraged because wikitables are easier to customize and maintain, as described at manual of style on tables. Also, note that the <thead>, <tbody>, <tfoot>, <colgroup>, and <col> HTML tags are not supported in wikitext.

See also

For further help with tables, see:

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