Tableaux CSS

❮ Précédent Suivant ❯

Dans ce chapitre, nous allons apprendre comment donner des styles pour les tableaux. On peut changer la couleur des titres et des lignes. Voyons un exemple.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table, th, td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!

Expliquons le code mentionné au-dessus.

Comme vous le voyez, notre tableau a 2 parties: la première est celle, où nous allons écrits les titres, qui est notre partie <thead> est la deuxième est <tbody> où nous allons écrit quelque texte. Le tableau a des bordures noires, pour cela on utilise la propriété border. Nous pouvons utiliser n'importe quelle couleur que nous voulons et nous pouvons choisir un style pour les bordures.

Couleur de tableau

Comme vous le voyez, la partie <thead> de notre tableau est bleau et lorsqu'on écrit un texte, il devient blanc. Pour l'arrière-plan bleu, nous utilisons la propriété background-color et pour le texte blanc, nous utilisons la propriété color. Les autres textes nous avons écrit en noir.

Collapse Borders

La propriété border-collapse définit si les bordures de tableaux sont s'effondré à une seule bordure ou sont séparées:

La largeur et la hauteur de tableau

Le tableau a également les propriétés width et height. Comme vous le voyez, nous utilisons ces propriétés dans notre style, nous utilisons la propriété width pour tout le tableau et la propriété height pour les titres. Nous pouvons utiliser ces propriétés avec with pixels et pourcents.

Alignement du texte de tableau

Maintenant parlons de l'alignement du texte de tableau. Comme vous le savez, avant utiliser la propriété text-align pour la position du texte, dans notre exemples nous utilisons la propriété text-align pour le titre. Pour cela nous utilisons "text-align: center".

Remplissage du tableau

Afin de contrôler l'espace entre la bordure et le contenu dans un tableau, utilisez la propriété padding sur les éléments <td> et <th>:

td {
  padding: 15px;
}