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>