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

1
2
3
4
5
6
7
8
9
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
1
2
3
#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

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

scoco

Auteur et principal acteur de ce blog.
Entre le Roller Derby, le longboard, les geekeries et d'autres trucs, je parle un peu de tout.

2 commentaires

  1. 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 🙂

Leave a Comment

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