Tableaux

Basique

Les tableaux, vous permettent d'afficher vos données sour forme de colonnes et de lignes. Les tableaux s'adaptent et seront visible sur tous les supports d'écran automatiquement et vous pouvez personnaliser le design.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<table>
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	</tbody>
</table>

<table class="table--bordered">
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	</tbody>
</table>

Interactif

Vous pouvez rendre interactif les lignes, colonnes ou les deux en même temps.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<table class="table--bordered table--row-hover">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<table class="table--bordered table--col-hover">
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

<table class="table--bordered table--row-hover table--col-hover table--cell-hover">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
			<th scope="col">Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
			<td>Cell</td>
		</tr>
	</tbody>
</table>

Adaptatif

Vous avez également le contrôle sur la façon dont les tableaux s'adapteront suivant les dimensions d'affichage de l'écran. Par défaut une barre de déplacement horizontale apparait automatiquement. Vous pouvez changer ce comportement simplement en rajoutant l'attribut data-label dans les cellules pour décrire les en-têtes.
(Redimensionnez votre surface d'affichage, pour visualiser le comportement adaptatif)

# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<table class="table--responsive table--bordered table--cell-hover">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading 1</th>
			<th scope="col">Heading 2</th>
			<th scope="col">Heading 3</th>
			<th scope="col">Heading 4</th>
			<th scope="col">Heading 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
	</tbody>
</table>

Personnalisation

A l'heure actuelle, la personnalisation des tableaux, est partielle. Vous ne pourrez pas pour le moment définir les couleurs au survol de la souris. Sauf si vous écraser les classes de bases.

# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<table class="table--bordered custom--table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Heading 1</th>
			<th scope="col">Heading 2</th>
			<th scope="col">Heading 3</th>
			<th scope="col">Heading 4</th>
			<th scope="col">Heading 5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td data-label="Heading 1">Cell</td>
			<td data-label="Heading 2">Cell</td>
			<td data-label="Heading 3">Cell</td>
			<td data-label="Heading 4">Cell</td>
			<td data-label="Heading 5">Cell</td>
		</tr>
	</tbody>
</table>
.custom--table {
  --background-color: #c49656;
  --color: #2d1d11;
  --header-background-color: #983c09;
  --header-color: #f8ab8e;
  --border-width: 2px;
  --border-color: #642f00;
}