En HTML, nous avons trois principaux types de listes : les listes ordonnées, les listes non ordonnées et les listes de définition.
Les listes ordonnées sont utilisées lorsque l'ordre des éléments est important. Ils sont créés à l'aide de la balise <ol>. Chaque élément de la liste est placé dans une balise <li>. Voir l'exemple ci-dessous :
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Les listes non ordonnées sont utilisées lorsque l'ordre des éléments n'a pas d'importance. Ils sont créés à l'aide de la balise <ul>. Comme pour les listes ordonnées, chaque élément est placé dans une balise <li>. Voir l'exemple :
<ul>
<li>Article</li>
<li>Autre article</li>
<li>Un élément supplémentaire</li>
</ul>
Les listes de définitions sont utilisées pour répertorier les termes et leurs définitions. Ils sont créés à l'aide des balises <dl>, <dt> (pour terme) et <dd> (pour définition). Voir l'exemple :
<dl>
<dt>HTML</dt>
<dd>Langage de balisage utilisé pour structurer le contenu sur le Web.</dd>
<dt>CSS</dt>
<dd>Langage de style utilisé pour décrire la présentation d'un document écrit en HTML.</dd>
≪/dl>
Les tableaux sont utilisés pour présenter les données en lignes et en colonnes. Ils sont créés à l'aide de diverses balises, notamment <table> (pour créer le tableau), <tr> (pour créer une ligne), <td> (pour créer une cellule) et <th> (pour créer un en-tête de tableau).
Voir un exemple de création d'un tableau en HTML :
<tableau>
<tr>
<th>Nom</th>
<th>Âge</th>
≪/tr>
<tr>
<td>John</td>
<td>25</td>
≪/tr>
<tr>
<td>Maria</td>
<td>30</td>
≪/tr>
</tableau>
En plus de ces balises de base, il existe plusieurs autres balises et attributs que vous pouvez utiliser pour contrôler l'apparence et le comportement de vos tables. Par exemple, vous pouvez utiliser l'option <légende> Pour ajouter un titre à votre tableau, le <colgroup> pour spécifier les propriétés de plusieurs colonnes à la fois, et l'attribut 'colspan' pour qu'une cellule s'étende sur plusieurs colonnes.
Nous espérons que ce chapitre vous a permis de bien comprendre comment utiliser les listes et les tableaux en HTML. N'oubliez pas que la pratique est la clé pour devenir un développeur Front End efficace, alors assurez-vous d'essayer ce que vous avez appris sur vos propres projets. Dans le prochain chapitre, nous explorerons CSS, le langage que nous utilisons pour styliser nos sites Web et les rendre visuellement attrayants.
Cookies and similar technologies are used on our sites to personalize content and ads. You can find further details and change your personal settings below. By clicking OK, or by clicking any content on our sites, you agree to the use of these cookies and similar technologies.
When you visit any of our websites, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and manage your preferences. Please note, that blocking some types of cookies may impact your experience of the site and the services we are able to offer.