Styleguide 0.30.7

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.1.1 - Sorting

Requires javascript

For small datasets sorting can be done in the browser. See documentation for db.libs.tableSort.

# Lag Poeng Neste kamp
1 Manchester City 86 2015-03-17
2 Liverpool 84 2015-03-13
3 Chelsea 82 2015-03-20 
<table>
  <thead>
    <tr class="has-tip" data-tooltip aria-haspopup="true" title="Click to on the column to sort">
      <td>#</td>
      <td><a class="desc" data-sortable="string">Lag</a></td>
      <td><a class="desc active" data-sortable>Poeng</a></td>
      <td><a class="desc" data-sortable="date">Neste kamp</a></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Manchester City</td>
      <td>86</td>
      <td>2015-03-17</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Liverpool</td>
      <td>84</td>
      <td>2015-03-13</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Chelsea</td>
      <td>82</td>
      <td>2015-03-20</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>

9.10 - Select row

Requires javascript

Highlight rows by clicking. Useful when viewing wide tables.

# 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 data-focus>
  <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.11 - Table editor

Experimental

Simple table-editor. See documentation for db.libs.tableEditor.

# Lag Kamper Vunnet Uavgjorte Tap Mål Poeng
1 Liverpool 38 26 6 6 101/50 84 
<ul class="button-group">
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleHeader'); return false;">Toggle header</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('insertRow'); return false;">Insert row</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('deleteRow'); return false;">Delete row</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('insertColumn'); return false;">Insert column</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('deleteColumn'); return false;">Delete column</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleColumnClass', null, 'text-left', 'text-center text-right'); return false;">Align left</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleColumnClass', null, 'text-center', 'text-left text-right'); return false;">Align center</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleColumnClass', null, 'text-right', 'text-left text-center'); return false;">Align right</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleRowClass', null, 'success', 'alert'); return false;">Row success</a></li>
  <li><a class="button tiny" onclick="$('#js-table-test').tableEditor('toggleRowClass', null, 'alert', 'success'); return false;">Row alert</a></li>
</ul>
<table id="js-table-test" data-editor>
  <thead>
    <tr>
      <td contenteditable>#</td>
      <td contenteditable>Lag</td>
      <td contenteditable>Kamper</td>
      <td contenteditable>Vunnet</td>
      <td contenteditable>Uavgjorte</td>
      <td contenteditable>Tap</td>
      <td contenteditable>Mål</td>
      <td contenteditable>Poeng</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable>1</td>
      <td contenteditable>Liverpool</td>
      <td contenteditable>38</td>
      <td contenteditable>26</td>
      <td contenteditable>6</td>
      <td contenteditable>6</td>
      <td contenteditable>101/50</td>
      <td contenteditable>84</td>
    </tr>
  </tbody>
</table>