9 - Tables
Tables are styled simplistic so that data is as readable as possible. For small screens, wide tables are scrollable horizontally when wider than the viewport.
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <tbody> <tr> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.1 - Header
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.2 - Footer
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
Se hele tabellen |
<table> <tbody> <tr> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> <tfoot> <tr> <td colspan="8" class="center"><a href="#">Se hele tabellen</a></td> </tr> <tfoot> </table>
9.3 - Aligning column content
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <thead> <tr> <th class="text-center">#</th> <th>Lag</th> <th class="text-center">Kamper</th> <th class="text-center">Vunnet</th> <th class="text-center">Uavgjorte</th> <th class="text-center">Tap</th> <th class="text-center">Mål</th> <th class="text-right">Poeng</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Manchester City</td> <td class="text-center">38</td> <td class="text-center">27</td> <td class="text-center">5</td> <td class="text-center">6</td> <td class="text-center">102/37</td> <td class="text-right">86</td> </tr> <tr> <td class="text-center">2</td> <td>Liverpool</td> <td class="text-center">38</td> <td class="text-center">26</td> <td class="text-center">6</td> <td class="text-center">6</td> <td class="text-center">101/50</td> <td class="text-right">84</td> </tr> <tr> <td class="text-center">3</td> <td>Chelsea</td> <td class="text-center">38</td> <td class="text-center">26</td> <td class="text-center">6</td> <td class="text-center">6</td> <td class="text-center">101/50</td> <td class="text-right">84</td> </tr> <tr> <td class="text-center">4</td> <td>Arsenal</td> <td class="text-center">38</td> <td class="text-center">26</td> <td class="text-center">6</td> <td class="text-center">6</td> <td class="text-center">101/50</td> <td class="text-right">84</td> </tr> </tbody> </table>
9.4 - Main column
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <thead> <tr> <th>#</th> <th class="main">Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="main">Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td class="main">Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td class="main">Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>4</td> <td class="main">Arsenal</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.5 - No wrap
no-wrap
can be applied to the table, to rows or to individual cells.
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Brighton and Hove Albion | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table class="no-wrap"> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Brighton and Hove Albion</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.6.1 - Row
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table class="no-wrap"> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr class="secondary"> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="secondary"> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="alert"> <td>4</td> <td>Arsenal</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.6.2 - Row alternate
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table class="no-wrap"> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr class="success-alerternate"> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr class="secondary-alerternate"> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="secondary-alerternate"> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="alert-alerternate"> <td>4</td> <td>Arsenal</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.6.3 - Cell
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table class="no-wrap"> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td class="success">Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>4</td> <td class="alert">Arsenal</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.8 - Row dividers
# | Lag | Kamper | Vunnet | Uavgjorte | Tap | Mål | Poeng |
---|---|---|---|---|---|---|---|
1 | Manchester City | 38 | 27 | 5 | 6 | 102/37 | 86 |
2 | Liverpool | 38 | 26 | 6 | 6 | 101/50 | 84 |
3 | Chelsea | 38 | 26 | 6 | 6 | 101/50 | 84 |
4 | Arsenal | 38 | 26 | 6 | 6 | 101/50 | 84 |
5 | Everton | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <thead> <tr> <th>#</th> <th>Lag</th> <th>Kamper</th> <th>Vunnet</th> <th>Uavgjorte</th> <th>Tap</th> <th>Mål</th> <th>Poeng</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Manchester City</td> <td>38</td> <td>27</td> <td>5</td> <td>6</td> <td>102/37</td> <td>86</td> </tr> <tr> <td>2</td> <td>Liverpool</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>3</td> <td>Chelsea</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="divider"> <td>4</td> <td>Arsenal</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>5</td> <td>Everton</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>
9.9 - Subheading
17 | West Bromwich | 38 | 26 | 6 | 6 | 101/50 | 84 |
Rykker ned | |||||||
18 | Norwich | 38 | 26 | 6 | 6 | 101/50 | 84 |
19 | Fulham | 38 | 26 | 6 | 6 | 101/50 | 84 |
20 | Cardif | 38 | 26 | 6 | 6 | 101/50 | 84 |
<table> <tbody> <tr> <td>17</td> <td>West Bromwich</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr class="header"> <td colspan="8">Rykker ned</td> </tr> <tr> <td>18</td> <td>Norwich</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>19</td> <td>Fulham</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> <tr> <td>20</td> <td>Cardif</td> <td>38</td> <td>26</td> <td>6</td> <td>6</td> <td>101/50</td> <td>84</td> </tr> </tbody> </table>