modifier

Bordure du tableau

Dans le chapitre précédent, on a discuté la construction des tableaux en HTML. On a utilisé l’attribut HTML border pour spécifier la largeur des bordures. Cette solution est obsolète depuis HTML5 en faveur de la solution CSS.

On va remplacer l’utilisation de l’attribut border par la propriété border du CSS.

<!DOCTYPE html>
<html>

<head>
  <link href="css/tableau-border-simple.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Salhi</td>
        <td>Ali</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rkik</td>
        <td>Nouha</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Chaaben</td>
        <td>Ahmed</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Le contenu du fichier tableau-border-simple.css est :

td,
th {
    border: 1px solid black;
}

On remarque que les bordures sont autour de chacune des cellules. On peut modifier l’espacement entre les cellules et les bordures en utilisant la propriété border-spacing qui accepte une ou deux valeurs en pixel pour spécifier l’espacement horizontalement et verticalement.

table {
    border-spacing: 20px 5px;
}

td,
th {
    border: 1px solid black;
}

On peut coller ces bordures entre elles afin d’obtenir le même rendu du chapitre précédent en appliquant la propriété border-collapse à l’élément <table>.

La propriété border-collapse accepte comme valeur deux valeurs : “collapse” pour coller les bordures en une seule et “separate” pour afficher les bordures distinctement qui est la valeur par défaut.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
}

Couleur des cellules

On peut changer les couleurs des cellules du tableau.

On va changer les couleurs et les marges ‘margin’ internes des lignes impaires du tableau précèdent (1, 2, …) en utilisant le sélecteur pseudo :nth-child(an+b). L’argument de ce sélecteur est une formule pour spécifier l’ensemble des éléments à sélectionner. Pour sélectionner les éléments impaires, la formule doit être 2n-1 ou bien le mot clé alias odd. Pour sélectionner les éléments paires, la formule doit être 2n ou le mot clé alias even.

Les cellules du tableau comme le reste des autres éléments supporte le pseudo classe :hover qui sera appliqué quand la souris est au dessus de l’élément.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

Supposons que l’age de Nouha et Ahmed ne sont pas saisis. La bordure et le fond de ces deux cellules seront rendus. On peut contrôler cette fonctionnalité en utilisant la propriété empty-cells. Elle accepte comme valeur deux mots clés: “show” pour rendre les bordures et le fond des cellules vide ou “hide” pour ne pas les rendre. Cette propriété ne fonctionne pas si les bordures sont collées avec la propriété border-collapse.

table {
    /* border-collapse: collapse; */
    empty-cells: hide;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

Mise en Forme de d’en-tête et du pied

L’en-tête et le pied du tableau ont des mises en forme prédéfinies mais qui peuvent se différencier selon les navigateurs. On va définir notre propre mise en forme pour le tableau de l’exemple précédent qui sera le même entre tous les navigateurs.

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

tbody tr:nth-child(odd) {
    background-color: #bbb;
}

td:hover {
    background: rgba(200, 200, 0, 0.4);
}

thead {
    background-color: tomato;
    color: white;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

Les légendes “captions”

La propriété caption-side permet de gérer la position de la légende du tableau. Elle prend deux valeurs :

“top” : La légende est affichée en haut.
“bottom” : La légende est affichée en bas.

Les autres valeurs (comme “left”, “right”, …) ont étés absolètes depuis CSS2 en faveur de la propriété text-align.

Prenons comme exemple la structure HTML suivante, la légende même définie à l’ouverture de l’élément <table>, elle sera positionnée en bas en utilisant la propriété caption-side :

<!DOCTYPE html>
<html>

<head>
  <link href="css/tableau-caption-side.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <table>
    <caption>Liste des étudiants</caption>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Salhi</td>
        <td>Ali</td>
        <td>24</td>
      </tr>
      <tr>
        <td>Rkik</td>
        <td>Nouha</td>
        <td>23</td>
      </tr>
      <tr>
        <td>Chaaben</td>
        <td>Ahmed</td>
        <td>25</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

table {
    border-collapse: collapse;
}

td,
th {
    border: 1px solid black;
    padding: 10px;
}

thead {
    background-color: tomato;
}

table caption {
    caption-side: bottom;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.8em;
}