Tables
Users need to see structured data in a manner 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.
<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.
<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 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 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.
<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>
<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.
Usage
- 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 five modifiers:
table is-borderedis-stripedis-narrowis-hoverableandis-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 |