Les Tableaux

1. Le concept fondamental

Les tableaux sont l'un des éléments les plus anciens du HTML. Contrairement aux listes (qui sont linéaires) ou aux grilles CSS (qui sont des mises en page), un tableau est conçu pour des données structurées : comparaisons, classements, emplois du temps, matrices de données.

Quand utiliser un tableau ?

• Données comparatives : plans tarifaires, caractéristiques produit
• Données organisées : calendriers, emplois du temps, classements
• Données tabulaires : tableaux de bord, rapports financiers
• Données relationnelles : relations entre plusieurs champs

Structure anatomique d'un tableau

<table>
  <caption>Titre du tableau</caption>
  <thead>
    <tr>
      <th>En-tête 1</th>
      <th>En-tête 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Donnée 1</td>
      <td>Donnée 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Pied 1</td>
      <td>Pied 2</td>
    </tr>
  </tfoot>
</table>

2. Syntaxe et propriétés CSS

Les balises du tableau

Propriétés CSS essentielles

border-collapse

La propriété border-collapse contrôle la fusion des bordures entre les cellules adjacentes :

/* Par défaut : les bordures sont séparées */
table {
  border-collapse: separate;
  border-spacing: 8px;  /* espace entre cellules */
}

/* Bordures fusionnées (le plus courant) */
table {
  border-collapse: collapse;
}

table-layout

/* Calcul automatique basé sur le contenu (lent) */
table {
  table-layout: auto;
}

/* Largeur fixe basée sur la première ligne (rapide) */
table {
  table-layout: fixed;
  width: 100%;
}

3. Visualisation

border-collapse : separate vs collapse

vertical-align dans les cellules

4. Exemples progressifs

Exemple 1 — Tableau de base stylisé

<table class="table-base">
  <thead>
    <tr>
      <th>Langage</th>
      <th>Année</th>
      <th>Paradigme</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>1995</td>
      <td>Multi-paradigme</td>
    </tr>
    <tr>
      <td>Python</td>
      <td>1991</td>
      <td>Orienté objet</td>
    </tr>
  </tbody>
</table>

Exemple 2 — Bandes de zébrage avec :nth-child()

/* Zébrage des lignes paires */
.table-zebra tbody tr:nth-child(even) {
  background-color: #f1f5f9;
}

.table-zebra tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Effet de survol */
.table-zebra tbody tr:hover {
  background-color: #e0f2fe;
}

Exemple 3 — En-tête sticky (épinglé)

.table-scroll-wrapper {
  max-height: 300px;
  overflow-y: auto;
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  background-color: #2563eb;
  color: white;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Exemple 4 — Tableau responsive mobile

/* Sur mobile, chaque ligne devient une "carte" */
@media (max-width: 600px) {
  .table-block table,
  .table-block thead,
  .table-block tbody,
  .table-block tr,
  .table-block th,
  .table-block td {
    display: block;
  }

  /* Cache les en-têtes */
  .table-block thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .table-block td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  /* Utilise data-label pour le nom de la colonne */
  .table-block td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--couleur-texte-clair);
  }
}

Exemple 5 — Design moderne avec design de table

Exemple 6 — Tableau avec indicateurs de tri

.table-sort th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 2rem;
}

.table-sort th .sort-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.table-sort th.sorted-asc .sort-icon::after {
  content: "▲";   /* Flèche tri ascendant */
}

.table-sort th.sorted-desc .sort-icon::after {
  content: "▼";   /* Flèche tri descendant */
}

Exemple 7 — Tableau avec badges de statut colorés

Exemple 8 — Tableau comparatif de tarification

Exemple 9 — Tableau calendrier

Exemple 10 — Contrôle des colonnes avec <col>

<table class="table-fixed">
  <colgroup>
    <col class="col-narrow">    
    <col class="col-wide">      
    <col class="col-medium">    
  </colgroup>
  ...
</table>

5. Erreurs fréquentes

/* ❌ MAUVAIS — Tableau de mise en page */
<table>
  <tr>
    <td>Logo</td>
    <td>Menu</td>
    <td>Recherche</td>
  </tr>
</table>

/* ✅ BON — Flexbox pour la mise en page */
<header style="display: flex; align-items: center;">
  <div class="logo">...</div>
  <nav class="menu">...</nav>
  <div class="recherche">...</div>
</header>

/* ❌ MAUVAIS — Sans structure sémantique */
<table>
  <tr><th>Nom</th><th>Âge</th></tr>
  <tr><td>Alice</td><td>25</td></tr>
</table>

/* ✅ BON — Avec structure complète */
<table>
  <thead>
    <tr><th>Nom</th><th>Âge</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>25</td></tr>
  </tbody>
</table>

/* ❌ MAUVAIS */
<table border="1">

/* ✅ BON */
<table>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #ccc; }
  </style>
</table>

/* ✅ Solution 1 : Défilement horizontal */
.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ Solution 2 : Conversion en blocs sur mobile */
@media (max-width: 600px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead { /* Accessibilité : masquer visuellement */ }
  td::before { content: attr(data-label); }
}

6. Bonnes pratiques

<th scope="col">Nom</th>     <!-- Colonne entière -->
<th scope="row">Total</th>    <!-- Ligne entière -->

7. Mini-défi

8. Projet — Dashboard de données

9. Révision

Récapitulatif des concepts clés

Quiz rapide

1. Quelle propriété empêche border-radius de fonctionner sur les cellules ?
2. Quel élément HTML fournit le titre sémantique d'un tableau ?
3. Quelle est la différence entre table-layout: auto et fixed ?
4. Pourquoi faut-il appliquer le zébrage sur <tbody> plutôt que sur le tableau entier ?
5. Comment masquer visuellement les en-têtes tout en les gardant accessibles ?

Cheat sheet

/* Tableau de base */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Zébrage */
tbody tr:nth-child(even) {
  background-color: #f1f5f9;
}

/* En-tête sticky */
thead th {
  position: sticky;
  top: 0;
  background: #2563eb;
  z-index: 1;
}

/* Wrapper responsive */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Conversion mobile */
@media (max-width: 600px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  td::before { content: attr(data-label); font-weight: 600; }
}