HTML : Faire un tableau avec des div

Voici le résumé d’un article trouvé sur Vanseodesign.com.

L’idée principale est de remplacer les balises classiques des tableaux html (table, tr, td, …) par des balises div ou span.

1/ La correspondance de balises utilisées pour des tableaux avec la propriété css

table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

2/ Le même tableau (3 par 3) sous 2 versions différentes

• Avec les balises table, tr, td

<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

• Avec les balises div et span avec le css correspondant

<div id="table">
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
</div>

#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

Voili voilou, j’espère que ça va vous aider !