De l’utilité sémantique des tableaux html…

De l’utilité sémantique des tableaux html…

Difficulté

htmlcss

« Les tableaux doivent être bannis ! »

On nous le dit depuis le développement du web dit « sémantique » : les tableaux doivent être bannis dans la construction des sites….
Alors on n’en parle plus…
Et on ne fait plus de tableaux.
Très bien… Sauf que…
Quand on a besoin d’un tableau, je veux dire un « vrai » tableau, avec des lignes et des colonnes, alors là, on se rappelle vaguement de : <table> <tr> <td>.

Mais un tableau, c’est un peu plus que ça. Surtout en le couplant au css :
Alors, voyons les balises moins connues :

1. Des balises pour mieux formater vos tableaux

- <caption> : la légende du tableau
- <th> : entourée de <tr> comme ses soeurs <td>, c’est le titre de la colonne

On peut également diviser le tableau en « zones » :
- <thead> : l’entête du tableau
- <tfoot> : le pied du tableau
- <tbody> : le corps du tableau
Ce qui permet une personnalisation précise grâce aux css.

Un petit rappel sur les attributs possibles d’une cellule :
Le nombre de colonnes par ligne doit être le même pour chaque ligne du tableau.
Le nombre de lignes par colonnes doit être le même pour chaque colonne du tableau.
Des fusions sont possibles:
- rowspan : permet la fusion de 2 lignes au niveau de la cellule,
- colspan : permet la fusion de 2 colonnes au niveau de la cellule.

2. Voici le code html du tableau :

<table class="tab" cellspacing="0">
	<caption>Balise Caption : Titre du Tableau</caption>
	<thead>
	<tr>
	   <th>Titre colonne 1</th>
	   <th>Titre colonne 2</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	   <th colspan="2">Pied du tableau</th>
	</tr>
	</tfoot>

	<tbody>
	<tr>
	   <td>Un élément en ligne</td>
	   <td><div>Un élément bloc</div></td>
	</tr>
	<tr>
	   <td>Contenu1</td>
	   <td>Contenu2</td>
	</tr>
	<tr>
	   <td>Contenu1</td>
	   <td>Contenu2</td>
	</tr>
	</tbody>
</table>

A noter : La présence de tfoot avant le tbody est nécessaire pour une validation du W3C.

Ce qui donne en ajoutant quelques css :

3. Voyons les css

    table.tab {
    border: 1px solid #E7E7E7;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    margin: 20px 0;
    text-align: left;
    width: 100%;
}

table.tab  caption {
    background: none repeat scroll 0 0 #FFFFDB;
    border: 1px solid #F7F7AB;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 5px;
    padding: 10px;
}

table.tab tr th, table.tab thead th {
    background: none repeat scroll 0 0 #F3F9FC;
    border-left: 1px solid #E9F2F7;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04) inset;
    color: #444444;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 24px;
}

table.tab tfoot th {
    color: #444444;
    font-size: 12px;
    text-transform: uppercase;
}

table.tab tr:nth-child(even) td {
    background: none repeat scroll 0 0 #F7F7F7;
}

table.tab tr td {
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #E7E7E7;
    padding: 6px 24px;
    text-align:center;
}

Quelques explications :
- border-spacing est la distance entre 2 bordures de cellule. C’est l’équivalent de l’attribut cellspacing. Cette propriété n’est pas comprise par les anciennes versions d’Internet. .explorer, il est donc recommandé de laisser l’attribut cellspacing="0" sur le tableau.
- border-collapse permet la fusion des bordures. Sans ce paramètre, nous aurions une double bordure autour des cellules.
- padding sur les cellules remplace l’attribut cellpadding.

4. Les propriétés css3 (non comprises par les anciens navigateurs) :

tr:nth-child(even) : cible les lignes paires,
box-shadow : ombrage de la bordure, avec couleur de l’ombrage, la taille, et la position,
border-radius : arrondi de la bordure.

Voila, vous êtes parés pour agrémenter facilement vos tableaux :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>