Styleguide 0.1.0

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 - Highlight rows and cells

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>