1 : Rappels HTML

Quelques questions

  1. Avez-vous passé de bonnes vacances ?
  2. Web vs. Internet ?
  3. Statique vs. dynamique ?
  4. Comment qualifiez-vous votre niveau en HTML ?
  5. En CSS ?
  6. En JavaScript ?
  7. En langages de programmation ?
  8. Avez-vous déjà entendu parler de référentiels qualité ou accessibilité ?
  9. Connaissez-vous le W3C ?
  10. Avez-vous connaissance de certains frameworks ? CMS ?
  11. Connaissez-vous le design responsif ? Les grilles css ?
  12. Et les préprocesseurs CSS ?

Concepts à garder en tête

Une multitude de terminaux

Le défi de créer des sites internet pour tous va être de gérer les différentes tailles d’écrans et les différentes vitesses de connexions, qui ne sont plus toujours liées.

Aujourd’hui un grand nombre de nos visiteurs utilise un smartphone ou une tablette. Ceci juste pour préciser que ce que vous voyez sur votre écran lorsque vous créez un site web ne sera pas forcément l’expérience de tout le monde.

Avant, on pouvait être à peu près sur que nos utilisateurs visitaient  nos sites assis à leur bureau, sur un écran assez grand, et avec une connexion assez rapide. Nous avions juste à nous soucier de la diversité des navigateurs graphiques et d’ajouter quelques lignes de codes pour être supporté par les anciennes versions d’Internet Explorer .

L’arrivée des iPhones et d’Android et leur croissance exponentielle a bouleversé tout ça. Les tailles d’écrans se sont multipliées. De même pour les navigateurs sur les télés, les consoles de jeux et autres systèmes.

https://screensiz.es/

https://screensizemap.com/

Respecter les standards

Alors comment gérer cette diversité ? Un bon départ est de respecter les standards documentés par le Word Wide Web Consortium (W3C). Respecter les standards, c’est le premier fondement pour s’assurer un rendu correct sur tous les navigateurs conformes aux normes, soient à peu près 99% des navigateurs dans l’usage. C’est aussi le meilleur moyen de s’assurer que le site sera bien interprété par les évolutions des navigateurs, et les solutions futures.

https://validator.w3.org/

Enrichissement progressif

Avec la multitude de navigateur, vient une multitude de niveaux de support des standards. En fait aucun navigateur n’a implémenté 100% des standards. En plus du fait que les utilisateurs peuvent paramétrer leurs navigateurs, par exemple en désactivant JavaScript.

http://acid3.acidtests.org/

L’enrichissement progressif est une stratégie pour gérer les navigateurs dont on ne connais pas a priori les capacités. En créant votre site ainsi, vous commencez par vous assurer que l’expérience de base permettant d’accéder aux contenus et aux fonctions vitales du site sur la plupart des navigateurs, même les plus rudimentaires, comme peuvent l’être les aides techniques.

A partir de là vous ajoutez des couches qui proposeront une expérience plus aboutie aux utilisateurs qui disposent de moyens de consultation plus complets, en ajoutant des animations ou autres, qui ne sont pas cruciales pour la marque.

Stratégie de création

Quand le HTML est écrit dans un ordre logique et que les éléments sont utilisés avec une sémantique correcte, il est utilisable sur la pus grande art des navigateurs, y compris les plus anciens, les plus récents, les mobiles ou les assistances techniques. L’apparence ne sera pas exactement la même partout, mais le contenu sera disponible et accessible.

Stratégie de mise en forme

A partir de là vous pouvez créer les styles que vous voulez, des plus simples aux plus évolués. Les directives qui ne seront pas comprises par certains navigateurs seront ignorées.

Vous devez juste vous appliquer à mettre en forme l’expérience de base en premier, puis à ajouter les améliorations une fois que le minimum requis est posé.

Stratégie de script

Comme pour les autres technologies, il y  a de grandes divergences dans la manière dont les navigateurs interprètent le JavaScript, particulièrement sur les terminaux hors ordinateurs de bureau, et certains utilisateurs le désactivent purement. La première règle de l’enrichissement progressif est de s’assurer que toutes les fonctions de base, comme la navigation, ou les tâches essentielles, comme la saisie d’un formulaire, sont intactes même si JavaScript est désactivé. De cette manière vous garantissez le fonctionnement de votre service, tout en l’améliorant pour ceux qui disposent de JavaScript.

Accessibilité

Nous avons évoqué la multitude des navigateurs qui peut exister, mais nous avons principalement parlé des navigateurs graphiques, contrôlés par une souris ou par le toucher. Il est indispensable de garder en tête que des personnes naviguent sur le web en utilisant d’autres moyens de consultation et d’interaction. Certains ne disposent que d’un clavier pour interagir avec une page, d’autres consultent les sites à l’aide d’une plage Braille, ou en utilisant le zoom, ou un vocalisateur de page, ou toute autre solution.

Nous devons faire en sorte quand nous créons des pages que ces utilisateurs rencontrent le moins d’obstacles possible, quelles que soient leurs capacités physiques, cognitives, leur matériel, leur culture ou leur connexion.

Les techniques et les stratégies de mise en oeuvre de l’accessibilité sont également bénéfiques aux autres utilisateurs, ceux qui ont du matériel ancien, les personnes âgées, les personnes en bas débit…

Les sites accessibles sont aussi mieux perçus par les moteurs de recherche. Google, “l’aveugle le plus connu du web”, recommande de tester ses sites avec un navigateur textuel pour plus d’efficacité.

Rappels HTML

Structure d’un document

Il est recommandé qu’un document HTML ait la structure minimale suivante :

<!doctype html>
<html lang="fr-FR" >
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
 
<body>
  <!-- contenu de la page -->
</body>
 
</html>

Mémento des balises HTML

Voici une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines dans le cours, mais il y en a d’autres que nous n’avons pas eu l’occasion d’étudier. Généralement, les balises que nous n’avons pas étudiées sont des balises un peu plus rarement utilisées.

Vous pouvez vous servir de cette chapitre comme d’un aide-mémoire lorsque vous développez votre site web.

Attention, j’insiste : cette annexe n’est pas complète et c’est volontaire. Je préfère mettre moins de balises et garder seulement celles qui me semblent les plus utiles dans la pratique.

Une référence exhaustive des éléments HTML est fournie sur le site du Mozilla Developer Network : https://developer.mozilla.org/fr/docs/Web/HTML/Element

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d’une page web.

BaliseDescription
<html>Balise principale
<head>En-tête de la page
<body>Corps de la page
Balises de premier niveau

Code minimal d’une page HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
    </head>

    <body>
      <!-- ICI vient le contenu à afficher dans la page -->
    </body>
</html>

Balises d’en-tête

Ces balises sont toutes situées dans l’en-tête de la page web, c’est-à-dire entre <head> et </head> :

BaliseDescription
<link />Liaison avec une feuille de style
<meta />Métadonnées de la page web (charset, mots-clés, etc.)
<script>Code JavaScript
<style>Code CSS
<title>Titre de la page
Balises d’en-tête

Balises de structuration du texte

BaliseDescription
<abbr>Abréviation
<blockquote>Citation (longue)
<cite>Citation du titre d’une œuvre ou d’un évènement
<q>Citation (courte)
<sup>Exposant
<sub>Indice
<strong>Mise en valeur forte
<em>Mise en valeur normale
<mark>Mise en valeur visuelle
<h1>Titre de niveau 1
<h2>Titre de niveau 2
<h3>Titre de niveau 3
<h4>Titre de niveau 4
<h5>Titre de niveau 5
<h6>Titre de niveau 6
<img />Image
<figure>Figure (image, code, etc.)
<figcaption>Description de la figure
<audio>Son
<video>Vidéo
<source>Format source pour les balises <audio> et <video>
<a>Lien hypertexte
<br />Retour à la ligne
<p>Paragraphe
<hr />Ligne de séparation horizontale
<address>Adresse de contact
<del>Texte supprimé
<ins>Texte inséré
<dfn>Définition
<kbd>Saisie clavier
<pre>Affichage formaté (pour les codes sources)
<progress>Barre de progression
<time>Date ou heure
Balises de structuration du texte

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

BaliseDescription
<ul>Liste à puces, non numérotée
<ol>Liste numérotée
<li>Élément de la liste à puces
<dl>Liste de définitions
<dt>Terme à définir
<dd>Définition du terme
Balises de listes

Balises de tableau

BaliseDescription
<table>Tableau
<caption>Titre du tableau
<tr>Ligne de tableau
<th>Cellule d’en-tête
<td>Cellule
<thead>Section de l’en-tête du tableau
<tbody>Section du corps du tableau
<tfoot>Section du pied du tableau
Balises de tableau

Balises de formulaire

BaliseDescription
<form>Formulaire
<fieldset>Groupe de champs
<legend>Titre d’un groupe de champs
<label>Libellé d’un champ
<input />Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea>Zone de saisie multiligne
<select>Liste déroulante
<option>Élément d’une liste déroulante
<optgroup>Groupe d’éléments d’une liste déroulante
Balises de formulaire

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

BaliseDescription
<header>En-tête
<nav>Liens principaux de navigation
<footer>Pied de page
<section>Section de page
<article>Article (contenu autonome)
<aside>Informations complémentaires
Balises sectionnantes

Balises génériques

Les balises génériques sont des balises qui n’ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc.
Parfois, on a besoin d’utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l’une est en ligne, l’autre est en bloc.

BaliseDescription
<span>Balise générique de type inline
<div>Balise générique de type block
Balises génériques

Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style:

  • class : indique le nom de la classe CSS à utiliser.
  • id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise. Vous pouvez vous servir de l’ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
  • style : cet attribut vous permet d’indiquer directement le code CSS à appliquer. Vous n’êtes donc pas obligés d’avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu’il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.

Les images

Les différents formats d’images

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l’ordinateur fait des calculs pour qu’elles soient moins lourdes et donc plus rapides à charger.

Il existe un format adapté à chaque image

Si on résume, voici quel format adopter en fonction de l’image que vous avez :

  • Une photo : utilisez un JPEG.
  • N’importe quel graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits ou éventuellement un GIF.
  • N’importe quel graphique avec beaucoup de couleurs : utilisez un PNG 24 bits.
  • Une image animée : utilisez un GIF animé.
Les erreurs à éviter
Bannissez les autres formats

Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros. Ils ne sont pas du tout adaptés au Web. On peut en mettre sur son site mais le chargement sera vraiment extrêmement long !

Choisissez bien le nom de votre image

Si vous voulez éviter des problèmes, prenez l’habitude d’enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent, par exemple :  mon_image.png.

Vous pouvez remplacer les espaces par le caractère underscore (« _ »).

Insérer une image

L’élément img dit au navigateur : place une image ici.

Lorsque votre navigateur voit un élément img, il effectue une requête au serveur pour obtenir le fichier image à afficher. Par défaut elle sera affichée en ligne, c’est à dire dans le flux du texte. Et par défaut aussi le bord du bas de l’image sera aligné avec la ligne basse du texte. C’est un élément vide, qui ne nécessite pas de contenu.

<p>Cet été faites vos pizza <img src="pizza.jpg" alt=""> au grill !</p>

Les images SVG

On ne peut pas évoquer les images sur une page web sans évoquer SVG (pour “Scalable Vector Graphics“).

Au lieu d’être composés d’une grille de pixels, les SVG sont faits de formes et de chemins, définis mathématiquement, et écrits en texte.

De même que le HTML dispose d’élément pour les paragraphes (p) ou pour les tableaux (table), SVG dispose d’éléments pour définir des formes telles que les rectangles (rect) les cercles (circle), ou les chemins (path).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
    <rect width="300" height="180" fill="purple" rx="20" ry="20" />
    <text x="40" y="114" fill="Bonjour !" font-family="Verdana-Bold" font-size="72">
        Bonjour !
    </text>
</svg>

Ils sont très pratiques car :

  • ils sont légers et offrent de meilleures performances ;
  • ils sont vectoriels et peuvent être redimensionnés sans perte de qualité ;
  • ils sont en texte, intégrés au HTML et peuvent être compressés avec des outils comme Gzip, tout comme le HTML ;
  • ils peuvent être animés ;
  • ils peuvent être modifiés avec CSS ;
  • vous pouvez leur ajouter de l’interactivité, comme au survol avec un pointeur par exemple.

Il est possible aussi d’intégrer une image svg avec l’élément img :

<img src="pizza.svg" alt="Pizza">

Les formulaires

Il y a deux aspects à un formulaire. Le premier est ce que vous voyez sur la page elle-même, construit à partir des balises HTML. L’autre composant d’un formulaire est le programme qui va effectuer le traitement des données collectées côté serveur.

L’élément form

L’élément form est un conteneur pour tous les autres éléments des formulaires. Il peut aussi inclure des éléments blocks (h1, p, …).
Vous devez ajouter deux attributs à la balise form :

L’attribut “action”

C’est l’adresse de la page ou du programme qui va traiter les informations. Cette page se chargera de vous envoyer un e-mail avec le message si c’est ce que vous voulez, ou bien d’enregistrer le message avec tous les autres dans une base de données. Cela ne peut pas se faire en HTML ni CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : PHP par exemple.

L’attribut “method”

Cet attribut indique par quel moyen les données vont être envoyées au serveur. Il existe deux solutions pour envoyer des données sur le Web :

  • method="get": c’est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l’adresse de la page
  • method="post": c’est la méthode la plus utilisée pour les formulaires car elle permet d’envoyer un grand nombre d’informations. Les données saisies dans le formulaire ne transitent pas par la barre d’adresse.
<p>Texte avant le formulaire</p>
<form method="post" action="traitement.php">
   <p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>

Les éléments de saisie

Simple zone de texte
<form method="post" action="traitement.php">
    <input type="text" name="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</form>
  • L’attribut “type” : définit le type de champ de saisie à utiliser, dans ce cas un champ de saisie de texte simple.
  • L’attribut “name” : est obligatoire, il spécifie le nom de la variable qui va accueillir la valeur saisie par l’internaute dans ce champ.
  • L’attribut “value” : renseigne la valeur par défaut d’un champ.
  • Les attributs “maxlenght” et “minlenght” : indiquent une fourchette de validité de la valeur saisie.
  • L’attribut “size” : définit la longueur du champ, en nombre de caractère.
Les libellés

Ils sont utilisés pour associer une étiquette, ou libellé, à un champ de saisie.

<form method="post" action="traitement.php">
    <label for="pseudo">Votre pseudo :</label>
    <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</form>

L’association implicite : c’est quand le champ de saisie est situé à l’intérieur du label.

<form method="post" action="traitement.php">
    <label>
      Votre pseudo :
      <input type="text" name="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
    </label>
</form>
Zone de mot de passe

Comme un champ texte, excepté que les caractères saisis ne s’affichent pas dans le navigateur.

<input type="password" name="motdepasse" maxlength="10" />
Zone de texte multiligne
<textarea name="votre-message" rows="6" cols="64">Le texte par défaut ici...</textarea>
Les zones de saisie enrichies
  • nombre entier (type="number"),
  • email (type="email"),
  • URL (type="url"),
  • date (type="date"),
  • mois (type="month"),
  • semaine (type="week"),
  • date/heure (type="datetime"),
  • heure (type="time"),
  • plage de valeurs (type="range"),
  • téléphone (type="tel"),
  • couleur (type="color").
Les éléments d’options
les cases à cocher
<form method="post" action="traitement.php">
   <p>
       Cochez les aliments que vous aimez manger :<br />
       <input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
       <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
       <input type="checkbox" name="epinards" id="epinards" checked="checked" /> <label for="epinards">Epinards</label><br />
       <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
   </p>
</form>

Cochez les aliments que vous aimez manger :



les zones d’options
<form method="post" action="traitement.php">
   <p>
       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
       <input type="radio" name="age" value="medium15-25" id="medium15-25" checked="checked" /> <label for="medium15-25">15-25 ans</label><br />
       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
   </p>
</form>

Veuillez indiquer la tranche d’âge dans laquelle vous vous situez :



les listes déroulantes.
<form method="post" action="traitement.php">
   <p>
       <label for="pays">Dans quel pays habitez-vous ?</label><br />
       <select name="pays" id="pays">
           <optgroup label="Europe">
               <option value="france" selected="selected">France</option>
               <option value="espagne">Espagne</option>
               <option value="italie">Italie</option>
               <option value="royaume-uni">Royaume-Uni</option>
           </optgroup>
           <optgroup label="Amérique">
               <option value="canada">Canada</option>
               <option value="etats-unis">Etats-Unis</option>
           </optgroup>
           <optgroup label="Asie">
               <option value="chine">Chine</option>
               <option value="japon">Japon</option>
           </optgroup>
       </select>
   </p>
</form>


Champ de téléversement d’un fichier

Les formulaires peuvent envoyer plus que des données. Ils peuvent être utilisés aussi pour transmettre un document externe, depuis le disque dur de l’utilisateur. Par exemple, une imprimerie peut avoir à demander des créations graphiques pour une commande de cartes de visite.

L’attribut enctype doit alors être stipulé dans l’élément form, et il doit avoir pour valeur multipart/form-data.

<form action ="traitement.php" method="post" enctype="multipart/form-data">
   <label for="photo">Envoyez la photo de profil pour votre avatar</label>
   <input type="file" name="photo" id="photo" />
</form>
Les champs cachés
<input type="hidden" name="reference" value="formulaire contact" />
Regrouper des champs

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset>peut contenir une légende avec la balise <legend>.

<form method="post" action="traitement.php">
   <fieldset>
       <legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
 
       <label for="nom">Quel est votre nom ?</label>
       <input type="text" name="nom" id="nom" />
 
       <label for="prenom">Quel est votre prénom ?</label>
       <input type="text" name="prenom" id="prenom" />
  
       <label for="email">Quel est votre e-mail ?</label>
       <input type="email" name="email" id="email" />
   </fieldset>
  
   <fieldset>
       <legend>Votre souhait</legend> <!-- Titre du fieldset -->
       <p>
           Faites un souhait que vous voudriez voir exaucé :
           <input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>
           <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>
           <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>
           <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>
       </p>
       <p>
           <label for="precisions">Si "Autre", veuillez préciser :</label>
           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
       </p>
   </fieldset>
</form>
Sélectionner automatiquement un champ
<input type="text" name="prenom" id="prenom" autofocus />
Rendre un champ obligatoire
<input type="text" name="prenom" id="prenom" required />
Le bouton d’envoi

Il ne nous reste plus qu’à créer le bouton d’envoi. Là encore, la balise <input /> vient à notre secours. Elle existe en quatre versions :

  • type="submit" : le principal bouton d’envoi de formulaire. C’est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l’attributactiondu formulaire.
  • type="reset" : remise à zéro du formulaire.
  • type="image" : équivalent du bouton submit, présenté cette fois sous forme d’image. Rajoutez l’attribut src pour indiquer l’URL de l’image.
  • type="button" : bouton générique, qui n’aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.
<input type="submit" value="Envoyer" />

Les tableaux de données

Aujourd’hui les tableaux HTML ne sont utilisés que pour des tableaux de données. Il est plutôt conseillé de faire la mise en page en CSS. Plus souple, plus précis, plus facile et surtout plus évolutif, misez tout ce qui est visuel sur le CSS. Un tableau HTML ne doit servir que de base d’un tableau.

Créer un tableau avec la balise <table>

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat:

Cellule 1 de la ligne 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 2 de la ligne 2

Les entêtes

<table>
    <tr>
        <th>Entete 1</th>
        <th>Entete 2</th>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Entete 1Entete 2
Cellule 1 de la ligne 2Cellule 2 de la ligne 2

Colspan, fusionner des cellules horizontalement

Vous pouvez fusionner des cellules horizontalement avec l’attribut colspan.

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td colspan="2">
            FUSION de cellule
        </td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 3</td>
        <td>Cellule 2 de la ligne 3</td>
    </tr>
</table>

Résultat :

Cellule 1 de la ligne 1Cellule 2 de la ligne 1
FUSION de cellule
Cellule 1 de la ligne 3Cellule 2 de la ligne 3

Rowspan, fusionner des cellules verticalement

<table>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td rowspan="2">
        FUSION cellule
        </td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
    <tr>
        <td>Cellule 2 de la ligne 3</td>
    </tr>
</table>

Résultat :

Cellule 1 de la ligne 1Cellule 2 de la ligne 1
FUSION cellule Cellule 2 de la ligne 2
Cellule 2 de la ligne 3

Légende en haut des tableaux HTML

<table>
    <caption>Legende en haut</caption>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Legende en haut
Cellule 1 de la ligne 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 2 de la ligne 2

Légende en bas des tableaux HTML

<table>
    <caption align="bottom">Legende en bas</caption>
    <tr>
        <td>Cellule 1 de la ligne 1</td>
        <td>Cellule 2 de la ligne 1</td>
    </tr>
    <tr>
        <td>Cellule 1 de la ligne 2</td>
        <td>Cellule 2 de la ligne 2</td>
    </tr>
</table>

Résultat :

Legende en bas
Cellule 1 de la ligne 1Cellule 2 de la ligne 1
Cellule 1 de la ligne 2Cellule 2 de la ligne 2

Les balises <thead>, <tbody> et <tfoot>

Pour faire les choses proprement un tableau se contruit comme ceci :

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>c1</td>
            <td>c2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>c3</th>
            <th>c4</th>
        </tr>
    </tfoot>
</table>

L’accessibilité des tableaux

Connecter les cellules aux en-têtes
l’attribut scope

L’attribut scope permet d’associer aux en-têtes à la ligne(row), la colonne (col), un groupe de lignes (comme tbody) (rowgroup), ou un groupe de colonnes (colgroup).

headers

Pour des tables plus complexes, pour lesquelles l’attribut scope ne suffit pas, l’attribut headers peut être utilisé dans une cellule td pour désigner explicitement l’en-tête auquel il est associé en utilisant son id.

<th id="diametre">Diamètre</th>
<!-- beaucoup d'autres cellules -->
<td headers="diametre">.38</td>
<!-- beaucoup d'autres cellules -->