Cette après-midi je discutai avec un collègue qui voulait faire une table dans <table> et qui d'ailleurs ne savait pas pourquoi cette guère à la mise en page en table.
Pourquoi la guerre :
Parce que table en plus d'avoir l'apparence d'un tableau, exprime l'idée d'un
tableau de données. Il s'agit d'une balide sémantique (la même différence
existe entre <b> : mise en gras du texte et <strong> :
balise sémantique car marque l'importance du texte.)
Et alors le problème me direz-vous ?
L'accessibilité ! Un traducteur non voyant (synthétiseur
vocale) va traduire <table> par "Voici un tableau". Donc imaginez si le
moindre mise en page utilise <table>...
Mais il faut avouer que une apparence de tableau est bien pratique. Si on doit faire ceci avec des <div> c'est long et lourd ! CSS 3 a pensé à nous !
Voici quelques nouvelles valeurs à l'attribut css display : table, table-row, table-cell.
Le style css inline de l'implémentation est volontaire ci dessous.
Mise en page <table> irrespectueux de l'accessibilité:
<table>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
</table>
Mise en page <div> respectueux de l'accessibilité:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
1
</div>
<div style="display:table-cell">
2
</div>
</div>
</div>