--- layout: documentation doc-tab: elements doc-subtab: table --- {% include subnav-elements.html %}

Tables

The inevitable HTML table, with special case cells


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

  • table
    • thead
    • tfoot
    • tbody
      • tr
        • th
        • td

New! 0.4.2

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

{% 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 %}
{{table_example}}
{% highlight html %} {{table_example}} {% endhighlight %}

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 combine all three modifiers.

table is-bordered is-striped is-narrow
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve