You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Tables

## The inevitable HTML table, with special case cells

Colors No
Sizes No
Variables Yes

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

New! 0.4.2

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

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

    <table class="table">
      <thead>
        <tr>
          <th><abbr title="Position">Pos</abbr></th>
          <th>Team</th>
          <th><abbr title="Played">Pld</abbr></th>
          <th><abbr title="Won">W</abbr></th>
          <th><abbr title="Drawn">D</abbr></th>
          <th><abbr title="Lost">L</abbr></th>
          <th><abbr title="Goals for">GF</abbr></th>
          <th><abbr title="Goals against">GA</abbr></th>
          <th><abbr title="Goal difference">GD</abbr></th>
          <th><abbr title="Points">Pts</abbr></th>
          <th>Qualification or relegation</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th><abbr title="Position">Pos</abbr></th>
          <th>Team</th>
          <th><abbr title="Played">Pld</abbr></th>
          <th><abbr title="Won">W</abbr></th>
          <th><abbr title="Drawn">D</abbr></th>
          <th><abbr title="Lost">L</abbr></th>
          <th><abbr title="Goals for">GF</abbr></th>
          <th><abbr title="Goals against">GA</abbr></th>
          <th><abbr title="Goal difference">GD</abbr></th>
          <th><abbr title="Points">Pts</abbr></th>
          <th>Qualification or relegation</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th>1</th>
          <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
          </td>
          <td>38</td>
          <td>23</td>
          <td>12</td>
          <td>3</td>
          <td>68</td>
          <td>36</td>
          <td>+32</td>
          <td>81</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr>
          <th>2</th>
          <td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
          <td>38</td>
          <td>20</td>
          <td>11</td>
          <td>7</td>
          <td>65</td>
          <td>36</td>
          <td>+29</td>
          <td>71</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr>
          <th>3</th>
          <td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
          <td>38</td>
          <td>19</td>
          <td>13</td>
          <td>6</td>
          <td>69</td>
          <td>35</td>
          <td>+34</td>
          <td>70</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
        </tr>
        <tr class="is-selected">
          <th>4</th>
          <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
          <td>38</td>
          <td>19</td>
          <td>9</td>
          <td>10</td>
          <td>71</td>
          <td>41</td>
          <td>+30</td>
          <td>66</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
        </tr>
        <tr>
          <th>5</th>
          <td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
          <td>38</td>
          <td>19</td>
          <td>9</td>
          <td>10</td>
          <td>49</td>
          <td>35</td>
          <td>+14</td>
          <td>66</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
        </tr>
        <tr>
          <th>6</th>
          <td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
          <td>38</td>
          <td>18</td>
          <td>9</td>
          <td>11</td>
          <td>59</td>
          <td>41</td>
          <td>+18</td>
          <td>63</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
        </tr>
        <tr>
          <th>7</th>
          <td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
          <td>38</td>
          <td>16</td>
          <td>14</td>
          <td>8</td>
          <td>65</td>
          <td>51</td>
          <td>+14</td>
          <td>62</td>
          <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
        </tr>
        <tr>
          <th>8</th>
          <td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
          <td>38</td>
          <td>16</td>
          <td>12</td>
          <td>10</td>
          <td>63</td>
          <td>50</td>
          <td>+13</td>
          <td>60</td>
          <td></td>
        </tr>
        <tr>
          <th>9</th>
          <td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
          <td>38</td>
          <td>14</td>
          <td>9</td>
          <td>15</td>
          <td>41</td>
          <td>55</td>
          <td>−14</td>
          <td>51</td>
          <td></td>
        </tr>
        <tr>
          <th>10</th>
          <td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
          <td>38</td>
          <td>12</td>
          <td>14</td>
          <td>12</td>
          <td>59</td>
          <td>53</td>
          <td>+6</td>
          <td>50</td>
          <td></td>
        </tr>
        <tr>
          <th>11</th>
          <td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
          <td>38</td>
          <td>11</td>
          <td>14</td>
          <td>13</td>
          <td>59</td>
          <td>55</td>
          <td>+4</td>
          <td>47</td>
          <td></td>
        </tr>
        <tr>
          <th>12</th>
          <td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
          <td>38</td>
          <td>12</td>
          <td>11</td>
          <td>15</td>
          <td>42</td>
          <td>52</td>
          <td>−10</td>
          <td>47</td>
          <td></td>
        </tr>
        <tr>
          <th>13</th>
          <td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
          <td>38</td>
          <td>12</td>
          <td>9</td>
          <td>17</td>
          <td>40</td>
          <td>50</td>
          <td>−10</td>
          <td>45</td>
          <td></td>
        </tr>
        <tr>
          <th>14</th>
          <td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
          <td>38</td>
          <td>10</td>
          <td>13</td>
          <td>15</td>
          <td>34</td>
          <td>48</td>
          <td>−14</td>
          <td>43</td>
          <td></td>
        </tr>
        <tr>
          <th>15</th>
          <td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
          <td>38</td>
          <td>11</td>
          <td>9</td>
          <td>18</td>
          <td>39</td>
          <td>51</td>
          <td>−12</td>
          <td>42</td>
          <td></td>
        </tr>
        <tr>
          <th>16</th>
          <td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
          <td>38</td>
          <td>11</td>
          <td>9</td>
          <td>18</td>
          <td>45</td>
          <td>67</td>
          <td>−22</td>
          <td>42</td>
          <td></td>
        </tr>
        <tr>
          <th>17</th>
          <td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
          <td>38</td>
          <td>9</td>
          <td>12</td>
          <td>17</td>
          <td>48</td>
          <td>62</td>
          <td>−14</td>
          <td>39</td>
          <td></td>
        </tr>
        <tr>
          <th>18</th>
          <td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
          </td>
          <td>38</td>
          <td>9</td>
          <td>10</td>
          <td>19</td>
          <td>44</td>
          <td>65</td>
          <td>−21</td>
          <td>37</td>
          <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
        </tr>
        <tr>
          <th>19</th>
          <td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
          </td>
          <td>38</td>
          <td>9</td>
          <td>7</td>
          <td>22</td>
          <td>39</td>
          <td>67</td>
          <td>−28</td>
          <td>34</td>
          <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>    </tr>
        <tr>
          <th>20</th>
          <td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
          </td>
          <td>38</td>
          <td>3</td>
          <td>8</td>
          <td>27</td>
          <td>27</td>
          <td>76</td>
          <td>−49</td>
          <td>17</td>
          <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
        </tr>
      </tbody>
    </table>

### 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 have a fullwidth table.

`table is-fullwidth`

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

You can combine all four modifiers.

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

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

### Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$table-color` | `$grey-darker`
`$table-background-color` | `$white`
`$table-cell-border` | `1px solid $grey-lighter`
`$table-cell-border-width` | `0 0 1px`
`$table-cell-padding` | `0.5em 0.75em`
`$table-cell-heading-color` | `$text-strong`
`$table-head-color` | `$grey`
`$table-head-cell-border-width` | `0 0 2px`
`$table-head-cell-color` | `$text-strong`
`$table-foot-cell-border-width` | `2px 0 0`
`$table-foot-cell-color` | `$text-strong`
`$table-row-hover-background-color` | `$white-bis`
`$table-row-active-background-color` | `$primary`
`$table-row-active-color` | `$primary-invert`
`$table-striped-row-even-background-color` | `$white-bis`
`$table-striped-row-even-hover-background-color` | `$white-ter`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!