HTML — Tableaux et médias

Ce chapitre couvre deux familles d’éléments très différentes mais souvent voisines dans une page : les tableaux, pour présenter des données organisées, et les médias (images, sons, vidéos, contenus embarqués), pour l’enrichir. Le fil conducteur reste le même que pour la sémantique : utiliser chaque élément pour ce à quoi il sert vraiment.

Tableaux

Les tableaux servent à présenter des données tabulaires : des informations organisées en lignes et en colonnes, où la position d’une cellule a un sens. Avant d’aller plus loin, retenez cet usage strict — un tableau n’est pas un outil de mise en page.

Structure de base d’un tableau

Un tableau se construit ligne par ligne, et chaque ligne contient des cellules.

<table>
    <tr>
        <td>Ligne 1, Colonne 1</td>
        <td>Ligne 1, Colonne 2</td>
    </tr>
    <tr>
        <td>Ligne 2, Colonne 1</td>
        <td>Ligne 2, Colonne 2</td>
    </tr>
</table>

Quatre balises suffisent pour démarrer. Leurs noms anglais sont parlants une fois qu’on les connaît.

Balise	Rôle
<table>	Conteneur du tableau
<tr>	Table Row (ligne)
<td>	Table Data (cellule de données)
<th>	Table Header (cellule d’en-tête)

Structure complète d’un tableau

Un tableau bien construit ne se contente pas d’aligner des cellules : il distingue son en-tête, son corps et son pied. C’est le rôle de <thead>, <tbody> et <tfoot>.

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Jean</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Marie</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Moyenne d'âge</td>
            <td>27.5</td>
        </tr>
    </tfoot>
</table>

Balise	Rôle
<thead>	En-tête du tableau (titres de colonnes)
<tbody>	Corps du tableau (données)
<tfoot>	Pied du tableau (totaux, résumés)

Ce découpage apporte une structure claire et sémantique, une accessibilité améliorée, et un style CSS facilité : on peut cibler précisément l’en-tête ou le corps. Bonus pratique : à l’impression d’un long tableau, le navigateur peut répéter le <thead> en haut de chaque page.

<th> vs <td>

La différence entre ces deux cellules est sémantique avant d’être visuelle.

Balise	Usage	Style par défaut
<th>	Cellule d”en-tête	Gras + centré
<td>	Cellule de données	Normal + aligné à gauche

<thead>
    <tr>
        <th>Produit</th>
        <th>Prix</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Pommes</td>
        <td>2.50€</td>
    </tr>
</tbody>

Le <th> ne se contente pas d’apparaître en gras : il annonce qu’une cellule est un en-tête, ce qui permet aux lecteurs d’écran de relier chaque donnée à l’intitulé de sa colonne. Pour un utilisateur non-voyant, c’est la différence entre une grille de chiffres incompréhensible et un tableau lisible.

Fusion de cellules

Il arrive qu’une cellule doive s’étendre sur plusieurs colonnes ou plusieurs lignes. Deux attributs le permettent : colspan et rowspan.

<table>
    <tr>
        <th colspan="2">Coordonnées</th>
    </tr>
    <tr>
        <td>Nom</td>
        <td>Dupont</td>
    </tr>
    <tr>
        <td>Prénom</td>
        <td>Jean</td>
    </tr>
</table>

• colspan fusionne plusieurs colonnes (extension horizontale).

• rowspan fusionne plusieurs lignes (extension verticale).

Pour mémoriser : col comme colonne, row comme rangée. La valeur indique sur combien de cellules s’étend la fusion (colspan="2" couvre deux colonnes).

Bonnes pratiques pour les tableaux

À faire :

• Réserver <table> aux données tabulaires réelles.

• Toujours inclure <thead> et <tbody>.

• Utiliser <th> pour les en-têtes.

• Styliser avec CSS, sans recourir aux attributs HTML obsolètes.

À éviter :

• Utiliser <table> pour la mise en page : c’est une pratique d’un autre temps, qu’on remplace aujourd’hui par Flexbox ou Grid (étudiés plus loin).

• Les attributs obsolètes border, cellpadding, cellspacing, dont le rôle revient désormais entièrement au CSS.

Médias

Le Web ne serait pas grand-chose sans images, sons et vidéos. HTML5 propose des balises dédiées pour les intégrer nativement, c’est-à-dire sans plug-in externe.

<img> — Images

L’image se déclare avec <img>, une balise auto-fermante qui ne contient pas de contenu. Deux attributs sont obligatoires :

• src : le chemin vers le fichier image.

• alt : le texte alternatif, lu par les lecteurs d’écran et affiché si l’image ne charge pas. Il est aussi pris en compte pour le référencement.

<img src="photo.jpg" alt="Description de la photo" 
     width="600" height="400">

Quelques attributs optionnels utiles : width et height fixent les dimensions (les renseigner évite les sauts de mise en page pendant le chargement), et loading="lazy" diffère le chargement des images hors écran, ce qui améliore les performances sur les pages longues.

Côté formats, on privilégie aujourd’hui WebP (léger et moderne), JPEG pour les photographies, et PNG lorsqu’on a besoin de transparence.

<audio> et <video> — Contenu multimédia

Sons et vidéos suivent une logique commune : une balise conteneur, et une ou plusieurs balises <source> indiquant les fichiers disponibles. Le texte placé à l’intérieur s’affiche en secours si le navigateur ne sait pas lire le média.

Audio :

<audio controls>
    <source src="musique.mp3" type="audio/mpeg">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

Vidéo :

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne supporte pas l'élément vidéo.
</video>

Trois attributs reviennent souvent : controls affiche les commandes de lecture (lecture, pause, volume), autoplay lance la lecture automatiquement, et loop la met en boucle.

⚠️ Méfiez-vous d”autoplay : une vidéo ou un son qui démarre sans prévenir est une mauvaise expérience utilisateur, et la plupart des navigateurs le bloquent désormais (sauf si le son est coupé). À n’utiliser qu’à bon escient.

<iframe> — Contenus embarqués

Rôle : intégrer dans sa page un document HTML externe, comme une fenêtre ouverte sur un autre site.

Usage	Exemple
Vidéo YouTube	<iframe src="https://www.youtube.com/embed/VIDEO_ID">
Carte Google Maps	<iframe src="https://maps.google.com/...">

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        width="560" height="315" 
        title="Vidéo YouTube"
        allowfullscreen>
</iframe>

Notez l’attribut title : sur une <iframe>, il décrit le contenu embarqué pour l’accessibilité, au même titre que l”alt d’une image.

⚠️ Sécurité : une <iframe> exécute du contenu venu d’ailleurs. Évitez d’embarquer des sources non fiables, qui pourraient gêner ou piéger vos visiteurs.

Images et vidéos responsives

Une image insérée telle quelle peut déborder de son conteneur sur un écran étroit. Une règle CSS très simple résout le problème en la faisant s’adapter à la place disponible.

img {
    max-width: 100%; /* Ne dépasse jamais son conteneur */
    height: auto;    /* Conserve les proportions */
}

Le même principe s’applique aux vidéos :

video {
    max-width: 100%;
    height: auto;
}

Le couple max-width: 100% / height: auto est l’un des réflexes les plus utiles du développement web : l’élément ne dépasse jamais la largeur de son parent et conserve ses proportions. Important : cette technique relève du design responsive, que nous étudierons en détail plus loin ; gardez-la simplement en tête pour vos premières pages.