Close

Tables

Users need to see structured data in a way that makes the data readable, scannable, and comparable.

Default table

A default styled table with table is-full-width classes. If these classes are not applied, the table is unstyled.

Monthly budget
Month Amount earned Amount spent Amount saved
January £2500 £1500 £500
February £2700 £1500 £700 
<table class="table is-fullwidth">
    <caption>Monthly budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount earned</th>
            <th scope="col">Amount spent</th>
            <th scope="col">Amount saved</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>£2500</td>
            <td>£1500</td>
            <td>£500</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>£2700</td>
            <td>£1500</td>
            <td>£700</td>
        </tr>
    </tbody>
</table>

Table with borders

A table with borders added to all cells with table is-fullwidth is-bordered classes.

Monthly budget
Month Amount earned Amount spent Amount saved
January £2500 £1500 £500
February £2700 £1500 £700 
<table class="table is-fullwidth is-bordered">
    <caption>Monthly budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount earned</th>
            <th scope="col">Amount spent</th>
            <th scope="col">Amount saved</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>£2500</td>
            <td>£1500</td>
            <td>£500</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>£2700</td>
            <td>£1500</td>
            <td>£700</td>
        </tr>
    </tbody>
</table>

Table with stripes

A table with stripes added with table is-fullwidth is-striped classes.

Monthly budget
Month Amount earned Amount spent Amount saved
January £2500 £1500 £500
February £2700 £1500 £700 
<table class="table is-fullwidth is-striped">
    <caption>Monthly budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount earned</th>
            <th scope="col">Amount spent</th>
            <th scope="col">Amount saved</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>£2500</td>
            <td>£1500</td>
            <td>£500</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>£2700</td>
            <td>£1500</td>
            <td>£700</td>
        </tr>
    </tbody>
</table>

Table with narrower cells

A table with narrower cells added with table is-narrow classes.

Monthly budget
Month Amount earned Amount spent Amount saved
January £2500 £1500 £500
February £2700 £1500 £700 
<table class="table is-narrow">
    <caption>Monthly budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount earned</th>
            <th scope="col">Amount spent</th>
            <th scope="col">Amount saved</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>£2500</td>
            <td>£1500</td>
            <td>£500</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>£2700</td>
            <td>£1500</td>
            <td>£700</td>
        </tr>
    </tbody>
</table>

Table with hover effect

A table with hover effect on each row with table is-fullwidth is-hoverable classes.

Monthly budget
Month Amount earned Amount spent Amount saved
January £2500 £1500 £500
February £2700 £1500 £700 
<table class="table is-fullwidth is-hoverable">
    <caption>Monthly budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount earned</th>
            <th scope="col">Amount spent</th>
            <th scope="col">Amount saved</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>£2500</td>
            <td>£1500</td>
            <td>£500</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>£2700</td>
            <td>£1500</td>
            <td>£700</td>
        </tr>
    </tbody>
</table>

Table container

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100 102 104 106 108 110 112 114 116 118 120 122 124 126 128 130 132 134 136 138 140 142 144 146 148 150 152 154 156 158 160 162 164 166 168 170 172 174 176 178 180 182 184 186 188 190 192 194 196 198 200
3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 60 63 66 69 72 75 78 81 84 87 90 93 96 99 102 105 108 111 114 117 120 123 126 129 132 135 138 141 144 147 150 153 156 159 162 165 168 171 174 177 180 183 186 189 192 195 198 201 204 207 210 213 216 219 222 225 228 231 234 237 240 243 246 249 252 255 258 261 264 267 270 273 276 279 282 285 288 291 294 297 300
4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 100 104 108 112 116 120 124 128 132 136 140 144 148 152 156 160 164 168 172 176 180 184 188 192 196 200 204 208 212 216 220 224 228 232 236 240 244 248 252 256 260 264 268 272 276 280 284 288 292 296 300 304 308 312 316 320 324 328 332 336 340 344 348 352 356 360 364 368 372 376 380 384 388 392 396 400
5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 175 180 185 190 195 200 205 210 215 220 225 230 235 240 245 250 255 260 265 270 275 280 285 290 295 300 305 310 315 320 325 330 335 340 345 350 355 360 365 370 375 380 385 390 395 400 405 410 415 420 425 430 435 440 445 450 455 460 465 470 475 480 485 490 495 500 
<div class="table-container">
	<table class="table is-bordered is-striped ">
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>10</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
				<td>16</td>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</td>
				<td>29</td>
				<td>30</td>
				<td>31</td>
				<td>32</td>
				<td>33</td>
				<td>34</td>
				<td>35</td>
				<td>36</td>
				<td>37</td>
				<td>38</td>
				<td>39</td>
				<td>40</td>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td>44</td>
				<td>45</td>
				<td>46</td>
				<td>47</td>
				<td>48</td>
				<td>49</td>
				<td>50</td>
				<td>51</td>
				<td>52</td>
				<td>53</td>
				<td>54</td>
				<td>55</td>
				<td>56</td>
				<td>57</td>
				<td>58</td>
				<td>59</td>
				<td>60</td>
				<td>61</td>
				<td>62</td>
				<td>63</td>
				<td>64</td>
				<td>65</td>
				<td>66</td>
				<td>67</td>
				<td>68</td>
				<td>69</td>
				<td>70</td>
				<td>71</td>
				<td>72</td>
				<td>73</td>
				<td>74</td>
				<td>75</td>
				<td>76</td>
				<td>77</td>
				<td>78</td>
				<td>79</td>
				<td>80</td>
				<td>81</td>
				<td>82</td>
				<td>83</td>
				<td>84</td>
				<td>85</td>
				<td>86</td>
				<td>87</td>
				<td>88</td>
				<td>89</td>
				<td>90</td>
				<td>91</td>
				<td>92</td>
				<td>93</td>
				<td>94</td>
				<td>95</td>
				<td>96</td>
				<td>97</td>
				<td>98</td>
				<td>99</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>4</td>
				<td>6</td>
				<td>8</td>
				<td>10</td>
				<td>12</td>
				<td>14</td>
				<td>16</td>
				<td>18</td>
				<td>20</td>
				<td>22</td>
				<td>24</td>
				<td>26</td>
				<td>28</td>
				<td>30</td>
				<td>32</td>
				<td>34</td>
				<td>36</td>
				<td>38</td>
				<td>40</td>
				<td>42</td>
				<td>44</td>
				<td>46</td>
				<td>48</td>
				<td>50</td>
				<td>52</td>
				<td>54</td>
				<td>56</td>
				<td>58</td>
				<td>60</td>
				<td>62</td>
				<td>64</td>
				<td>66</td>
				<td>68</td>
				<td>70</td>
				<td>72</td>
				<td>74</td>
				<td>76</td>
				<td>78</td>
				<td>80</td>
				<td>82</td>
				<td>84</td>
				<td>86</td>
				<td>88</td>
				<td>90</td>
				<td>92</td>
				<td>94</td>
				<td>96</td>
				<td>98</td>
				<td>100</td>
				<td>102</td>
				<td>104</td>
				<td>106</td>
				<td>108</td>
				<td>110</td>
				<td>112</td>
				<td>114</td>
				<td>116</td>
				<td>118</td>
				<td>120</td>
				<td>122</td>
				<td>124</td>
				<td>126</td>
				<td>128</td>
				<td>130</td>
				<td>132</td>
				<td>134</td>
				<td>136</td>
				<td>138</td>
				<td>140</td>
				<td>142</td>
				<td>144</td>
				<td>146</td>
				<td>148</td>
				<td>150</td>
				<td>152</td>
				<td>154</td>
				<td>156</td>
				<td>158</td>
				<td>160</td>
				<td>162</td>
				<td>164</td>
				<td>166</td>
				<td>168</td>
				<td>170</td>
				<td>172</td>
				<td>174</td>
				<td>176</td>
				<td>178</td>
				<td>180</td>
				<td>182</td>
				<td>184</td>
				<td>186</td>
				<td>188</td>
				<td>190</td>
				<td>192</td>
				<td>194</td>
				<td>196</td>
				<td>198</td>
				<td>200</td>
			</tr>
			<tr>
				<td>3</td>
				<td>6</td>
				<td>9</td>
				<td>12</td>
				<td>15</td>
				<td>18</td>
				<td>21</td>
				<td>24</td>
				<td>27</td>
				<td>30</td>
				<td>33</td>
				<td>36</td>
				<td>39</td>
				<td>42</td>
				<td>45</td>
				<td>48</td>
				<td>51</td>
				<td>54</td>
				<td>57</td>
				<td>60</td>
				<td>63</td>
				<td>66</td>
				<td>69</td>
				<td>72</td>
				<td>75</td>
				<td>78</td>
				<td>81</td>
				<td>84</td>
				<td>87</td>
				<td>90</td>
				<td>93</td>
				<td>96</td>
				<td>99</td>
				<td>102</td>
				<td>105</td>
				<td>108</td>
				<td>111</td>
				<td>114</td>
				<td>117</td>
				<td>120</td>
				<td>123</td>
				<td>126</td>
				<td>129</td>
				<td>132</td>
				<td>135</td>
				<td>138</td>
				<td>141</td>
				<td>144</td>
				<td>147</td>
				<td>150</td>
				<td>153</td>
				<td>156</td>
				<td>159</td>
				<td>162</td>
				<td>165</td>
				<td>168</td>
				<td>171</td>
				<td>174</td>
				<td>177</td>
				<td>180</td>
				<td>183</td>
				<td>186</td>
				<td>189</td>
				<td>192</td>
				<td>195</td>
				<td>198</td>
				<td>201</td>
				<td>204</td>
				<td>207</td>
				<td>210</td>
				<td>213</td>
				<td>216</td>
				<td>219</td>
				<td>222</td>
				<td>225</td>
				<td>228</td>
				<td>231</td>
				<td>234</td>
				<td>237</td>
				<td>240</td>
				<td>243</td>
				<td>246</td>
				<td>249</td>
				<td>252</td>
				<td>255</td>
				<td>258</td>
				<td>261</td>
				<td>264</td>
				<td>267</td>
				<td>270</td>
				<td>273</td>
				<td>276</td>
				<td>279</td>
				<td>282</td>
				<td>285</td>
				<td>288</td>
				<td>291</td>
				<td>294</td>
				<td>297</td>
				<td>300</td>
			</tr>
			<tr>
				<td>4</td>
				<td>8</td>
				<td>12</td>
				<td>16</td>
				<td>20</td>
				<td>24</td>
				<td>28</td>
				<td>32</td>
				<td>36</td>
				<td>40</td>
				<td>44</td>
				<td>48</td>
				<td>52</td>
				<td>56</td>
				<td>60</td>
				<td>64</td>
				<td>68</td>
				<td>72</td>
				<td>76</td>
				<td>80</td>
				<td>84</td>
				<td>88</td>
				<td>92</td>
				<td>96</td>
				<td>100</td>
				<td>104</td>
				<td>108</td>
				<td>112</td>
				<td>116</td>
				<td>120</td>
				<td>124</td>
				<td>128</td>
				<td>132</td>
				<td>136</td>
				<td>140</td>
				<td>144</td>
				<td>148</td>
				<td>152</td>
				<td>156</td>
				<td>160</td>
				<td>164</td>
				<td>168</td>
				<td>172</td>
				<td>176</td>
				<td>180</td>
				<td>184</td>
				<td>188</td>
				<td>192</td>
				<td>196</td>
				<td>200</td>
				<td>204</td>
				<td>208</td>
				<td>212</td>
				<td>216</td>
				<td>220</td>
				<td>224</td>
				<td>228</td>
				<td>232</td>
				<td>236</td>
				<td>240</td>
				<td>244</td>
				<td>248</td>
				<td>252</td>
				<td>256</td>
				<td>260</td>
				<td>264</td>
				<td>268</td>
				<td>272</td>
				<td>276</td>
				<td>280</td>
				<td>284</td>
				<td>288</td>
				<td>292</td>
				<td>296</td>
				<td>300</td>
				<td>304</td>
				<td>308</td>
				<td>312</td>
				<td>316</td>
				<td>320</td>
				<td>324</td>
				<td>328</td>
				<td>332</td>
				<td>336</td>
				<td>340</td>
				<td>344</td>
				<td>348</td>
				<td>352</td>
				<td>356</td>
				<td>360</td>
				<td>364</td>
				<td>368</td>
				<td>372</td>
				<td>376</td>
				<td>380</td>
				<td>384</td>
				<td>388</td>
				<td>392</td>
				<td>396</td>
				<td>400</td>
			</tr>
			<tr>
				<td>5</td>
				<td>10</td>
				<td>15</td>
				<td>20</td>
				<td>25</td>
				<td>30</td>
				<td>35</td>
				<td>40</td>
				<td>45</td>
				<td>50</td>
				<td>55</td>
				<td>60</td>
				<td>65</td>
				<td>70</td>
				<td>75</td>
				<td>80</td>
				<td>85</td>
				<td>90</td>
				<td>95</td>
				<td>100</td>
				<td>105</td>
				<td>110</td>
				<td>115</td>
				<td>120</td>
				<td>125</td>
				<td>130</td>
				<td>135</td>
				<td>140</td>
				<td>145</td>
				<td>150</td>
				<td>155</td>
				<td>160</td>
				<td>165</td>
				<td>170</td>
				<td>175</td>
				<td>180</td>
				<td>185</td>
				<td>190</td>
				<td>195</td>
				<td>200</td>
				<td>205</td>
				<td>210</td>
				<td>215</td>
				<td>220</td>
				<td>225</td>
				<td>230</td>
				<td>235</td>
				<td>240</td>
				<td>245</td>
				<td>250</td>
				<td>255</td>
				<td>260</td>
				<td>265</td>
				<td>270</td>
				<td>275</td>
				<td>280</td>
				<td>285</td>
				<td>290</td>
				<td>295</td>
				<td>300</td>
				<td>305</td>
				<td>310</td>
				<td>315</td>
				<td>320</td>
				<td>325</td>
				<td>330</td>
				<td>335</td>
				<td>340</td>
				<td>345</td>
				<td>350</td>
				<td>355</td>
				<td>360</td>
				<td>365</td>
				<td>370</td>
				<td>375</td>
				<td>380</td>
				<td>385</td>
				<td>390</td>
				<td>395</td>
				<td>400</td>
				<td>405</td>
				<td>410</td>
				<td>415</td>
				<td>420</td>
				<td>425</td>
				<td>430</td>
				<td>435</td>
				<td>440</td>
				<td>445</td>
				<td>450</td>
				<td>455</td>
				<td>460</td>
				<td>465</td>
				<td>470</td>
				<td>475</td>
				<td>480</td>
				<td>485</td>
				<td>490</td>
				<td>495</td>
				<td>500</td>
			</tr>
		</tbody>
	</table>
</div>

Accessibility

A <caption> should be used to describe the table content. While it is not necessary for each table to have one, it is generally very helpful. If you want to hide this from users, please use the class .is-sr-only.

Identify row and column headers using <th> for table header cells and <td> for table data cells.

Use the scope attribute to associate data cells with the appropriate headers. This identifies whether a <th> is a column or row header.

For more information, read the WebAIM's techniques for creating accessible tables.

Usage

When using tables, remember the following:

  • table attributes such as cellspacing, cellpadding or border should not be used
  • use <thead> and <tbody> to group table headings and data
  • do not add a width to size cells, let them resize to the device size, if you really need to add widths, use percentages
  • use a caption to indicate the content of that table
  • when comparing rows of numbers, align numbers to the right in table cells
  • no need for paragraphs unless you need to, use nowrap sparingly
  • you can combine any or all 5 modifiers: table is-bordered is-striped is-narrow is-hoverable and is-fullwidth
Element / Class name Description
table The main container
caption The table caption element specifies the caption (or title) of a table and if used is always the first child of a <table>
thead The optional top part of the table
tbody The content part of the table
tfoot The optional bottom part of the table
tr A table row
th A table cell heading
td A table cell