HTML Table Styling désigne la mise en forme graphique des tableaux sur les pages Web. Vous pouvez pour cela avoir recours à des instructions CSS que vous intégrez au choix directement 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 représentation visuelle est communé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’adaptation du design des tableaux (Tables) HTML, repose sur l’utilisation des possibilités offertes par CSS dans le Web design moderne. Les Cascading Style Sheets (CSS) permettent de personnaliser presque entièrement l’apparence des éléments sous forme de tableau. Par exemple, vous pouvez définir des couleurs d’arrière-plan spécifiques pour les cellules ou ajuster l’épaisseur des bordures. Pour intégrer le code CSS nécessaire et styliser une table HTML, trois options s’offrent à vous :

  • Intégration dans la zone <head> : vous ajoutez les styles CSS souhaités avec la balise HTML <style> directement dans l’en-tête d’un document HTML.
  • Fichier CSS externe : une autre possibilité 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 directement dans l’élément de tableau. Cela n’est toutefois recommandé que dans des cas particuliers, lorsque la réutilisation et la maintenance 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 propriétés CSS que vous pouvez utiliser pour améliorer l’apparence et la convivialité des tableaux sur les pages Web. Vous pouvez par exemple modifier leurs propriétés de base à l’aide des instructions 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’espacement entre les cellules lorsque border-collapse: separate est utilisé

Ci-dessous, nous résumons quelques-unes des options de HTML Table Styling les plus importantes, classées en différentes catégories.

Espacement des cellules et alignement du texte

Instruction CSS Description
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’alignement horizontal du texte à l’intérieur des cellules (left, center, right)
vertical-align Détermine l’alignement vertical du contenu des cellules (top, middle, bottom)

Couleurs et image de fond

Instruction CSS Description
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

Instruction CSS Description
font-family Définit la police de caractè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

Instruction CSS Description
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 illustrons la syntaxe et le fonctionnement des trois variantes possibles pour la mise en forme des tableaux HTML à l’aide d’exemples pratiques. Nous abordons brièvement les avantages et inconvénients des différentes options.

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

La mise en forme CSS dans l’en-tête est particulièrement utile pour les petits projets ou les modifications 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 propriétés ne s’appliquent qu’à la page Web en question, ce qui rend la réutilisation et la maintenance plus compliqué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éutiliser facilement les styles sur plusieurs pages. Les navigateurs peuvent également mettre en cache le fichier CSS, optimisant ainsi les temps de chargement. 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épertoire 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 adaptations spécifiques sur un seul élément de tableau. Pour les petits projets uniques ou les tests pour lesquels la réutilisation ne joue aucun rôle, cette option est donc tout à fait recommandée. Pour des scénarios de code plus durables, vous devriez toutefois toujours recourir à l’une des deux autres formes d’intégration.

Il suffit d’effectuer le inline styling directement 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
Cet article vous a-t-il été utile ?
Aller au menu principal