HTML5 – Balises essentielles : TABLES et LISTES

LEÇON

 

Table : <table>, <th>, <tr> et <td>

La balise table est la balise à la racine. La balise th dénote un titre (h=heading), tr dénote une ligne (r=row), td dénote une cellule (d=data)

Exemple :

<table>
  <tr>
    <th>Prénom</th>
    <th>Date de naissance</th>
  </tr>
  <tr>
    <td>Pierre</td>
    <td>14 mars 1983</td>
  </tr>
  <tr>
    <td>Paul</td>
    <td>27 octobre 1981</td>
  </tr>
  <tr>
    <td>Brigitte</td>
    <td>22 juin 1982</td>
  </tr>
</table>

Remarque : la balise th permet de facilement appliquer un style différent pour le titre d'une colonne (on verra ça quand on étudie le CSS).

Prénom Date de naissance
Pierre 14 mars 1983
Paul 27 octobre 1981
Brigitte 22 juin 1982

 

Liste : <ul>, <ol>, <li>

Balises pour créer  :

  • des listes ordonnées (ol = ordered list), et
  • des listes non-ordonnées (ul = unordered list).

Dans les deux cas, chaque élément de la liste est encapsulé par la balise li (li=list item).

 

Exemples :

<ul>
  <li>Pierre</li>
  <li>Paul</li>
  <li>Brigitte</li>
</ul>

Affichage :

  • Pierre
  • Paul
  • Brigitte

 

<ol>
  <li>Pierre</li>
  <li>Paul</li>
  <li>Brigitte</li>
</ol>

Affichage :

  1. Pierre
  2. Paul
  3. Brigitte

 

Imbriquer les éléments les uns dans les autres

Les tables peuvent contenir du texte, mais aussi des liens, des images, des listes, etc. Des listes peuvent contenir aussi des liens, des images, d'autres listes, etc.

Exemple :

<table>
  <tr>
    <th>Voiture</th>
    <th>Photo</th>
    <th>Points à retenir</th>
  </tr>
  <tr>
    <td>Lamborghini</td>
    <td style="width:40%">
      <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_green.jpg" alt="lambo">
    </td>
    <td>
      <ul>
        <li>Vitesse décoiffante</li>
        <li>Classe maximale</li>
        <li>Totalement hors budget</li>
      </ul>
    </td>
  </tr>
</table>

Affichage :

Voiture Photo Points à retenir
Lamborghini lambo
  • Vitesse décoiffante
  • Classe maximale
  • Totalement hors budget

En savoir plus / Référence

 


EXERCICES

  1. Dans un éditeur de texte, créer un nouveau document HTML minimaliste à partir du squelette HTML
  2. Ajouter une table avec 4 lignes et 5 colonnes, qui mentionne 3 jeux vidéos (une ligne pour les titres plus une ligne par jeu) et qui contient, pour chaque jeu, ces 5 choses (une chose par colonne) :
    • le nom du jeu
    • la date de sortie du jeu
    • une image du jeu
    • un lien vers le site web officiel du jeu (un lien textuel avec le texte "cliquez ici pour visiter le site officiel") - et, naturellement, on fait en sorte que le lien fonctionne !
    • une liste (ordonnée ou non-ordonnée comme on veut) des points forts du jeu
  3. Ouvrir la page dans un navigateur pour vérifier et peaufiner l'affichage
  4. Maintenant que vous avez vu toutes les balises essentielles, prendre le Quiz W3Schools sur HTML (en anglais !)