Grille de base, Tableaux, Lignes directrices pour le design web de la Confédération

Tableau standard

FLEX

3.2.0

utilisation de coal au lieu de #999 pour la couleur de texte des caption

3.0.0

retirez l’attribut role="columnheader" de la balise `
retirez l’attribut role="rowheader" de la balise <th>

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".
balises <col> et <colgroup> ajoutées avant les tableaux dans certains cas

2.1.8

columnheader, rowheader et aria-describedby ajoutés pour une meilleure accessibilité

Tableaux standard constitués du titre de tableau (caption), de la tête du tableau (thead), du corps du tableau (tbody) et du pied du tableau (tfoot). Ce tableau peut être complété par des fonds alternés et/ou l’emphase des lignes ou colonnes.

Pour un tableau composé de cellules encadrées, on utilisera la classe «.table-bordered».

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>

Tableau imbriqué (simple)

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise <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>

Tableau imbriqué (multiple)

FLEX

3.0.0

retirez l’attribut summary de la balise <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>

Tableau avec titre

FLEX

3.0.0

retirez l’attribut summary de la balise <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>

Tableau avec fonds alternés

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise `
retirez l’attribut role="rowheader" de la balise <th>

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".

Les fonds alternés sont affichés si on ajoute la classe class=’table_zebra’ à la balise du tableau.

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>

Tableau imbriqué avec fonds alternés (simple)

FLEX

3.0.0

retirez l’attribut summary de la balise <table>
retirez l’attribut role="columnheader" de la balise <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>

Tableau imbriqué avec fonds alternés (multiple)

FLEX

3.0.0

retirez l’attribut summary de la balise <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>

Tableau à fonds alternés avec titre

FLEX

3.0.0

retirez l’attribut summary de la balise <table>
retirez l’attribut role="columnheader" de la balise <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>

Tableau avec mise en évidence

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise `
retirez l’attribut role="rowheader" de la balise <th>

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".

Ce tableau est dérivé du tableau standard, mais il possède en plus l’activation des fonds alternés et l’emphase appliquée sur des cellules du tableau (class=’selected’).

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>

Tableau imbriqué avec mise en évidence (simple)

FLEX

3.0.0

retirez l’attribut summary de la balise <table>
retirez l’attribut role="columnheader" de la balise <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>

Tableau imbriqué avec mise en évidence (multiple)

FLEX

3.0.0

retirez l’attribut summary de la balise <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>

Tableau avec titre et mise en évidence

FLEX

3.0.0

retirez l’attribut summary de la balise <table>
retirez l’attribut role="columnheader" de la balise <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>

Tableau triable

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise <tr>
retirez l’attribut role="rowheader" de la balise <th>

Le tableau triable met automatiquement en évidence la colonne triée. (classe table-sort)

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>

Tableau avec masquage et affichage de lignes

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise `
retirez l’attribut role="rowheader" de la balise <th>

2.5.0

emballer le texte <a> dans une balise <th> s’il s’agit d’un lien «collapse»

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".

2.1.8

emballer le texte <a> dans une balise <th> s’il s’agit d’un lien «collapse»

Certaines lignes du tableau peuvent être dépliées pour afficher des détails concernant un enregistrement.

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>

Tableau avec lignes

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise <tr>

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".

Les tableaux avec lignes conviennent particulièrement bien à la représentation de rapports simples 1:1. On obtient les lignes du tableau en ajoutant la classe class=’table_simple’ à la balise du tableau.

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>

Tableaux sans lignes

FLEX

3.0.0

retirez l’attribut role="columnheader" de la balise <tr>

2.1.9

columnheader, rowheader et aria-describedby supprimés et remplacés par des attributs scope="".

Les tableaux sans lignes conviennent pour la représentation de propriétés, p. ex. d’une publication. Un tableau simple sans lignes sera marqué par la classe 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

Chercher

Tableaux