Cours IT Bases HTML 012_Listes et tableaux

Listes

Les listes HTML sont des éléments importants pour organiser et présenter des informations sur des pages web. En utilisant différents types de listes, il est possible de mieux structurer et afficher le contenu.

HTML possède trois types de listes :

1. Liste non ordonnée (Unordered list) : Créée avec l’élément <ul>, chaque élément de liste est représenté par un élément <li>.
2. Liste ordonnée (Ordered list) : Créée avec l’élément <ol>, les éléments de liste sont également représentés par des éléments <li>, la différence étant qu’ils sont automatiquement numérotés.
3. Liste de définition (Definition list) : Créée avec l’élément <dl>, contient des éléments <dt> (terme de définition) et <dd> (description de définition).

Liste non ordonnée

La liste non ordonnée est le type de liste le plus courant. Elle ajoute un petit cercle (aussi appelé marqueur de liste) avant chaque élément de liste. Elle utilise <ul> comme conteneur pour la liste et <li> pour décrire les éléments spécifiques de la liste.

Exemple :

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

Résultat :

Liste ordonnée

Contrairement à la liste non ordonnée, chaque élément d’une liste ordonnée est marqué avec des numéros. Les listes ordonnées utilisent <ol> comme conteneur pour la liste et également <li> pour décrire les éléments spécifiques de la liste.

Exemple :

1
<ol>
2
  <li>Premier élément</li>
3
  <li>Deuxième élément</li>
4
  <li>Troisième élément</li>
5
</ol>

Résultat :

Liste de définition

Une liste de définition est composée des éléments <dl> (liste de définition), <dt> (terme de définition) et <dd> (description de définition). Les listes de définition sont généralement utilisées pour afficher un groupe de termes et leurs définitions.

Exemple :

1
<dl>
2
  <dt>Terme 1</dt>
3
  <dd>Description 1</dd>
4
  <dt>Terme 2</dt>
5
  <dd>Description 2</dd>
6
</dl>

Résultat :

[!Résumé]

• Les éléments de liste peuvent contenir en interne des paragraphes, des sauts de ligne, des images, des liens ainsi que d’autres listes, etc.

Tableaux

Les tableaux HTML sont des éléments puissants pour afficher des données structurées. Un tableau HTML de base est représenté par l’élément <table> et contient quelques sous-éléments clés tels que <tr> (ligne de tableau), <th> (cellule d’en-tête) et <td> (cellule de données de tableau).

Exemple :

1
<table>
2
  <tr>
3
    <th>Nom</th>
4
    <th>Âge</th>
5
    <th>Sexe</th>
6
  </tr>
7
  <tr>
8
    <td>Jean Dupont</td>
9
    <td>20</td>
10
    <td>masculin</td>
11
  </tr>
12
  <tr>
13
    <td>Marie Martin</td>
14
    <td>21</td>
15
    <td>féminin</td>
16
  </tr>
17
</table>

Résultat :

Éléments de tableau :

• <table> : Représente l’ensemble du tableau.
• <thead> : Définit la partie d’en-tête du tableau, qui contient des éléments <th> pour représenter les titres des colonnes.
• <tr> : Ligne de tableau, contient des cellules d’en-tête <th>.
• <th> : Cellule d’en-tête, utilisée pour identifier le titre de la colonne.
• <tbody> : Définit la partie corps du tableau, où chaque ligne contient des éléments <td> pour représenter les données réelles.
• <td> : Cellule de données de tableau, contient les données réelles.
• <tfoot> : Définit la partie pied du tableau, généralement utilisée pour placer des résumés, des totaux ou d’autres informations de pied de tableau.
• <caption> : Utilisé pour ajouter un titre au tableau HTML, le titre est généralement affiché en haut du tableau.
• <colgroup> : Définit un groupe de colonnes de tableau
• <col> : Définit des attributs pour les colonnes de tableau.

Exemple :

1
<table border="1">
2
  <caption>Ceci est le titre d'un tableau</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Nom</th>
11
      <th>Âge</th>
12
      <th>Ville</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>Jean Dupont</td>
18
      <td>25</td>
19
      <td>Paris</td>
20
    </tr>
21
    <tr>
22
      <td>Marie Martin</td>
23
      <td>30</td>
24
      <td>Lyon</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Total de personnes : 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Résultat :

Attributs de tableau :

• border : Utilisé pour spécifier la bordure du tableau. La valeur est un nombre indiquant la largeur de la bordure.
• cellpadding : Utilisé pour spécifier l’espacement entre les cellules. La valeur est un nombre indiquant la taille de l’espacement.
• cellspacing : Utilisé pour spécifier l’espacement entre les bordures des cellules. La valeur est un nombre indiquant la taille de l’espacement.
• width : Utilisé pour spécifier la largeur du tableau. La valeur est un nombre indiquant la largeur.
• height : Utilisé pour spécifier la hauteur du tableau. La valeur est un nombre indiquant la hauteur.
• style : Utilisé pour spécifier le style du tableau.

Exemple :

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Ceci est un beau tableau</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Nom</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Âge</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Ville</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Jean Dupont</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Paris</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Marie Martin</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Lyon</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Total de personnes : 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Résultat :

Fusion de tableaux

La fusion de tableaux consiste à combiner deux ou plusieurs cellules en une seule cellule. La fusion de tableaux peut être utilisée pour simplifier la mise en page du tableau ou pour mettre en évidence des données spécifiques. Utilisez l’attribut colspan pour spécifier le nombre de lignes sur lesquelles s’étend une cellule, ou utilisez l’attribut rowspan pour spécifier le nombre de colonnes sur lesquelles s’étend une cellule. La valeur de l’attribut est un nombre indiquant le nombre de lignes couvertes.

Exemple :

1
<table border="1">
2
  <tr>
3
    <td>Cellule 1</td>
4
    <td colspan="2">Fusion horizontale de deux colonnes</td>
5
    <td>Cellule 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Fusion verticale de deux lignes</td>
9
    <td>Cellule 3</td>
10
    <td>Cellule 4</td>
11
    <td>Cellule 5</td>
12
  </tr>
13
  <tr>
14
    <td>Cellule 7</td>
15
    <td>Cellule 8</td>
16
    <td>Cellule 9</td>
17
  </tr>
18
</table>

Résultat :

[!Résumé]

• Par défaut, les tableaux n’affichent pas de bordures.
• <tr> est l’abréviation de table row, représente une ligne de tableau.
• <td> : td est l’abréviation de table data, représente une cellule de données de tableau.
• <th> : th est l’abréviation de table header, représente une cellule d’en-tête de tableau.
• La plupart des navigateurs affichent l’en-tête en texte centré et en gras.
• Les tableaux peuvent contenir du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, des tableaux, etc.