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.

images html css

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 !

  • merci encore super 🙂

  • Merci pour l’astuce de coyote, moi qui suis en pleine refonte de mon module de notation :).
    Après, pour les plus débutants d’entre nous, une petite capture aurait été la bienvenu … voir limite montrer que l’on peut appliquer des styles (même si cela est logique pour celui qui en a l’habitude).

    Dans tous les cas merci 🙂