Temps de lecture approximative : 12 minutes
On continue notre apprentissage du HTML5 avec plein de nouvelles balises. Vous avez peut-être été frustré de n'en apprendre que deux dans le chapitre précédent ? Attendez-vous dans ce chapitre à en découvrir beaucoup plus.
Les précédentes balises étaient là pour vous mettre dans le bain de ce nouveau chapitre. Les tableaux en HTML ne sont pas compliqués mais demandent un peu de rigueur. Nous allons aborder pas moins de 7 nouvelles balises. Une fois cette partie du cours assimilée, vous pourrez intégrer des tableaux simples dans vos pages HTML.
<table>Le nom de la balise indique clairement son utilité. Elle permet de déclarer un nouveau tableau. Elle englobe la totalité de ce dernier. On commence toujours par une balise ouvrante <table> et on termine toujours par une balise fermante </table>.
<tr>Les tableaux en HTML sont organisés en lignes et cellules. Une ligne peut avoir une ou plusieurs cellules. La balise qui permet de représenter une ligne est <tr>. C'est donc cette balise <tr> qui englobe les cellules.
<td>Comme expliqué précédemment, les tableaux en HTML sont organisés en lignes et en cellules. Les lignes sont représentées par les balises <tr>, tandis que les cellules sont représentées par la balise <td>. Il peut donc y avoir une ou plusieurs balises <td> à l'intérieur d'un <tr>.
A ce stade et avec les balises que nous venons de découvrir, nous pouvons déjà créer un tableau basique. Sellez votre monture, on se lance.
See the Pen CodePen Home HTML - Chap.8 - <table>, <tr> & <td> by AAymericcccc (@aaymeric) on CodePen.
Nous en sommes au chapitre 8 et la mise en forme des balises par défaut est toujours aussi pauvre (terme poli). On peut, sans trop mentir à personne, dire qu'on touche le fond avec les tableaux. On retrouve tout de même ce que l'on cherche, une organisation en lignes et en cellules. On a bien trois lignes de trois cellules. Vous l'avez peut-être remarqué, il manque les cellules d'en-tête du tableau. On règle ce problème à tombeau ouvert.
Notre HTML pur et dur restera sans saveur jusqu'à ce que nous ajoutions des styles. Pour rappel, cette mise en forme se réalise à l'aide du CSS. Toutefois, si on souhaite faire un test d'affichage et voir des bordures pour les cellules, on peut ajouter l'attribut border sur la balise <table>. Cet attribut détermine en pixels la taille de la bordure de chaque cellule. Exemple <table border="1"> permettra d'obtenir des bordures d'1px pour tous les côtés.
<th>La balise HTML <th> permet de définir une celulle d'en-tête pour un tableau. Elle se place tout comme la balise <td> à l'intérieur d'une ligne <tr>. On retrouve dans une ligne, une ou plusieurs balises d'en-tête. Ci-après l'évolution de notre tableau.
See the Pen CodePen Home HTML - Chap.8 - <table> & <th> by AAymericcccc (@aaymeric) on CodePen.
Pour améliorer la lisibilité de votre code mais également pour cibler davantage vos éléments en CSS, vous pouvez avoir recours aux balises suivantes :
<thead> : cette balise permet d'englober la ou les lignes dans lesquelles sont définis les en-têtes des colonnes
<tbody> : cette balise permet d'englober la ou les lignes qui constituent le corps du tableau
<tfoot> : cette balise permet d'englober la ou les lignes qui forment le pied du tableau. On retrouve parfois dans cette zone des résumés des colonnes.
Ces balises sont facultatives. Vous pouvez les utiliser toutes dans le même tableau, ou seulement une, voir même aucune.
colspan="" et rowspan=""Les attributs colspan="" et rowspan="" se placent uniquement sur la balise <td>. Ils permettent d'étendre la cellule sur plusieurs colonnes ou lignes. L'attribut rowspan="" permet d'étendre une celulle sur plusieurs lignes tandis que colspan="" permet d'étendre la cellule sur plusieurs colonnes. Ci-après un exemple d'utilisation.
See the Pen HTML - Chap. 8 - <table>, rowspan="" et colspan="" by AAymericcccc (@aaymeric) on CodePen.
<hr />Cette balise orpheline permet de représenter des ruptures thématiques au sein de son contenu. La balise <hr /> est représentée par défaut dans les navigateurs par une barre hozitontale. Elle est très simple à utiliser. Ci-dessous un exemple d'utilisation.
See the Pen HTML - Chap. 8 - <hr> by AAymericcccc (@aaymeric) on CodePen.
<details>
Attention, la <details> ne fonctionne pas sous le navigateur Internet Explorer.
Nouveauté dans la version HTML5, la balise <details> permet de faire apparaître ou disparaître une zone de contenu. Derrière cette notion peut-être pas assez claire, se cache quelque chose que tout utilisateur connaît déjà. En effet, nous utilisons quotidiennement ce principe qui permet de déplier et replier des informations. On retrouve cela sur de nombreux sites, mais également dans les systèmes d'exploitation. La balise <details> est accompagnée de la balise <summary> qui correspond au titre qui permettra de déplier et replier le bloc de contenu. Comme toujours, nous allons apprécier la mise en forme par défaut du navigateur.
See the Pen CodePen Home HTML - Chap.8 - <details> by AAymericcccc (@aaymeric) on CodePen.
L'attribut open="" permet de définir le comportement par défaut de la balise <details>. Si l'attribut open="" n'est pas précisé, alors le bloc de contenu est caché. Si à l'inverse l'attribut a pour valeur true, alors celui-ci est visible.
<sub> et <sup>Ces balises permettent d'afficher un texte en indice ou en exposant. Simple et efficace, un exemple d'utilisation ci-dessous.
<p>Je ne connais pas grand chose à la physique mais E = mc<sup>2</sup>.</p>
<p>La molécule d'eau a pour formule H<sub>2</sub>O.</p>Ce nouveau chapitre nous a permis de découvrir de nouvelles balises simples mais aussi les tableaux, une notion incontournable mais un peu plus rigoureuse que le reste. Vous pouvez désormais attaquer les exercices qui concernent les tableaux. Il aura fallu attendre plusieurs chapitres, avant de retomber sur un GIF de notre ami Jack. Dans le prochain et dernier chapitre, nous aborderons les formulaires.