Leçons
Démarrer
Démarrer la formation
CodeGym /Cours /Frontend SELF FR /Stylisation des tables

Stylisation des tables

Frontend SELF FR
Niveau 5 , Leçon 4
Disponible

9.1 Utilisation des attributs

La stylisation des tables en HTML peut être effectuée de différentes manières. L'une d'elles est l'utilisation d'attributs directement dans la balise de la table et ses éléments. Bien que les développeurs web modernes préfèrent généralement utiliser CSS pour la stylisation, comprendre les attributs HTML est utile pour une stylisation de base.

Attributs principaux de la table

Attribut border

Définit l'épaisseur de la bordure de la table. Habituellement, la valeur est indiquée en pixels.

HTML
    
      <table border="1">
        <tr>
          <th>Nom</th>
          <th>Note</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Marie </td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribut cellpadding:

Définit le remplissage interne des cellules (les marges à l'intérieur des cellules par rapport à leurs limites).

HTML
    
      <table cellpadding="10">
        <tr>
          <th>Nom</th>
          <th>Note</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Marie</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribut cellspacing:

Définit la distance entre les cellules.

HTML
    
      <table cellspacing="5">
        <tr>
          <th>Nom</th>
          <th>Note</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Marie</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attributs width et height:

Définissent la largeur et la hauteur de la table. Ces attributs peuvent également être utilisés dans les balises <td> et <th> pour définir les dimensions des cellules.

HTML
    
      <table style="text-align: left;" width="100%" height="200">
        <tr>
          <th width="50%">Nom</th>
          <th width="25%">Projet</th>
          <th width="25%">Ville</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Paris</td>
        </tr>
      </table>

Attribut align:

Définit l'alignement de la table sur la page (left, right, center).

HTML
    
      <table align="center">
        <tr>
          <th>Nom</th>
          <th>Note</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Marie</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

Attribut bgcolor:

Définit la couleur de fond de la table ou des cellules.

HTML
    
      <table bgcolor="#f0f0f0">
        <tr>
          <th>Nom</th>
          <th>Note</th>
        </tr>
        <tr>
          <td>Ivan</td>
          <td>91</td>
        </tr>
        <tr>
          <td>Marie</td>
          <td>94</td>
        </tr>
        <tr>
          <td>Nina</td>
          <td>89</td>
        </tr>
      </table>

9.2 Attributs pour les cellules de table

Attributs pour les cellules de table

Attribut colspan:

Fusionne les cellules horizontalement.

HTML
    
      <td colspan="2">Cellule fusionnée</td>

Attribut rowspan:

Fusionne les cellules verticalement.

HTML
    
      <td rowspan="2">Cellule fusionnée</td>

Attribut align:

Définit l'alignement horizontal du contenu de la cellule (left, right, center).

HTML
    
      <td align="center">Texte centré</td>

Attribut valign:

Définit l'alignement vertical du contenu de la cellule (top, middle, bottom).

HTML
    
      <td valign="top">Texte en haut</td>

Attribut bgcolor:

Définit la couleur de fond pour la cellule.

HTML
    
      <td bgcolor="#ffcc00">Fond coloré</td>

9.3 Exemple complet

Exemple complet de stylisation de table avec des attributs :

HTML
    
      <table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
        <caption>Liste des étudiants et leurs notes</caption>
        <thead bgcolor="#c0c0c0">
          <tr>
            <th align="left">Nom</th>
            <th align="center">Âge</th>
            <th align="right">Ville</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ivan</td>
            <td align="center">30</td>
            <td align="right">Londres</td>
          </tr>
          <tr>
            <td colspan="2" align="center">Marie et Pierre</td>
            <td align="right">Liverpool</td>
          </tr>
          <tr>
            <td rowspan="2" valign="middle">Anna</td>
            <td>25</td>
            <td>Manchester</td>
          </tr>
          <tr>
            <td>27</td>
            <td>Leeds</td>
          </tr>
        </tbody>
        <tfoot>
          <td colspan="3" align="center">Fin du tableau</td>
        </tfoot>
      </table>

Explication de l'exemple

  • border="1": définit une bordure de table d'une épaisseur de 1 pixel
  • cellpadding="10": applique un remplissage interne de 10 pixels à toutes les cellules de la table
  • cellspacing="5": définit un espacement de 5 pixels entre les cellules de la table
  • width="80%": définit la largeur de la table à 80% de la largeur de l'élément parent
  • align="center": centre la table sur la page
  • bgcolor="#e0e0e0": définit la couleur de fond pour la table
  • <caption>: ajoute un titre à la table
  • <thead> et <tbody>: groupent les titres et le corps de la table. La couleur de fond pour les titres est définie avec bgcolor="#c0c0c0"
  • <th> et <td>: sont utilisées pour définir les cellules de titres et de données
  • <align> et <valign>: définissent l'alignement horizontal et vertical du contenu des cellules
  • <colspan> et <rowspan>: fusionnent les cellules horizontalement et verticalement
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION