HTML Table Styling désigne la mise en forme graphique des tableaux sur les pages Web. Vous pouvez pour cela avoir recours à des ins­truc­tions CSS que vous intégrez au choix di­rec­te­ment dans le document HTML ou par renvoi à un fichier CSS externe.

Note

En HTML, l’élément <table> est souvent appelé « table », tandis que sa re­pré­sen­ta­tion visuelle est com­mu­né­ment désignée par le terme « tableau ».

Comment adapter l’apparence des éléments <table> en HTML ?

Le HTML Table Styling, c’est-à-dire l’adap­ta­tion du design des tableaux (Tables) HTML, repose sur l’uti­li­sa­tion des pos­si­bi­li­tés offertes par CSS dans le Web design moderne. Les Cascading Style Sheets (CSS) per­met­tent de per­son­na­li­ser presque en­tiè­re­ment l’apparence des éléments sous forme de tableau. Par exemple, vous pouvez définir des couleurs d’arrière-plan spé­ci­fiques pour les cellules ou ajuster l’épaisseur des bordures. Pour intégrer le code CSS né­ces­saire et styliser une table HTML, trois options s’offrent à vous :

  • In­té­gra­tion dans la zone <head> : vous ajoutez les styles CSS souhaités avec la balise HTML <style> di­rec­te­ment dans l’en-tête d’un document HTML.
  • Fichier CSS externe : une autre pos­si­bi­lité consiste à utiliser un fichier CSS séparé que vous intégrez via la balise <link> dans la zone <head> du document HTML.
  • Inline CSS : vous pouvez aussi mettre en forme le tableau HTML à l’aide de la balise style di­rec­te­ment dans l’élément de tableau. Cela n’est toutefois re­com­mandé que dans des cas par­ti­cu­liers, lorsque la réu­ti­li­sa­tion et la main­te­nance simple du code ne jouent aucun rôle.
Conseil

Apprenez comment intégrer du CSS dans une page HTML dans cet article dédié du Digital Guide.

Quelles sont les options de style pour les tableaux HTML ?

Il existe une multitude de pro­prié­tés CSS que vous pouvez utiliser pour améliorer l’apparence et la con­vi­via­lité des tableaux sur les pages Web. Vous pouvez par exemple modifier leurs pro­prié­tés de base à l’aide des ins­truc­tions CSS suivantes :

  • width : définit la largeur du tableau ou des colonnes
  • border : définit la largeur, le style et la couleur de la bordure du tableau
  • border-collapse : contrôle si les bordures des cellules sont combinées (collapse) ou séparées (separate)
  • border-spacing : détermine l’es­pa­ce­ment entre les cellules lorsque border-collapse: separate est utilisé

Ci-dessous, nous résumons quelques-unes des options de HTML Table Styling les plus im­por­tantes, classées en dif­fé­rentes ca­té­go­ries.

Es­pa­ce­ment des cellules et alig­ne­ment du texte

Ins­truc­tion CSS Des­crip­tion
padding Ajoute de l’espace à l’intérieur des cellules
margin Ajoute de l’espace autour de l’ensemble du tableau
text-align Détermine l’alig­ne­ment ho­ri­zon­tal du texte à l’intérieur des cellules (left, center, right)
vertical-align Détermine l’alig­ne­ment vertical du contenu des cellules (top, middle, bottom)

Couleurs et image de fond

Ins­truc­tion CSS Des­crip­tion
background-color Définit la couleur de fond des cellules, des rangées ou du tableau entier
color Définit la couleur du texte
background-image Définit une image de fond pour les cellules ou le tableau entier

Police et taille de la police

Ins­truc­tion CSS Des­crip­tion
font-family Définit la police de ca­rac­tères
font-size Définit la taille de la police
font-weight Définit l’épaisseur de la police (par ex. bold pour le texte en gras)
text-transform Contrôle la casse du texte (uppercase, lowercase, capitalize)

Bordures du tableau

Ins­truc­tion CSS Des­crip­tion
border-style Définit le style de la bordure (solid, dashed, dotted)
border-width Définit l’épaisseur de la bordure
border-color Définit la couleur de la bordure du tableau

HTML Table Styling : exemples

Pour finir, nous il­lus­trons la syntaxe et le fonc­tion­ne­ment des trois variantes possibles pour la mise en forme des tableaux HTML à l’aide d’exemples pratiques. Nous abordons briè­ve­ment les avantages et in­con­vé­nients des dif­fé­rentes options.

Formatage d’un élément <table> HTML dans la zone <head>

La mise en forme CSS dans l’en-tête est par­ti­cu­liè­re­ment utile pour les petits projets ou les mo­di­fi­ca­tions rapides. Elle ne nécessite pas de feuille de style externe, et vous pouvez utiliser des ID pour spécifier les tableaux auxquels appliquer les styles. Cependant, les pro­prié­tés ne s’ap­pli­quent qu’à la page Web en question, ce qui rend la réu­ti­li­sa­tion et la main­te­nance plus com­pli­quées.

Le code CSS est intégré dans l’en-tête à l’aide de la balise <style>. Dans l’exemple suivant, nous indiquons que l’en-tête du tableau doit avoir un fond vert, tandis que les autres lignes doivent alterner entre un fond gris clair et blanc :

<html>
<head>
 <title>Exemple de tableau</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    thead th {
      background-color: #4CAF50; / *Vert pour l’en-tête du tableau* /
      color: white;
    }
    tbody tr:nth-child(odd) {
      background-color: #f2f2f2; / *Fond gris clair pour les lignes impaires* /
    }
    tbody tr:nth-child(even) {
      background-color: #ffffff; / *Fond blanc pour les lignes paires* /
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
        <th>Colonne 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entrée 1</td>
        <td>Entrée 2</td>
        <td>Entrée 3</td>
        <td>Entrée 4</td>
      </tr>
      <tr>
        <td>Entrée 5</td>
        <td>Entrée 6</td>
        <td>Entrée 7</td>
        <td>Entrée 8</td>
      </tr>
      <tr>
        <td>Entrée 9</td>
        <td>Entrée 10</td>
        <td>Entrée 11</td>
        <td>Entrée 12</td>
      </tr>
      <tr>
        <td>Entrée 13</td>
        <td>Entrée 14</td>
        <td>Entrée 15</td>
        <td>Entrée 16</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
html
Image: Formatage du tableau HTML : exemple
L’exemple de tableau au format simple montre l’en-tête coloré souhaité et les couleurs de ligne qui alternent ensuite.

Mise en forme du tableau HTML via une feuille CSS

La mise en forme des tableaux HTML via une feuille de style CSS externe est la méthode idéale pour séparer le contenu du design. De plus, elle permet de réu­ti­li­ser fa­ci­le­ment les styles sur plusieurs pages. Les na­vi­ga­teurs peuvent également mettre en cache le fichier CSS, op­ti­mi­sant ainsi les temps de char­ge­ment. Cependant, pour les petits projets, cette approche peut paraître complexe.

Pour l’exemple précédent, procédez en deux étapes : d’abord, créez un fichier CSS appelé styles.css et placez-le dans le même ré­per­toire que le site Web, puis insérez-y le code suivant :

thead th {
    background-color: #4CAF50; / *Vert pour l’en-tête du tableau* /
}
tbody tr:nth-child(odd) {
    background-color: #f2f2f2; / *Fond gris clair pour les lignes impaires* /
}
tbody tr:nth-child(even) {
    background-color: #ffffff; / *Fond blanc pour les lignes paires* /
}
css

Dans la deuxième étape, vous intégrez le fichier dans l’en-tête via un élément <link>. Le code du tableau qui suit ne change pas :

<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
                <!-- Contenu des cellules d’en-tête ici -->
            </tr>
        </thead>
        <tbody>
            <!-- Lignes du corps du tableau ici -->
        </tbody>
    </table>
</body>
</html>
html

Concevoir un tableau HTML via un code en ligne

Inline CSS est la variante pratique si vous ne souhaitez effectuer que des adap­ta­tions spé­ci­fiques sur un seul élément de tableau. Pour les petits projets uniques ou les tests pour lesquels la réu­ti­li­sa­tion ne joue aucun rôle, cette option est donc tout à fait re­com­man­dée. Pour des scénarios de code plus durables, vous devriez toutefois toujours recourir à l’une des deux autres formes d’in­té­gra­tion.

Il suffit d’effectuer le inline styling di­rec­te­ment dans les éléments concernés dans la table. Dans notre exemple, le code se présente comme suit :

<body>
    <table>
        <thead>
            <tr>
                <th style="background-color: #4CAF50;">Colonne 1</th>
                <th style="background-color: #4CAF50;">Colonne 2</th>
                <th style="background-color: #4CAF50;">Colonne 3</th>
                <th style="background-color: #4CAF50;">Colonne 4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: #f2f2f2;">
                <td>Entrée 1</td>
                <td>Entrée 2</td>
                <td>Entrée 3</td>
                <td>Entrée 4</td>
            </tr>
            <tr>
                <td>Entrée 5</td>
                <td>Entrée 6</td>
                <td>Entrée 7</td>
                <td>Entrée 8</td>
            </tr>
            <tr style="background-color: #f2f2f2;">
                <td>Entrée 9</td>
                <td>Entrée 10</td>
                <td>Entrée 11</td>
                <td>Entrée 12</td>
            </tr>
            <tr>
                <td>Entrée 13</td>
                <td>Entrée 14</td>
                <td>Entrée 15</td>
                <td>Entrée 16</td>
            </tr>
        </tbody>
    </table>
</body>
html
Aller au menu principal