Help:Basic table markup

From the AARoads Wiki: Read about the road before you go
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

The wikitext markup for a table uses the following:

Summary of table wikitext markup.
Name Markup 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 HTML attributes from cell or caption content
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). To add a literal pipe (|) character to cell content, use the <nowiki> markup (<nowiki>|</nowiki>).

Example table

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

{| 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. A caption is optional, but recommended according to accessibility guidelines.

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

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

Spaces are ignored, thus   |  Data   and |Data are identical.

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 |. Note, the type of single and double marks on a single line should not be mixed, such as | Data !! Header where !! is not translated into a header cell.

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
|-
! 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 tables for 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. Note, defining a header's scope is optional, but recommended according to accessibility guidelines.

The syntax for header cell attributes is: 

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

or using double marks:

! 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, and specify that the cells are a header for a column, which screen readers use the scope attribute: 

! scope="col" style="color: red;" | Column header 1
! scope="col" Column header 2
! scope="col" 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 2

or using double marks:

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

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 from a style sheet and/or external JavaScript functionality to an element. Multiple class values 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").
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. Multiple style values can be added separated by a semicolon and optional space. For example, style="color: red;" stylizes text as red and style="color: red; background-color: yellow;" stylizes text as red and the element's background color as yellow. For table markup, it can be applied to whole tables, table captions, table rows, and individual cells. CSS specificity in relation to content should be considered since applying it to a row could affect all that row's cells and applying it to a table could affect all the table's cells and caption, where styles closer to the content can override parent styles.
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 (scope="col"), row (scope="row"), group of columns (colspan="2" scope="colgroup"), or group of rows (rowspan="2" scope="rowgroup"). It has no visual effect, but is used by screen readers and is recommended according to accessibility guidelines.

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.

Example of same line:

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
| Data 1
| style="color: red;" | Data 2
|}

Produces:

Table caption
Data 1 Data 2

Example of separate line, which produces extra spacing around each cell's content due to the MediaWiki software translating the newline and content into a paragraph of content:

Wikitext: 

{| class="wikitable"
|+ Table caption
|-
|
Data 1
| style="color: red;" |
Data 2
|}

Produces:

Table caption

Data 1

Data 2

How tables are formed

The MediaWiki software translates wikitext into HTML.

Example:

Wikitext: 

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

HTML: 

<table class="wikitable">
  <caption>Table caption</caption>
  <tbody>
    <tr>
      <th scope="col">Column header 1</th>
      <th scope="col">Column header 2</th>
      <th scope="col">Column header 3</th>
    </tr>
    <tr>
      <th scope="row">Row header 1</th>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <th scope="row">Row header 2</th>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
</table>

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

The <table>...</table> tags open and close a table. The <caption>...</caption> tags add a caption. The optional <tbody>...</tbody> tags defines where the table body starts and ends. The <tr>...</tr> tags open and close table rows. The <th>...</th> tags add header cells. The <td>...</td> tags add data cells.

HTML attributes can be added by insertion within the opening tag of any of the HTML table tags. For example, a table with attributes would be <table attribute="value" attribute2="value2">. In this example, the scope attribute defines what the headers describe, column or row, which screen readers use.

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. Also, note that the <thead>, <tbody>, <tfoot>, <colgroup>, and <col> elements are not supported in wikitext.

See also

For further help with tables, see:


Retrieved from "https://wiki.aaroads.com/w/index.php?title=Help:Basic_table_markup&oldid=251112"