--- title: Table layout: docs theme: library doc-tab: elements doc-subtab: table breadcrumb: - home - documentation - elements - elements-table meta: colors: false sizes: false variables: true --- {% 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 %} {% capture table_colors %} {% for color in site.data.colors.justColors %} {% endfor %}
{{ color | capitalize }} th cell Two {{ color | capitalize }} td cell Four Five
{{ color | capitalize }} row Two Three Four Five
{% endcapture %}

You can create a Bulma table simply by attaching a single table CSS class on a <table> HTML element with the following structure:

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

{% include docs/elements/snippet.html content=table_example horizontal=true more=true %} {% include docs/elements/anchor.html name="Colors" %}

You can change the color of a single <td> or <th> cell, or a whole <tr> row, by adding one of the color modifiers:

{% include docs/elements/snippet.html content=table_colors horizontal=true more=true %} {% include docs/elements/anchor.html name="Modifiers" %} {% capture scrollable_table %}
{% endcapture %} {% capture simple_scrollable_table_example %}
{% for i in (1..5) %} {% for j in (1..100) %} {% endfor %} {% endfor %}
{{ j | times: i }}
{% endcapture %}

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 docs/elements/anchor.html name="Table container" %}

You can create a scrollable table by wrapping a table in a table-container element:

{% highlight html -%} {{- scrollable_table -}} {%- endhighlight %} {{ simple_scrollable_table_example }}