FANDOM


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