--- title: Table layout: documentation doc-tab: elements doc-subtab: table --- {% capture table_example %}

Pos | Team | Pld | W | D | L | GF | GA | GD | Pts | Qualification or relegation
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Pos | Team | Pld | W | D | L | GF | GA | GD | Pts | Qualification or relegation
1 | Leicester City (C) | 38 | 23 | 12 | 3 | 68 | 36 | +32 | 81 | Qualification for the Champions League group stage
2 | Arsenal | 38 | 20 | 11 | 7 | 65 | 36 | +29 | 71 | Qualification for the Champions League group stage
3 | Tottenham Hotspur | 38 | 19 | 13 | 6 | 69 | 35 | +34 | 70 | Qualification for the Champions League group stage
4 | Manchester City | 38 | 19 | 9 | 10 | 71 | 41 | +30 | 66 | Qualification for the Champions League play-off round
5 | Manchester United | 38 | 19 | 9 | 10 | 49 | 35 | +14 | 66 | Qualification for the Europa League group stage
6 | Southampton | 38 | 18 | 9 | 11 | 59 | 41 | +18 | 63 | Qualification for the Europa League group stage
7 | West Ham United | 38 | 16 | 14 | 8 | 65 | 51 | +14 | 62 | Qualification for the Europa League third qualifying round
8 | Liverpool | 38 | 16 | 12 | 10 | 63 | 50 | +13 | 60 |
9 | Stoke City | 38 | 14 | 9 | 15 | 41 | 55 | −14 | 51 |
10 | Chelsea | 38 | 12 | 14 | 12 | 59 | 53 | +6 | 50 |
11 | Everton | 38 | 11 | 14 | 13 | 59 | 55 | +4 | 47 |
12 | Swansea City | 38 | 12 | 11 | 15 | 42 | 52 | −10 | 47 |
13 | Watford | 38 | 12 | 9 | 17 | 40 | 50 | −10 | 45 |
14 | West Bromwich Albion | 38 | 10 | 13 | 15 | 34 | 48 | −14 | 43 |
15 | Crystal Palace | 38 | 11 | 9 | 18 | 39 | 51 | −12 | 42 |
16 | AFC Bournemouth | 38 | 11 | 9 | 18 | 45 | 67 | −22 | 42 |
17 | Sunderland | 38 | 9 | 12 | 17 | 48 | 62 | −14 | 39 |
18 | Newcastle United (R) | 38 | 9 | 10 | 19 | 44 | 65 | −21 | 37 | Relegation to the Football League Championship
19 | Norwich City (R) | 38 | 9 | 7 | 22 | 39 | 67 | −28 | 34 | Relegation to the Football League Championship
20 | Aston Villa (R) | 38 | 3 | 8 | 27 | 27 | 76 | −49 | 17 | Relegation to the Football League Championship

{% endcapture %} {% include subnav/subnav-elements.html %}

# Tables

## The inevitable HTML table, with special case cells

{% include meta.html colors=false sizes=false variables=true %}

You simply need to attach a single `.table` CSS class on a `<table>` with the following structure:

- `table` the main container
  - `thead` the optional top part of the table
  - `tfoot` the optional bottom part of the table
  - `tbody` the main content of the table
    - `tr` each table row
      - `th` a table cell heading
      - `td` a table cell

You can set a table row as selected by appending the `is-selected` modifier on a `<tr>`

{% include snippet.html content=table_example horizontal=true more=true %} {% include anchor.html name="Modifiers" %}

Add borders to all the cells.

`table is-bordered`

One | Two
--- | ---
Three | Four

Add stripes to the table.

`table is-striped`

One | Two
--- | ---
Three | Four
Five | Six
Seven | Eight
Nine | Ten
Eleven | Twelve

Make the cells narrower.

`table is-narrow`

One | Two
--- | ---
Three | Four
Five | Six
Seven | Eight
Nine | Ten
Eleven | Twelve

You can add a hover effect on each row

`table is-hoverable`

One | Two
--- | ---
Three | Four
Five | Six
Seven | Eight
Nine | Ten
Eleven | Twelve

You can have a fullwidth table.

`table is-fullwidth`

One | Two
--- | ---
Three | Four
Five | Six
Seven | Eight
Nine | Ten
Eleven | Twelve

You can combine all five modifiers.

`table is-bordered is-striped is-narrow is-hoverable is-fullwidth`

One | Two
--- | ---
Three | Four
Five | Six
Seven | Eight
Nine | Ten
Eleven | Twelve

{% include variables.html type='element' %}