Tables are sets of elements, so they can have attributes added to them. The style, class, and id attributes as well as three unique attributes, valign, colspan, and rowspan, can be added to tables, table rows, and individual cells.
Where to define attributes[]
To apply an attribute to an entire table, the attribute should be defined directly after the opening table tag [{|] like in the example below. Notice how the background color is applied to the entire table.
{| class="wikitable" style="background-color: yellow;"
|-
| one || two || three || four
|-
| five || six || seven || eight
|}
Result:
| one | two | three | four |
| five | six | seven | eight |
To apply an attribute to a specific row of a table, the attribute should be defined directly after the corresponding row break [|-] like in the example below. Notice how the background color is applied to the entire row and that row only.
{| class="wikitable"
|- style="background-color: yellow;"
| one || two || three || four
|-
| five || six || seven || eight
|}
Result:
| one | two | three | four |
| five | six | seven | eight |
To apply an attribute to an individual cell, the attribute should be defined directly after the corresponding cell's pipe [|] and then a second pipe should be added after the attribute is defined to separate it from the cell's content. Example:
{| class="wikitable"
|-
| one
| style="background-color: yellow;" | two
|-
| three
| four
|}
Result:
| one | two |
| three | four |
What the attributes do[]
style[]
The style attribute is used to apply inline CSS properties to an element as with other elements.
class[]
The class attribute is used to apply properties from a CSS file to an element. Click here to see the classes for tables.
valign[]
The valign attribute defines how the content of the cell(s) should be vertically aligned. Example:
{| class="wikitable" style="width: 30%;"
|- valign="top"
!This text will be vertically aligned to the top of the cell:
|text
|- valign="middle"
!This text will be vertically aligned to the middle of the cell:
|text
|- valign="bottom"
!This text will be vertically aligned to the bottom of the cell:
|text
|}
Result:
| This text will be vertically aligned to the top of the cell: | text |
|---|---|
| This text will be vertically aligned to the middle of the cell: | text |
| This text will be vertically aligned to the bottom of the cell: | text |
colspan[]
The colspan attribute defines how many columns the cell should occupy. The default is "1". Example:
{| class="wikitable"
|-
| colspan="2" | This cell occupies two columns.
|-
| one
| two
|}
Result:
| This cell occupies two columns. | |
| one | two |
rowspan[]
Similar to the colspan attribute, the rowspan attribute defines how many rows the cell should occupy. The default is "1". Example:
{| class="wikitable"
|-
| rowspan="2" | This cell occupies two columns.
| one
|-
| two
|}
Result:
| This cell occupies two rows. | one |
| two |
| Back |
| Return to Editing Guide List |
| Next |