Tables
L’objectif est d’aligner du texte et des images sous la forme de lignes et de colonnes. La syntaxe utilise les éléments HTML suivantes :
<table>: désigne toute la table, contient des <tr><tr>: désigne une ligne, contient des <td><td>: désigne une cellule avec son contenu (image, texte, autre)
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma page</title>
<meta charset="utf-8">
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<td>Nom</td><td>Manvussa</td>
</tr>
<tr>
<td>Prénom</td><td>Gérard</td>
</tr>
<tr>
<td></td>
<td>
<img src="unicorn.svg" width="80">
</td>
</tr>
</table>
</body>
</html>
Voici le résultat visuel de ce exemple :
Les attributs border et cellpadding améliore la présentation mais sont désormais dépréciés (utilisation non recommandée par le W3C), nous verrons au chapitre suivant comment titre profit des styles pour cela.
Dimensions
Les cellules s’étirent de façon à afficher tout leur contenu. De manière général en HTML, le texte s’étire au maximum horizontalement puis procède à des retours à ligne si nécessaire, selon la largeur de la fenêtre. Ce comportement est inchangé dans une table ; il en résulte une table qui peut s’étirer au maximum pour occuper toute la largeur. Si plusieurs colonnes contiennent du texte, une fois la taille des colonnes sans texte déterminée, les colonnes avec texte se répartissent la largeur restante proportionnellement à la taille de leur texte de façon à équilibrer à peu près la hauteur. Vous pouvez analyser cette exemple pour comprendre ce fonctionnement.
Fusion de cellules
Dans cet exemple, nous pourrions vouloir centrer l’image dans la table. Cela passe par la fusion des deux cellules qui composent la ligne de l’image. Les attributs rowspan et colspan prennent pour valeur le nombre de cellules qui suivent (vers la droite ou vers le bas) que doit occuper la cellule qui reçoit ces attributs. C’est donc le nombre de cellules fusionnées soit horizontalement (colpsan) soit verticalement (rowspan). Il faut alors supprimer du code tous les <td> des cellule fusionnées sauf évidemment la première qui contient ce que la cellule va afficher.
Cet exemple montre schématiquement, avec le code correspondant, un cas avec deux fusions.
-
-
<table> <tr> <td rowspan="3"></td> <td></td> <td></td> </tr> <tr> <!-- ici on suprime le 1er td du fait du rowspan --> <td></td> <td></td> </tr> <tr> <!-- idem 1er td --> <td colspan="2"></td> <!-- suppression de ce td car colspan --> </tr> </table>
Pour notre besoin avec la licorne, le code serait le suivant.
-
<table border="1" cellpadding="8"> <tr> <td>Nom</td><td>Manvussa</td> </tr> <tr> <td>Prénom</td><td>Gérard</td> </tr> <tr> <td colspan="2" align="center"> <img src="unicorn.svg" width="80"> </td> </tr> </table> -
Encore une foi, ne retenez pas l’attribut align qu’il ne faudra pas utiliser dès les styles vus.
Compléments
Vous pouvez ajouter une légende à une table en insérant une élément <caption> en premier enfant de <table>. Elle s’affiche par défaut au dessus du tableau, centrée. Ce placement peut être changé par les styles.
De plus, en remplaçant les <td> par <th> dans la première ligne, nous désignons celle-ci comme ligne d’entête. L’aspect change quelque peu mais encore une fois tout le potentiel de cette balise apparaîtra avec les styles.
Dernier point, la structure <colgroup>/<col> permet de formater les colonnes sans avoir à le faire pour chaque <td>. Par exemple fixer la largeur ou la couleur de fond d’une colonne peut se faire sur <col> une seul fois plutôt que dans chaque élément <td>. Le code ressemble à ceci, en début de <table> :
<table>
<tr>
<colgroup>
<col width="40%">
<col width="40%">
<col width="20%">
</colgroup>
Ici nous fixons la largeur des colonnes en proportion de la largeur totale. L’exemple complet avec la licorne est ici.
Exercice 1
L’objectif est simple : reproduire en HTML le tableau suivant. Pour le fond gris, que saurons faire chapitre suivant, vous pouvez ajouter cet attribut aux cellules à colorer : style="background-color: #e0e0e0".
Formulaires
Pour permettre de recueillir des informations de l’utilisateur, nous utilisons un formulaire composé de zone de saisie souvent appelées contrôles de formulaire ou champ de saisie. Le formulaire est rempli par l’utilisateur puis envoyé au serveur, en général par un bouton, pour être traité et souvent enregistré en base de données. Cette partie de traitement ne nous concerne pas car elle fait appel à un langage de script côté serveur comme PHP. Nous travaillons ici uniquement sur l’interface qui s’affiche dans le navigateur.
Un formulaire est représenté en HTML par la balise <form>, qui prend deux attributs qui concernent son traitement, la page à laquelle envoyer le formulaire avec l’attribut action et la façon de l’envoyer avec method. A l’intérieur nous plaçons les éléments HTML représentant des contrôles visuels avec les balises <input>, <select>, <textarea> et <button>. Tous ces éléments ont pour attributs communs, utiles dans la gestion des formulaires :
id: nous l’avons déjà vu dans les premières leçons, cet attribut identifie de manière unique un élément, il sert ici à faire le lien entre le contrôle de formulaire et une étiquettename: nom associé à un contrôle de formulaire pour son traitement ultérieur par un script côté serveur (pas indispensable au stade de la maquette HTML), utile toutefois pour les boutons radiovalue: valeur affichée dans le champ de saisie mais aussi valeur saisie par l’utilisateur, que l’on peut interceptée par code côté client en Javascript ou recevoir dans le code côté serveur pour traitement
Contrôles de formulaire
L’élément <input> est le principal pour représenter un contrôle de formulaire, avec une différentiation selon l’attribut type. Voici résumé dans ce tableau les contrôles de formulaire les plus courants, à connaître absolument.
| nom et attributs | code | rendu visuel |
| Zone de texte (simple ligne)
|
Ville <input type="text" size="20"/> |
Ville |
Zone de texte multilignes
|
Message<br/> <textarea rows="4" cols="20">Votre texte</textarea> |
Message |
| Liste déroulante |
<select> <option value="1">Choix 1</option> <option value="2">Choix 2</option> <option value="3">Choix 3</option> </select> |
|
| Case à cocher |
Je suis d'accord <input type="checkbox"/> |
Je suis d’accord |
Bouton radio
|
M <input type="radio" name="sexe"/> F <input type="radio" name="sexe"/> |
M F |
Bouton de commande (simplement « bouton »)
|
<input type="button" value="OK"/><br/> <input type="submit" value="Envoyer"/><br/> <button type="submit">Je valide</button><br/> |
Premier point important à noter : tous les contrôles s’affichent comme des éléments en ligne (définition exacte vues au prochain chapitre, il s’agit des éléments de « texte » comme <strong> ou <img>). I faut donc un <br> ou <br/> pour provoquer un retour à la ligne, ou tout autre moyen que nous verrons avec les styles.
Deuxième point particulier, nous avons inséré directement le code des contrôles de formulaire dans ce cours en ligne, lui même écrit en HTML. L’aspect est donc celui de ce cours, notamment pour les boutons ! Si vous voulez tester et voir l’aspect par défaut des contrôles de formulaire, ouvrez cette page dans le navigateur.
Il existent d’autres contrôles de formulaire introduit en HTML 5 en changeant la valeur de l’attribut type. Je vous invite à consulter par exemple le site w3schools pour obtenir une liste complète de ces nouveaux champs de saisie.
<form> qui englobe tous les contrôles dont les valeurs seront envoyées au serveur par le bouton de type submit.Plusieurs formulaires peuvent cohabiter dans une page, chacun étant indépendant et envoyé indépendamment des autres aux serveurs.
Bloc de contrôles
Nous pouvons regrouper plusieurs zones de saisie dans un encadré avec un titre comme ceci :
Le code fait appel aux balises <fieldset> et <legend>. Pour cet exemple :
<fieldset> <legend>Identité</legend> Nom <input type="text" size="20"/><br/> Prénom <input type="text" size="20"/> </fieldset> <fieldset> <legend>Message</legend> <textarea rows="4" cols="20"></textarea><br/> Texte brut<input type="radio" name="type_cont"/> HTML<input type="radio" name="type_cont"/><br/> </fieldset>
A noter que le cadre prendre toute la largeur de la page, comportement normal et modifiable comme nous le verrons avec les styles.
Etiquettes
Toujours dans le soucis d’améliorer l’accessibilité et l’interprétation de votre document, la norme HTML 5 préconise d’utiliser une nouvelle balise <label> pour associer une étiquette au contrôle de saisie correspondant.
Pour cela, nous devons identifier le contrôle par l’attribut id, déjà abordé, qui sert aussi au code Javascript et aux styles. Il faut donner une valeur d’identifiant unique dans le document, c’est-à-dire que deux éléments ne peuvent pas porter le même identifiant. Ensuite, il suffit de rattacher cette identifiant à une étiquette par l’attribut for, comme ceci :
<label for="nom">Nom</label> <input type="text" id="nom" size="20"/><br/> <label for="prenom">Prénom</label> <input type="text" id="prenom" size="20"/>
Oui, visuellement cela ne change rien ! Mais outre les besoins de compréhension de votre document par un « robot » (moteur de recherche, logiciel de synthèse vocale qui décrit votre page à un malvoyant), votre document est plus clair à lire et à comprendre par un intégrateur et de plus nous pourrons nous appuyer sur ce balisage supplémentaire pour affecter des styles. Que des avantages (et un peu de saisie en plus) !
Présentation
C’est le point délicat pour les formulaires que l’on souhaite parfois très beaux ou au moins bien présentés. Par défaut, tous les éléments <input> et autres sont alignés avec le texte. Avant de voir les styles, nous pourrons essayer de bien présenter un formulaire en le plaçant dans une table, comme à l’ancienne. A essayer mais aussi à oublier car nous aurons des outils avec les styles pour cela, en essayant de garder un code HTML léger.