Base Layout, Tables, Swiss Confederation Web Guidelines

Standard table

FLEX

3.2.0

use coal instead of #999 for captions text color

3.0.0

remove attribute role="columnheader" on tag <tr>
remove attribute role="rowheader" on tag <th>

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.
added the <col> and <colgroup> tags before the tables on some cases

2.1.8

added columnheader, rowheader and aria-describedby for better accessibility

The standard table consists of the table title <caption>, the table head <thead>, the table body <tbody>, and the table foot <tfoot>.

Add .table-bordered for borders on all sides of the table and cells. The standard table can be extended to allow zebra striping and/or column or line formatting.

Game animals shot in Switzerland
	2000	2010	2011	2012
Boars	4'160	7'647	4'726	10'650
Chamois	16'625	13'427	13'413	13'350
Fox	42'221	31'044	27'094	35'616
	2000	2010	2011	2012

<table class="table table-bordered text-right">
	<caption>Game animals shot in Switzerland</caption>
	<thead>
		<tr>
			<th></th>
			<th>2000</th>
			<th>2010</th>
			<th>2011</th>
			<th>2012</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left">Boars</th>
			<td>4'160</td>
			<td>7'647</td>
			<td>4'726</td>
			<td>10'650</td>
		</tr>
		<tr>
			<th class="text-left">Chamois</th>
			<td>16'625</td>
			<td>13'427</td>
			<td>13'413</td>
			<td>13'350</td>
		</tr>
		<tr>
			<th class="text-left">Fox</th>
			<td>42'221</td>
			<td>31'044</td>
			<td>27'094</td>
			<td>35'616</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>2000</td>
			<td>2010</td>
			<td>2011</td>
			<td>2012</td>
		</tr>
	</tfoot>
</table>

Cycle table (single)

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>

Inlandkonzept, in 1000
	2007	2008	2009	2010	2011
Total
Erwerbspersonen am 1. Januar	4'515	4'618	4'735	4'775	4'834
+ Arbeitsmarkteintritte	308	297	316	289	300
- Arbeitsmarktaustritte	250	289	302	273	271
+ Einwanderung von Erwerbspersonen	151	171	135	149	172
- Auswanderung von Erwerbspersonen	106	108	109	106	93
= Erwerbspersonen am 31. Dezember	4'618	4'690	4'775	4'834	4'943
Männer
Erwerbspersonen am 1. Januar	2'488	2'532	2'585	2'602	2'648
+ Arbeitsmarkteintritte	126	118	141	133	132
- Arbeitsmarktaustritte	108	131	138	111	121
+ Einwanderung von Erwerbspersonen	95	108	85	92	110
- Auswanderung von Erwerbspersonen	69	70	70	69	60
= Erwerbspersonen am 31. Dezember	2532	2'556	2'602	2'648	2'708
Frauen
Erwerbspersonen am 1. Januar	2'027	2'086	2'150	2'173	2'186
+ Arbeitsmarkteintritte	182	179	175	156	168
- Arbeitsmarktaustritte	142	157	163	162	149
+ Einwanderung von Erwerbspersonen	56	64	50	56	62
- Auswanderung von Erwerbspersonen	37	38	39	37	33
= Erwerbspersonen am 31. Dezember	2'086	2'133	2'173	2'186	2'234
	2007	2008	2009	2010	2011

<table class="table table-bordered text-right">
	<caption>Inlandkonzept, in 1000</caption>
	<thead>
		<tr>
			<th></th>
			<th>2007</th>
			<th>2008</th>
			<th>2009</th>
			<th>2010</th>
			<th>2011</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row" colspan="6">Total</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>4'515</td>
			<td>4'618</td>
			<td>4'735</td>
			<td>4'775</td>
			<td>4'834</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>308</td>
			<td>297</td>
			<td>316</td>
			<td>289</td>
			<td>300</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>250</td>
			<td>289</td>
			<td>302</td>
			<td>273</td>
			<td>271</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>151</td>
			<td>171</td>
			<td>135</td>
			<td>149</td>
			<td>172</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>106</td>
			<td>108</td>
			<td>109</td>
			<td>106</td>
			<td>93</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>4'618</td>
			<td>4'690</td>
			<td>4'775</td>
			<td>4'834</td>
			<td>4'943</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Männer</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'488</td>
			<td>2'532</td>
			<td>2'585</td>
			<td>2'602</td>
			<td>2'648</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>126</td>
			<td>118</td>
			<td>141</td>
			<td>133</td>
			<td>132</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>108</td>
			<td>131</td>
			<td>138</td>
			<td>111</td>
			<td>121</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>95</td>
			<td>108</td>
			<td>85</td>
			<td>92</td>
			<td>110</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>69</td>
			<td>70</td>
			<td>70</td>
			<td>69</td>
			<td>60</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2532</td>
			<td>2'556</td>
			<td>2'602</td>
			<td>2'648</td>
			<td>2'708</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Frauen</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'027</td>
			<td>2'086</td>
			<td>2'150</td>
			<td>2'173</td>
			<td>2'186</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>182</td>
			<td>179</td>
			<td>175</td>
			<td>156</td>
			<td>168</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>142</td>
			<td>157</td>
			<td>163</td>
			<td>162</td>
			<td>149</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>56</td>
			<td>64</td>
			<td>50</td>
			<td>56</td>
			<td>62</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>37</td>
			<td>38</td>
			<td>39</td>
			<td>37</td>
			<td>33</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2'086</td>
			<td>2'133</td>
			<td>2'173</td>
			<td>2'186</td>
			<td>2'234</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td class="highlight right">2007</td>
			<td class="highlight right">2008</td>
			<td class="highlight right">2009</td>
			<td class="highlight right">2010</td>
			<td class="highlight right">2011</td>
		</tr>
	</tfoot>
</table>

Cycle table (pairs)

FLEX

3.0.0

remove attribute summary on tag <table>

Tabelle mit Titelzeile (Standardtabelle)
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende
	2011		2012		2013
Wichtigsten GAV¹⁾	100	1'400'600	97	1'607'100	93	1'574'800
GAV ohne Lohnverhandlung	28	362'400	29	605'900	68	1'032'700
GAV mit Lohnverhandlung	72	1'038'200	68	1'001'200	25	542'100
Lohnvereinbarungsart
Effektivlohn-vereinbarung	9	129'500	6	79'500	6	76'500
Effektiv- und Mindest-lohnvereinbarung²⁾	45	365'800	47	3'688'400	40	403'700
Mindestlohn-vereinbarung²⁾	18	543'000	15	233'300	21	537'400
Keine Lohn-vereinbarung	0	0	0	0	1	15'100
	2011		2012		2013
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende

<table class="table table-bordered text-right">
	<caption>Tabelle mit Titelzeile (Standardtabelle)</caption>
	<thead>
		<tr class="pairwise">
			<td rowspan="2"></td>
			<th class="text-center" colspan="2" scope="colgroup">2011</th>
			<th class="text-center" colspan="2" scope="colgroup">2012</th>
			<th class="text-center" colspan="2" scope="colgroup">2013</th>
		</tr>
		<tr>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row">Wichtigsten GAV<sup title="lorem ipsum dolor sit amet">1)</sup></th>
			<td>100</td>
			<td>1'400'600</td>
			<td>97</td>
			<td>1'607'100</td>
			<td>93</td>
			<td>1'574'800</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV ohne Lohnverhandlung</th>
			<td>28</td>
			<td>362'400</td>
			<td>29</td>
			<td>605'900</td>
			<td>68</td>
			<td>1'032'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV mit Lohnverhandlung</th>
			<td>72</td>
			<td>1'038'200</td>
			<td>68</td>
			<td>1'001'200</td>
			<td>25</td>
			<td>542'100</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="7">Lohnvereinbarungsart</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektivlohn-vereinbarung</th>
			<td>9</td>
			<td>129'500</td>
			<td>6</td>
			<td>79'500</td>
			<td>6</td>
			<td>76'500</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektiv- und Mindest-lohnvereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>45</td>
			<td>365'800</td>
			<td>47</td>
			<td>3'688'400</td>
			<td>40</td>
			<td>403'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Mindestlohn-vereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>18</td>
			<td>543'000</td>
			<td>15</td>
			<td>233'300</td>
			<td>21</td>
			<td>537'400</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Keine Lohn-vereinbarung</th>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>1</td>
			<td>15'100</td>
		</tr>
	</tbody>
	<tfoot>
		<tr class="pairwise">
			<td rowspan="2"></td>
			<td class="text-center" colspan="2">2011</td>
			<td class="text-center" colspan="2">2012</td>
			<td class="text-center" colspan="2">2013</td>
		</tr>
		<tr>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
		</tr>
	</tfoot>
</table>

Table with caption

FLEX

3.0.0

remove attribute summary on tag <table>

Table with caption (standard table)
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded
Jimi Hendrix	Are You Experienced	1967	10.00	MCA	11	53:10	Chas Chandler	February 1967
Pink Floyd	Wish You Were Here	1975	12.00	Harvest, Emi	8	42:59	Pink Floyd	May - October 1975
Beatles	Abbey Road	1969	14.00	Apple	12	58:45	Hans Muster	January - July 1969
Bob Dylan	Blonde on Blonde	1966	15.00	Columbia	14	75:21	Johnny Cash	July 1966
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded

<table class="table table-bordered">
	<caption>Table with caption (standard table)</caption>
	<thead>
		<tr>
			<th>Artist</th>
			<th class="active">Album</th>
			<th class="text-right">Year</th>
			<th class="text-right">Price in USD</th>
			<th>Label</th>
			<th class="text-right">Tracks</th>
			<th class="text-right">Length</th>
			<th>Producer</th>
			<th>Recorded</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Jimi Hendrix</th>
			<td class="active">Are You Experienced</td>
			<td class="text-right">1967</td>
			<td class="text-right">10.00</td>
			<td>MCA</td>
			<td class="text-right">11</td>
			<td class="text-right">53:10</td>
			<td>Chas Chandler</td>
			<td>February 1967</td>
		</tr>
		<tr>
			<th scope="row">Pink Floyd</th>
			<td class="active">Wish You Were Here</td>
			<td class="text-right">1975</td>
			<td class="text-right">12.00</td>
			<td>Harvest, Emi</td>
			<td class="text-right">8</td>
			<td class="text-right">42:59</td>
			<td>Pink Floyd</td>
			<td>May - October 1975</td>
		</tr>
		<tr>
			<th scope="row">Beatles</th>
			<td class="active">Abbey Road</td>
			<td class="text-right">1969</td>
			<td class="text-right">14.00</td>
			<td>Apple</td>
			<td class="text-right">12</td>
			<td class="text-right">58:45</td>
			<td>Hans Muster</td>
			<td>January - July 1969</td>
		</tr>
		<tr>
			<th scope="row">Bob Dylan</th>
			<td class="active">Blonde on Blonde</td>
			<td class="text-right">1966</td>
			<td class="text-right">15.00</td>
			<td>Columbia</td>
			<td class="text-right">14</td>
			<td class="text-right">75:21</td>
			<td>Johnny Cash</td>
			<td>July 1966</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Artist</td>
			<td class="active">Album</td>
			<td class="text-right">Year</td>
			<td class="text-right">Price in USD</td>
			<td>Label</td>
			<td class="text-right">Tracks</td>
			<td class="text-right"> Length</td>
			<td>Producer</td>
			<td>Recorded</td>
		</tr>
	</tfoot>
</table>

Table with Zebra Striping

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>
remove attribute role="rowheader" on tag <th>

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.

The zebra stripes are shown when the table-striped class is added to the <table>.

Game animals shot in Switzerland
	2000	2010	2011	2012
Boars	4'160	7'647	4'726	10'650
Chamois	16'625	13'427	13'413	13'350
Fox	42'221	31'044	27'094	35'616
	2000	2010	2011	2012

<table class="table table-bordered table-striped text-right">
	<caption>Game animals shot in Switzerland</caption>
	<thead>
		<tr>
			<th></th>
			<th>2000</th>
			<th>2010</th>
			<th>2011</th>
			<th>2012</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left">Boars</th>
			<td>4'160</td>
			<td>7'647</td>
			<td>4'726</td>
			<td>10'650</td>
		</tr>
		<tr>
			<th class="text-left">Chamois</th>
			<td>16'625</td>
			<td>13'427</td>
			<td>13'413</td>
			<td>13'350</td>
		</tr>
		<tr>
			<th class="text-left">Fox</th>
			<td>42'221</td>
			<td>31'044</td>
			<td>27'094</td>
			<td>35'616</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>2000</td>
			<td>2010</td>
			<td>2011</td>
			<td>2012</td>
		</tr>
	</tfoot>
</table>

Zebra cycle table (single)

FLEX

3.0.0

remove attribute summary on tag <table>
remove attribute role="columnheader" on tag <tr>

Inlandkonzept, in 1000
	2007	2008	2009	2010	2011
Total
Erwerbspersonen am 1. Januar	4'515	4'618	4'735	4'775	4'834
+ Arbeitsmarkteintritte	308	297	316	289	300
- Arbeitsmarktaustritte	250	289	302	273	271
+ Einwanderung von Erwerbspersonen	151	171	135	149	172
- Auswanderung von Erwerbspersonen	106	108	109	106	93
= Erwerbspersonen am 31. Dezember	4'618	4'690	4'775	4'834	4'943
Männer
Erwerbspersonen am 1. Januar	2'488	2'532	2'585	2'602	2'648
+ Arbeitsmarkteintritte	126	118	141	133	132
- Arbeitsmarktaustritte	108	131	138	111	121
+ Einwanderung von Erwerbspersonen	95	108	85	92	110
- Auswanderung von Erwerbspersonen	69	70	70	69	60
= Erwerbspersonen am 31. Dezember	2532	2'556	2'602	2'648	2'708
Frauen
Erwerbspersonen am 1. Januar	2'027	2'086	2'150	2'173	2'186
+ Arbeitsmarkteintritte	182	179	175	156	168
- Arbeitsmarktaustritte	142	157	163	162	149
+ Einwanderung von Erwerbspersonen	56	64	50	56	62
- Auswanderung von Erwerbspersonen	37	38	39	37	33
= Erwerbspersonen am 31. Dezember	2'086	2'133	2'173	2'186	2'234
	2007	2008	2009	2010	2011

<table class="table table-bordered table-striped text-right">
	<caption>Inlandkonzept, in 1000</caption>
	<thead>
		<tr>
			<th></th>
			<th>2007</th>
			<th>2008</th>
			<th>2009</th>
			<th>2010</th>
			<th>2011</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row" colspan="6">Total</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>4'515</td>
			<td>4'618</td>
			<td>4'735</td>
			<td>4'775</td>
			<td>4'834</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>308</td>
			<td>297</td>
			<td>316</td>
			<td>289</td>
			<td>300</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>250</td>
			<td>289</td>
			<td>302</td>
			<td>273</td>
			<td>271</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>151</td>
			<td>171</td>
			<td>135</td>
			<td>149</td>
			<td>172</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>106</td>
			<td>108</td>
			<td>109</td>
			<td>106</td>
			<td>93</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>4'618</td>
			<td>4'690</td>
			<td>4'775</td>
			<td>4'834</td>
			<td>4'943</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Männer</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'488</td>
			<td>2'532</td>
			<td>2'585</td>
			<td>2'602</td>
			<td>2'648</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>126</td>
			<td>118</td>
			<td>141</td>
			<td>133</td>
			<td>132</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>108</td>
			<td>131</td>
			<td>138</td>
			<td>111</td>
			<td>121</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>95</td>
			<td>108</td>
			<td>85</td>
			<td>92</td>
			<td>110</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>69</td>
			<td>70</td>
			<td>70</td>
			<td>69</td>
			<td>60</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2532</td>
			<td>2'556</td>
			<td>2'602</td>
			<td>2'648</td>
			<td>2'708</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Frauen</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'027</td>
			<td>2'086</td>
			<td>2'150</td>
			<td>2'173</td>
			<td>2'186</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>182</td>
			<td>179</td>
			<td>175</td>
			<td>156</td>
			<td>168</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>142</td>
			<td>157</td>
			<td>163</td>
			<td>162</td>
			<td>149</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>56</td>
			<td>64</td>
			<td>50</td>
			<td>56</td>
			<td>62</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>37</td>
			<td>38</td>
			<td>39</td>
			<td>37</td>
			<td>33</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2'086</td>
			<td>2'133</td>
			<td>2'173</td>
			<td>2'186</td>
			<td>2'234</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td class="highlight right">2007</td>
			<td class="highlight right">2008</td>
			<td class="highlight right">2009</td>
			<td class="highlight right">2010</td>
			<td class="highlight right">2011</td>
		</tr>
	</tfoot>
</table>

Zebra cycle table (pairs)

FLEX

3.0.0

remove attribute summary on tag <table>

Tabelle mit Titelzeile (Standardtabelle)
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende
	2011		2012		2013
Wichtigsten GAV¹⁾	100	1'400'600	97	1'607'100	93	1'574'800
GAV ohne Lohnverhandlung	28	362'400	29	605'900	68	1'032'700
GAV mit Lohnverhandlung	72	1'038'200	68	1'001'200	25	542'100
Lohnvereinbarungsart
Effektivlohn-vereinbarung	9	129'500	6	79'500	6	76'500
Effektiv- und Mindest-lohnvereinbarung²⁾	45	365'800	47	3'688'400	40	403'700
Mindestlohn-vereinbarung²⁾	18	543'000	15	233'300	21	537'400
Keine Lohn-vereinbarung	0	0	0	0	1	15'100
	2011		2012		2013
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende

<table class="table table-bordered table-striped text-right">
	<caption>Tabelle mit Titelzeile (Standardtabelle)</caption>
	<thead>
		<tr class="pairwise">
			<td rowspan="2"></td>
			<th colspan="2" scope="colgroup" class="text-center">2011</th>
			<th colspan="2" scope="colgroup" class="text-center">2012</th>
			<th colspan="2" scope="colgroup" class="text-center">2013</th>
		</tr>
		<tr>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row">Wichtigsten GAV<sup title="lorem ipsum dolor sit amet">1)</sup></th>
			<td>100</td>
			<td>1'400'600</td>
			<td>97</td>
			<td>1'607'100</td>
			<td>93</td>
			<td>1'574'800</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV ohne Lohnverhandlung</th>
			<td>28</td>
			<td>362'400</td>
			<td>29</td>
			<td>605'900</td>
			<td>68</td>
			<td>1'032'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV mit Lohnverhandlung</th>
			<td>72</td>
			<td>1'038'200</td>
			<td>68</td>
			<td>1'001'200</td>
			<td>25</td>
			<td>542'100</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="7">Lohnvereinbarungsart</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektivlohn-vereinbarung</th>
			<td>9</td>
			<td>129'500</td>
			<td>6</td>
			<td>79'500</td>
			<td>6</td>
			<td>76'500</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektiv- und Mindest-lohnvereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>45</td>
			<td>365'800</td>
			<td>47</td>
			<td>3'688'400</td>
			<td>40</td>
			<td>403'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Mindestlohn-vereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>18</td>
			<td>543'000</td>
			<td>15</td>
			<td>233'300</td>
			<td>21</td>
			<td>537'400</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Keine Lohn-vereinbarung</th>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>1</td>
			<td>15'100</td>
		</tr>
	</tbody>
	<tfoot>
		<tr class="pairwise">
			<td rowspan="2"></td>
			<td class="text-center" colspan="2">2011</td>
			<td class="text-center" colspan="2">2012</td>
			<td class="text-center" colspan="2">2013</td>
		</tr>
		<tr>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
		</tr>
	</tfoot>
</table>

Zebra table with caption

FLEX

3.0.0

remove attribute summary on tag <table>
remove attribute role="columnheader" on tag <tr>

Table with caption (standard table)
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded
Jimi Hendrix	Are You Experienced	1967	10.00	MCA	11	53:10	Chas Chandler	February 1967
Pink Floyd	Wish You Were Here	1975	12.00	Harvest, Emi	8	42:59	Pink Floyd	May - October 1975
Beatles	Abbey Road	1969	14.00	Apple	12	58:45	Hans Muster	January - July 1969
Bob Dylan	Blonde on Blonde	1966	15.00	Columbia	14	75:21	Johnny Cash	July 1966
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded

<table class="table table-bordered table-striped">
	<caption>Table with caption (standard table)</caption>
	<thead>
		<tr>
			<th>Artist</th>
			<th>Album</th>
			<th class="text-right">Year</th>
			<th class="text-right">Price in USD</th>
			<th>Label</th>
			<th class="text-right">Tracks</th>
			<th class="text-right">Length</th>
			<th>Producer</th>
			<th>Recorded</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Jimi Hendrix</th>
			<td>Are You Experienced</td>
			<td class="text-right">1967</td>
			<td class="text-right">10.00</td>
			<td>MCA</td>
			<td class="text-right">11</td>
			<td class="text-right">53:10</td>
			<td>Chas Chandler</td>
			<td>February 1967</td>
		</tr>
		<tr>
			<th scope="row">Pink Floyd</th>
			<td>Wish You Were Here</td>
			<td class="text-right">1975</td>
			<td class="text-right">12.00</td>
			<td>Harvest, Emi</td>
			<td class="text-right">8</td>
			<td class="text-right">42:59</td>
			<td>Pink Floyd</td>
			<td>May - October 1975</td>
		</tr>
		<tr>
			<th scope="row">Beatles</th>
			<td>Abbey Road</td>
			<td class="text-right">1969</td>
			<td class="text-right">14.00</td>
			<td>Apple</td>
			<td class="text-right">12</td>
			<td class="text-right">58:45</td>
			<td>Hans Muster</td>
			<td>January - July 1969</td>
		</tr>
		<tr>
			<th scope="row">Bob Dylan</th>
			<td>Blonde on Blonde</td>
			<td class="text-right">1966</td>
			<td class="text-right">15.00</td>
			<td>Columbia</td>
			<td class="text-right">14</td>
			<td class="text-right">75:21</td>
			<td>Johnny Cash</td>
			<td>July 1966</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Artist</td>
			<td>Album</td>
			<td class="text-right">Year</td>
			<td class="text-right">Price in USD</td>
			<td>Label</td>
			<td class="text-right">Tracks</td>
			<td class="text-right"> Length</td>
			<td>Producer</td>
			<td>Recorded</td>
		</tr>
	</tfoot>
</table>

Table with Highlighting

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>
remove attribute role="rowheader" on tag <th>

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.

This table is based on the standard table but with active class on cells or on row.

Game animals shot in Switzerland
	2000	2010	2011	2012
Boars	4'160	7'647	4'726	10'650
Chamois	16'625	13'427	13'413	13'350
Fox	42'221	31'044	27'094	35'616
	2000	2010	2011	2012

<table class="table table-bordered text-right">
	<caption>Game animals shot in Switzerland</caption>
	<thead>
		<tr>
			<th></th>
			<th>2000</th>
			<th>2010</th>
			<th class="active">2011</th>
			<th>2012</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left">Boars</th>
			<td>4'160</td>
			<td>7'647</td>
			<td class="active">4'726</td>
			<td>10'650</td>
		</tr>
		<tr>
			<th class="text-left">Chamois</th>
			<td>16'625</td>
			<td>13'427</td>
			<td class="active">13'413</td>
			<td>13'350</td>
		</tr>
		<tr class="active">
			<th class="text-left">Fox</th>
			<td>42'221</td>
			<td>31'044</td>
			<td class="active">27'094</td>
			<td>35'616</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>2000</td>
			<td>2010</td>
			<td class="active">2011</td>
			<td>2012</td>
		</tr>
	</tfoot>
</table>

Highlighted cycle table (single)

FLEX

3.0.0

remove attribute summary on tag <table>
remove attribute role="columnheader" on tag <tr>

Inlandkonzept, in 1000
	2007	2008	2009	2010	2011
Total
Erwerbspersonen am 1. Januar	4'515	4'618	4'735	4'775	4'834
+ Arbeitsmarkteintritte	308	297	316	289	300
- Arbeitsmarktaustritte	250	289	302	273	271
+ Einwanderung von Erwerbspersonen	151	171	135	149	172
- Auswanderung von Erwerbspersonen	106	108	109	106	93
= Erwerbspersonen am 31. Dezember	4'618	4'690	4'775	4'834	4'943
Männer
Erwerbspersonen am 1. Januar	2'488	2'532	2'585	2'602	2'648
+ Arbeitsmarkteintritte	126	118	141	133	132
- Arbeitsmarktaustritte	108	131	138	111	121
+ Einwanderung von Erwerbspersonen	95	108	85	92	110
- Auswanderung von Erwerbspersonen	69	70	70	69	60
= Erwerbspersonen am 31. Dezember	2532	2'556	2'602	2'648	2'708
Frauen
Erwerbspersonen am 1. Januar	2'027	2'086	2'150	2'173	2'186
+ Arbeitsmarkteintritte	182	179	175	156	168
- Arbeitsmarktaustritte	142	157	163	162	149
+ Einwanderung von Erwerbspersonen	56	64	50	56	62
- Auswanderung von Erwerbspersonen	37	38	39	37	33
= Erwerbspersonen am 31. Dezember	2'086	2'133	2'173	2'186	2'234
	2007	2008	2009	2010	2011

<table class="table table-bordered text-right">
	<caption>Inlandkonzept, in 1000</caption>
	<thead>
		<tr>
			<th></th>
			<th>2007</th>
			<th>2008</th>
			<th>2009</th>
			<th>2010</th>
			<th>2011</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row" colspan="6">Total</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>4'515</td>
			<td>4'618</td>
			<td>4'735</td>
			<td>4'775</td>
			<td>4'834</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>308</td>
			<td>297</td>
			<td>316</td>
			<td>289</td>
			<td>300</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>250</td>
			<td>289</td>
			<td>302</td>
			<td>273</td>
			<td>271</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>151</td>
			<td>171</td>
			<td>135</td>
			<td>149</td>
			<td>172</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>106</td>
			<td>108</td>
			<td>109</td>
			<td>106</td>
			<td>93</td>
		</tr>
		<tr class="active">
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>4'618</td>
			<td>4'690</td>
			<td>4'775</td>
			<td>4'834</td>
			<td>4'943</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Männer</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'488</td>
			<td>2'532</td>
			<td>2'585</td>
			<td>2'602</td>
			<td>2'648</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>126</td>
			<td>118</td>
			<td>141</td>
			<td>133</td>
			<td>132</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>108</td>
			<td>131</td>
			<td>138</td>
			<td>111</td>
			<td>121</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>95</td>
			<td>108</td>
			<td>85</td>
			<td>92</td>
			<td>110</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>69</td>
			<td>70</td>
			<td>70</td>
			<td>69</td>
			<td>60</td>
		</tr>
		<tr class="active">
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2532</td>
			<td>2'556</td>
			<td>2'602</td>
			<td>2'648</td>
			<td>2'708</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="6">Frauen</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Erwerbspersonen am 1. Januar</th>
			<td>2'027</td>
			<td>2'086</td>
			<td>2'150</td>
			<td>2'173</td>
			<td>2'186</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Arbeitsmarkteintritte</th>
			<td>182</td>
			<td>179</td>
			<td>175</td>
			<td>156</td>
			<td>168</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Arbeitsmarktaustritte</th>
			<td>142</td>
			<td>157</td>
			<td>163</td>
			<td>162</td>
			<td>149</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">+ Einwanderung von Erwerbspersonen</th>
			<td>56</td>
			<td>64</td>
			<td>50</td>
			<td>56</td>
			<td>62</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">- Auswanderung von Erwerbspersonen</th>
			<td>37</td>
			<td>38</td>
			<td>39</td>
			<td>37</td>
			<td>33</td>
		</tr>
		<tr class="active">
			<th class="text-left" scope="row">= Erwerbspersonen am 31. Dezember</th>
			<td>2'086</td>
			<td>2'133</td>
			<td>2'173</td>
			<td>2'186</td>
			<td>2'234</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td class="highlight right">2007</td>
			<td class="highlight right">2008</td>
			<td class="highlight right">2009</td>
			<td class="highlight right">2010</td>
			<td class="highlight right">2011</td>
		</tr>
	</tfoot>
</table>

Highlighted cycle table (pairs)

FLEX

3.0.0

remove attribute summary on tag <table>

Tabelle mit Titelzeile (Standardtabelle)
	2011		2012		2013
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende
Wichtigsten GAV¹⁾	100	1'400'600	97	1'607'100	93	1'574'800
GAV ohne Lohnverhandlung	28	362'400	29	605'900	68	1'032'700
GAV mit Lohnverhandlung	72	1'038'200	68	1'001'200	25	542'100
Lohnvereinbarungsart
Effektivlohn-vereinbarung	9	129'500	6	79'500	6	76'500
Effektiv- und Mindest-lohnvereinbarung²⁾	45	365'800	47	3'688'400	40	403'700
Mindestlohn-vereinbarung²⁾	18	543'000	15	233'300	21	537'400
Keine Lohn-vereinbarung	0	0	0	0	1	15'100
	2011		2012		2013
	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende	GAV	unterstellte Arbeit- nehmende

<table class="table table-bordered text-right">
	<caption>Tabelle mit Titelzeile (Standardtabelle)</caption>
	<thead>
		<tr class="pairwise">
			<th></th>
			<th colspan="2" scope="colgroup" class="text-center">2011</th>
			<th colspan="2" scope="colgroup" class="text-center">2012</th>
			<th colspan="2" scope="colgroup" class="text-center active">2013</th>
		</tr>
		<tr>
			<th></th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left" scope="col">GAV</th>
			<th class="text-left" scope="col">unterstellte Arbeit-<br>nehmende</th>
			<th class="text-left active" scope="col">GAV</th>
			<th class="text-left active" scope="col">unterstellte Arbeit-<br>nehmende</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left" scope="row">Wichtigsten GAV<sup title="lorem ipsum dolor sit amet">1)</sup></th>
			<td>100</td>
			<td>1'400'600</td>
			<td>97</td>
			<td>1'607'100</td>
			<td class="active">93</td>
			<td class="active">1'574'800</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV ohne Lohnverhandlung</th>
			<td>28</td>
			<td>362'400</td>
			<td>29</td>
			<td>605'900</td>
			<td class="active">68</td>
			<td class="active">1'032'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">GAV mit Lohnverhandlung</th>
			<td>72</td>
			<td>1'038'200</td>
			<td>68</td>
			<td>1'001'200</td>
			<td class="active">25</td>
			<td class="active">542'100</td>
		</tr>
		<tr>
			<th class="text-left" scope="row" colspan="7">Lohnvereinbarungsart</th>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektivlohn-vereinbarung</th>
			<td>9</td>
			<td>129'500</td>
			<td>6</td>
			<td>79'500</td>
			<td class="active">6</td>
			<td class="active">76'500</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Effektiv- und Mindest-lohnvereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>45</td>
			<td>365'800</td>
			<td>47</td>
			<td>3'688'400</td>
			<td class="active">40</td>
			<td class="active">403'700</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Mindestlohn-vereinbarung<sup title="lorem ipsum dolor sit amet">2)</sup></th>
			<td>18</td>
			<td>543'000</td>
			<td>15</td>
			<td>233'300</td>
			<td class="active">21</td>
			<td class="active">537'400</td>
		</tr>
		<tr>
			<th class="text-left" scope="row">Keine Lohn-vereinbarung</th>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td class="active">1</td>
			<td class="active">15'100</td>
		</tr>
	</tbody>
	<tfoot>
		<tr class="pairwise">
			<td></td>
			<td class="text-center" colspan="2">2011</td>
			<td class="text-center" colspan="2">2012</td>
			<td class="text-center active" colspan="2">2013</td>
		</tr>
		<tr>
			<td></td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left">GAV</td>
			<td class="text-left">unterstellte Arbeit-<br>nehmende</td>
			<td class="text-left active">GAV</td>
			<td class="text-left active">unterstellte Arbeit-<br>nehmende</td>
		</tr>
	</tfoot>
</table>

Highlighted table with caption

FLEX

3.0.0

remove attribute summary on tag <table>
remove attribute role="columnheader" on tag <tr>

Table with caption (standard table)
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded
Jimi Hendrix	Are You Experienced	1967	10.00	MCA	11	53:10	Chas Chandler	February 1967
Pink Floyd	Wish You Were Here	1975	12.00	Harvest, Emi	8	42:59	Pink Floyd	May - October 1975
Beatles	Abbey Road	1969	14.00	Apple	12	58:45	Hans Muster	January - July 1969
Bob Dylan	Blonde on Blonde	1966	15.00	Columbia	14	75:21	Johnny Cash	July 1966
Artist	Album	Year	Price in USD	Label	Tracks	Length	Producer	Recorded

<table class="table table-bordered">
	<caption>Table with caption (standard table)</caption>
	<thead>
		<tr>
			<th>Artist</th>
			<th class="active">Album</th>
			<th class="text-right">Year</th>
			<th class="text-right">Price in USD</th>
			<th>Label</th>
			<th class="text-right">Tracks</th>
			<th class="text-right">Length</th>
			<th>Producer</th>
			<th>Recorded</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Jimi Hendrix</th>
			<td class="active">Are You Experienced</td>
			<td class="text-right">1967</td>
			<td class="text-right">10.00</td>
			<td>MCA</td>
			<td class="text-right">11</td>
			<td class="text-right">53:10</td>
			<td>Chas Chandler</td>
			<td>February 1967</td>
		</tr>
		<tr>
			<th scope="row">Pink Floyd</th>
			<td class="active">Wish You Were Here</td>
			<td class="text-right">1975</td>
			<td class="text-right">12.00</td>
			<td>Harvest, Emi</td>
			<td class="text-right">8</td>
			<td class="text-right">42:59</td>
			<td>Pink Floyd</td>
			<td>May - October 1975</td>
		</tr>
		<tr>
			<th scope="row">Beatles</th>
			<td class="active">Abbey Road</td>
			<td class="text-right">1969</td>
			<td class="text-right">14.00</td>
			<td>Apple</td>
			<td class="text-right">12</td>
			<td class="text-right">58:45</td>
			<td>Hans Muster</td>
			<td>January - July 1969</td>
		</tr>
		<tr>
			<th scope="row">Bob Dylan</th>
			<td class="active">Blonde on Blonde</td>
			<td class="text-right">1966</td>
			<td class="text-right">15.00</td>
			<td>Columbia</td>
			<td class="text-right">14</td>
			<td class="text-right">75:21</td>
			<td>Johnny Cash</td>
			<td>July 1966</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Artist</td>
			<td class="active">Album</td>
			<td class="text-right">Year</td>
			<td class="text-right">Price in USD</td>
			<td>Label</td>
			<td class="text-right">Tracks</td>
			<td class="text-right"> Length</td>
			<td>Producer</td>
			<td>Recorded</td>
		</tr>
	</tfoot>
</table>

Sortable table

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>
remove attribute role="rowheader" on tag <th>

The sortable table automatically formats the column in which the data has been sorted. You just have to use the table-sort class.

Game animals shot in Switzerland
	2000	2010	2011	2012
Boars	4'160	7'647	4'726	10'650
Chamois	16'625	13'427	13'413	13'350
Fox	42'221	31'044	27'094	35'616
	2000	2010	2011	2012

<table class="table table-bordered table-sort text-right">
	<caption>Game animals shot in Switzerland</caption>
	<thead>
		<tr>
			<th></th>
			<th>2000</th>
			<th>2010</th>
			<th>2011</th>
			<th>2012</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="text-left">Boars</th>
			<td>4'160</td>
			<td>7'647</td>
			<td>4'726</td>
			<td>10'650</td>
		</tr>
		<tr>
			<th class="text-left">Chamois</th>
			<td>16'625</td>
			<td>13'427</td>
			<td>13'413</td>
			<td>13'350</td>
		</tr>
		<tr>
			<th class="text-left">Fox</th>
			<td>42'221</td>
			<td>31'044</td>
			<td>27'094</td>
			<td>35'616</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>2000</td>
			<td>2010</td>
			<td>2011</td>
			<td>2012</td>
		</tr>
	</tfoot>
</table>

Table with expandable rows

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>
remove attribute role="rowheader" on tag <th>

2.5.0

wrapped text in <a> in <th> tag if it is a collapse link

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.

2.1.8

wrapped text in <a> in <th> tag if it is a collapse link

Some tables can be expanded to show details of a data set.

Game animals shot in Switzerland
	2000	2010	2011	2012
Animals	63'006	52'118	45'233	59'616
Boars	4'160	7'647	4'726	10'650
Chamois	16'625	13'427	13'413	13'350
Fox	42'221	31'044	27'094	35'616
	2000	2010	2011	2012

<table class="table table-bordered text-right">
	<caption>Game animals shot in Switzerland</caption>
	<thead>
		<tr>
			<th></th>
			<th>2000</th>
			<th>2010</th>
			<th>2011</th>
			<th>2012</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th><a href="#animals" class="text-left icon icon--before collapsed" data-toggle="collapse">Animals</a></th>
			<td>63'006</td>
			<td>52'118</td>
			<td>45'233</td>
			<td>59'616</td>
		</tr>
	</tbody>
	<tbody id="animals" class="collapse">
		<tr>
			<th class="text-left">Boars</th>
			<td>4'160</td>
			<td>7'647</td>
			<td>4'726</td>
			<td>10'650</td>
		</tr>
		<tr>
			<th class="text-left">Chamois</th>
			<td>16'625</td>
			<td>13'427</td>
			<td>13'413</td>
			<td>13'350</td>
		</tr>
		<tr>
			<th class="text-left">Fox</th>
			<td>42'221</td>
			<td>31'044</td>
			<td>27'094</td>
			<td>35'616</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td>2000</td>
			<td>2010</td>
			<td>2011</td>
			<td>2012</td>
		</tr>
	</tfoot>
</table>

Ruled table

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.

Ruled tables are particularly suitable for presenting simple 1:1 relationships. The ruled format is set by adding the table-simple to the table tag.

Contact
Name	E-mail
Hans Muster	hans.muster@mail.com
Hans Muster	hans.muster@mail.com
Hans Muster	hans.muster@mail.com

<table class="table table-simple">
	<caption>Contact</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>E-mail</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Hans Muster</td>
			<td><a href="mailto:hans.muster@mail.com">hans.muster@mail.com</a></td>
		</tr>
		<tr>
			<td>Hans Muster</td>
			<td><a href="mailto:hans.muster@mail.com">hans.muster@mail.com</a></td>
		</tr>
		<tr>
			<td>Hans Muster</td>
			<td><a href="mailto:hans.muster@mail.com">hans.muster@mail.com</a></td>
		</tr>
	</tbody>
</table>

Unruled table

FLEX

3.0.0

remove attribute role="columnheader" on tag <tr>

2.1.9

removed columnheader, rowheader and aria-describedby and replaced by scope="" attributes.

Unruled tables are suitable for presenting properties, e.g. of a publication. A simple unruled table is formatted with the class table-naked.

Name	E-mail
Hans Muster	hans.muster@mail.com

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-5">

			<table class="table table-naked">
				<thead>
					<tr>
						<th>Name</th>
						<th>E-mail</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Hans Muster</td>
						<td><a href="mailto:hans.muster@mail.com">hans.muster@mail.com</a></td>
					</tr>
				</tbody>
			</table>

		</div>
	</div>
</div>

Navigation

Search

Tables