Temps de lecture : 15 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.
Elle permet d'ajouter un tableau à notre page, son nom 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>.
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.
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 c'est pas dohi. Sellez votre monture, on se lance.
<h1>Mes Animés préférés</h1>
<table>
<tr>
<td>Naruto</td>
<td>Seven deadly</td>
<td>Hunter x Hunter</td>
</tr>
<tr>
<td>Solo leving</td>
<td>DBZ</td>
<td>Toriko</td>
</tr>
<tr>
<td>Boji</td>
<td>Baki</td>
<td>Death note</td>
</tr>
</table>
| Naruto | Seven deadly | Hunter x Hunter |
| Solo leving | DBZ | Toriko |
| Boji | Baki | Death note |
Nous sommes au chapitre 8 et nos mise en forme son toujours aussi merdique. là on touche le fond avecc les tableaux cependant 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 tout de suite.
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'1 pixel pour tous les côtés.
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.
<h1>Mes Animés préférés</h1>
<table>
<tr>
<th>Groupe 1</th>
<th>Groupe 2</th>
<th>Groupe 3</th>
</tr>
<tr>
<td>Naruto</td>
<td>Seven deadly</td>
<td>Hunter x Hunter</td>
</tr>
<tr>
<td>Solo leving</td>
<td>DBZ</td>
<td>Toriko</td>
</tr>
<tr>
<td>Boji</td>
<td>Baki</td>
<td>Death note</td>
</tr>
</table>
| Groupe 1 | Groupe 2 | Groupe 3 |
|---|---|---|
| Naruto | Seven deadly | Hunter x Hunter |
| Solo leving | DBZ | Toriko |
| Boji | Baki | Death note |
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 :
Ces balises sont facultatives. Vous pouvez les utiliser toutes dans le même tableau, ou seulement une, voir même aucune.
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.
<h1>Mes Animés préférés</h1>
<table>
<tr>
<th>Groupe 1</th>
<th>Groupe 2</th>
<th>Groupe 3</th>
</tr>
<tr>
<td>Naruto</td>
<td rowspan="2">Seven deadly</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Solo leving</td>
<td>DBZ</td>
<td>Toriko</td>
</tr>
<tr>
<td>Boji</td>
<td>Baki</td>
<td>Death note</td>
</tr>
</table>
| Groupe 1 | Groupe 2 | Groupe 3 |
|---|---|---|
| Naruto | Seven deadly | |
| Solo leving | DBZ | Toriko |
| Boji | Baki | Death note |
Attention, la <details> ne fonctionne pas sous le navigateur Internet Explorer.
permet de faire apparaître ou disparaître une zone de contenu. 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. Nous avons aussi l'attribut open="" qui 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.
<details>
<summary>Mes Animés préférés</summary>
<p>mes coupds de coeur :</p>
<ul>
<li>Naruto</li>
<li>Seven deadly</li>
<li>Hunter x Hunter</li>
</ul>
</details>
<details open="true">
<summary>Mes Animés préférés</summary>
<p>mes coupds de coeur :</p>
<ul>
<li>Naruto</li>
<li>Seven deadly</li>
<li>Hunter x Hunter</li>
</ul>
</details>
mes coupds de coeur :
mes coupds de coeur :
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>.
La molécule d'eau a pour formule H<sub>2</sub>O..
</p>
Je ne connais pas grand chose à la physique mais E = mc2.
La molécule d'eau a pour formule H2O..
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. Dans le prochain et dernier chapitre, nous aborderons les formulaires.
Ce cours sur le HTML en est un parmi tant d'autres. Le web regorge de ressources sur le développement web. Celui-ci a été rédigé par mes soins et est orienté pour les débutants. Il est non-exhaustif. Si vous repérez une erreur ou un oubli, vous pouvez bien évidemment me contacter. me contacter
Ce cours a été rédigé en mars 2025.