FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 1.10. Les tableaux en HTML

Syntaxe

Les tableaux restent un moyen incontournable de structurer des données en lignes / colonnes. Un tableau se décrit en HTML à l'aide des balises suivantes :

On rencontre classiquement des tableaux structurés (en-tête et corps) à l'aide des balises suivantes :

Voici un exemple de tableau :

<table border="1">

  <!-- en-tête -->
  <thead>
    <tr>
      <th>NOM</th>
      <th>NOTE</th>
    </tr>
  </thead>

  <!-- Corps du tableau -->
  <tbody>
    <tr>
      <th>Pierre</th>
      <td>16</td>
    </tr>
    <tr>
      <th>Paul</th>
      <td>14</td>
    </tr>
    <tr>
      <th>Jacques</th>
      <td>18</td>
    </tr>
  </tbody>

</table>

L'exemple précédent affiche le tableau ci-dessous :

Mise en forme des tableaux

Il est parfoit nécessaire d'avoir une ligne à cheval sur plusieurs colonnes, ou l'inverse. Les balises <td> acceptent deux attributs rowspan="" et colspan="" qui spécifient respectivement le nombre de ligne est de colonnes sur lesquels s'étalera la celulle. Voici un exemple :

<table border="1">

  <tr>
    <td colspan=2>Ingredients</td>
  </tr>

  <tr>
    <td rowspan=3>Gateau</td>
    <td>Pate</td>
  </tr>

  <tr>
    <td>Creme</td>
  </tr>

  <tr>
    <td>Fraise</td>
  </tr>

</table>

L'exemple précédent affiche le tableau ci-dessous :

Voir aussi


Dernière mise à jour : 16/11/2019