Détails: Écrit par : Jeremie Bellanger; Catégorie : Tutos HTML; Mis à jour : 9 Avril 2025

Chapitre 4 : Ajoutons des listes et des tableaux en HTML

Pour continuer à améliorer notre page HTML, nous allons ajouter des listes et des tableaux ! 😃

Les différents types de listes

Il existe en HTML plusieurs types de listes. Nous allons en voir 2 ici :

Les listes non-ordonnées ou listes à puces qui permettent d'énumérer une suite d’informations.

Pour en créer une, on utilise les balises <ul> </ul> et pour remplir cette liste d’éléments on utilise les balises <li> </li> pour définir chaque élément de la liste. Cela donne par exemple :

<ul>
   <li>Élément</li>
   <li>Élément</li>
   <li>Élément</li>
</ul>

Soit :

Élément
Élément
Élément

Les listes ordonnées (1, 2, 3...) qui servent à classer des informations pour les lister dans un ordre précis.

On en crée une avec les balises <ol> </ol> et tout comme pour les listes non-ordonnées, on la remplit avec les balises <li> </li>. Ce qui donne par exemple :

<ol>
   <li>Élément 1</li>
   <li>Élément 2</li>
   <li>Élément 3</li>
</ol>

Soit :

Élément 1
Élément 2
Élément 3

Notez enfin qu'on peut imbriquer les listes les unes dans les autres, comme par exemple :

<ul>
   <li>Élément</li>
   <li>Élément</li>
      <ol>
         <li>Élément 1</li>
         <li>Élément 2</li>
         <li>Élément 3</li>
      </ol>
   <li>Élément</li>
</ul>

Qui donne :

Élément
Élément

Élément 1
Élément 2
Élément 3

Élément

Les tableaux

Pour créer un tableau en HTML, on utilise 3 balises :

<table> qui définit la création d'un tableau.
<tr> pour table row qui permet de définir chaque ligne du tableau.
<td> pour table data qui définit chaque cellule (case) du tableau.

En plus de ces 3 balises, on trouve aussi <th> qui permet de définir les titres des colonnes du tableau, en général dans la première ligne ou <tr>.

Voilà un exemple :

<table>
   <tr>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Âge</th>
   </tr>
   <tr>
      <td>Balsem</td>
      <td>Laura</td>
      <td>15 ans</td>
   </tr>
   <tr>
      <td>Guillon</td>
      <td>Kevin</td>
      <td>19 ans</td>
   </tr>
</table>

Ce qui donne :

Nom	Prénom	Âge
Balsem	Laura	15 ans
Guillon	Kevin	19 ans

N.B. : Si votre tableau n'a pas de bordure, vous pouvez mettre <table border="1"> à la place de <table>.

Voilà pour l'essentiel. Il existe d'autres possibilités pour personnaliser votre tableau et je vous laisse chercher, si vous en avez besoin. 😉

TP 3

Vous poursuivrez votre page html qui parle de votre passion en rajoutant au moins une liste et un tableau.

Voic un exemple :

Ma passion pour le cinéma

Le cinéma me passionne car il offre une évasion divertissante, des récits captivants et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en étant une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, tout en étant un reflet de la culture et de l'histoire.

Mon film préféré : Lyra, Chroniques de l'Éther

Genre : Fantasy épique

Synopsis : Dans un monde où la magie est à la fois source de vie et de destruction, une jeune orpheline nommée Lyra découvre qu'elle est la dernière descendante d'une lignée de gardiens, les seuls capables de maîtriser l'Éther, l'énergie magique primordiale.

Lyra est propulsée dans une aventure épique à travers des royaumes fantastiques, des forêts enchantées aux cités flottantes, pour apprendre à maîtriser ses pouvoirs et affronter une force obscure qui menace de plonger le monde dans le chaos.

Sur son chemin, elle rencontre des alliés improbables : un elfe taciturne mais loyal, un nain bourru mais sage, et un magicien excentrique mais puissant. Ensemble, ils devront déjouer les complots, affronter des créatures mythologiques, et découvrir les secrets d'une ancienne prophétie qui révèle le destin de Lyra et du monde.

Thèmes :

Le pouvoir de la magie et ses responsabilités
Le destin et le libre arbitre
L'amitié et la loyauté
La lutte entre le bien et le mal
La découverte de soi et l'acceptation de son héritage

Personnage	Histoire	Particularités
Lyra	Orpheline élevée dans un village isolé, elle découvre qu'elle est la dernière descendante d'une lignée de gardiens de l'Éther.	Courageuse, déterminée, mais parfois impulsive. Elle possède un lien unique avec l'Éther et apprend à maîtriser ses pouvoirs au fil de son voyage.
Elara	Elfe taciturne et solitaire, elle est une experte dans l'art du combat et possède une connaissance approfondie des anciennes traditions elfiques.	Loyale, protectrice, mais parfois froide et distante. Elle rejoint Lyra pour expier une faute passée et protéger le monde de la menace obscure.
Grum	Nain bourru et sage, il est un maître forgeron et un gardien des traditions naines. Il a une connaissance encyclopédique de l'histoire et des légendes du monde.	Sage, réfléchi, mais parfois têtu et grincheux. Il devient un mentor pour Lyra et l'aide à comprendre l'importance de son rôle.

Et voici le code pour vous aider :

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Ma passion pour le cinéma</title>
   </head>

   <body>
      <h1 align=center><STRONG><FONT color=blue>Ma passion pour le cinéma</FONT></STRONG></h1>
	  <BR/>
      <p align=justify>Le cinéma me passionne car il offre une évasion divertissante, des récits 
      captivants et des émotions intenses. Il invite à la réflexion sur des thèmes variés, tout en 
      étant une forme d'art et d'expression créative. Le cinéma favorise le partage et l'échange, 
      tout en étant un reflet de la culture et de l'histoire.</p>
	  <BR/>
	  <h1 align=center><STRONG><FONT color=green>Mon film préféré : Lyra, Chroniques de 
          l'Éther</FONT></STRONG></h1>
	  <BR/>
	  <DIV align=center><IMG src="/IA01.jpeg"></DIV>
	  <BR/>
      <h3 align=center><STRONG>Genre : <A href="http://fr.wikipedia.org/wiki/Fantasy">Fantasy 
      épique</A></STRONG></h3>
	  <BR/>
      <p align=justify><STRONG>Synopsis : </STRONG>Dans un monde où la magie est à la 
      fois source de vie et de destruction, une jeune orpheline nommée Lyra découvre qu'elle 
      est la dernière descendante d'une lignée de gardiens, les seuls capables de maîtriser 
      l'Éther, l'énergie magique primordiale.</p>
      <p align=justify>Lyra est propulsée dans une aventure épique à travers des royaumes
       fantastiques, des forêts enchantées aux cités flottantes, pour apprendre à maîtriser ses 
      pouvoirs et affronter une force obscure qui menace de plonger le monde dans le chaos.</p>
      <p align=justify>Sur son chemin, elle rencontre des alliés improbables : un elfe taciturne 
      mais loyal, un nain bourru mais sage, et un magicien excentrique mais puissant. Ensemble, 
      ils devront déjouer les complots, affronter des créatures mythologiques, et découvrir les 
      secrets d'une ancienne prophétie qui révèle le destin de Lyra et du monde.</p>
	  <BR/>
	  <h3 align=left><STRONG>Thèmes :</STRONG></h3>
      <ul>
         <li>Le pouvoir de la magie et ses responsabilités</li>
         <li>Le destin et le libre arbitre</li>
         <li>L'amitié et la loyauté</li>
         <li>La lutte entre le bien et le mal</li>
         <li>La découverte de soi et l'acceptation de son héritage</li>
	  </ul>
	  <BR/>
	  <table border="1">
         <tr>
            <th>Personnage</th>
            <th>Histoire</th>
            <th>Particularités</th>
         </tr>
         <tr>
            <td>Lyra</td>
            <td>Orpheline élevée dans un village isolé, elle découvre qu'elle est la dernière 
			descendante d'une lignée de gardiens de l'Éther.</td>
            <td>Courageuse, déterminée, mais parfois impulsive. Elle possède un lien unique 
			avec l'Éther et apprend à maîtriser ses pouvoirs au fil de son voyage.</td>
         </tr>
         <tr>
            <td>Elara</td>
            <td>Elfe taciturne et solitaire, elle est une experte dans l'art du combat et 
			possède une connaissance approfondie des anciennes traditions elfiques.</td>
            <td>Loyale, protectrice, mais parfois froide et distante. Elle rejoint Lyra 
			pour expier une faute passée et protéger le monde de la menace obscure.</td>
         </tr>
		 <tr>
            <td>Grum</td>
            <td>Nain bourru et sage, il est un maître forgeron et un gardien des traditions 
			naines. Il a une connaissance encyclopédique de l'histoire et des légendes du monde.</td>
            <td>Sage, réfléchi, mais parfois têtu et grincheux. Il devient un mentor pour 
			Lyra et l'aide à comprendre l'importance de son rôle.</td>
         </tr>
      </table>
	  <BR/>
	  <BR/>
   </body>
</html>

Voilà pour ce chapitre,

Dans le suivant, nous ajouterons du CSS. 😋