1. A propos des tableaux HTML

Un tableau HTML est un élément utilisé pour organiser et afficher des données sous forme de lignes et de colonnes. Il est généralement composé de balises HTML spécifiques qui permettent de structurer les données de manière tabulaire. Notez bien que pour la mise en forme, il est recommandé en général d'utiliser des méthodes de mise en page CSS plutôt que de compter uniquement sur les attributs HTML.Voici une description des balises HTML couramment utilisées pour créer des tableaux :

1. <table> : C'est l'élément de base pour créer un tableau. Il englobe toutes les autres balises liées au tableau. À l'intérieur de cet élément, vous définissez les lignes et les cellules du tableau.
2. <tr> : Cette balise est utilisée pour définir une ligne dans le tableau. Elle contient généralement une ou plusieurs balises <td> ou <th> pour représenter les cellules de la ligne.
3. <th> : Cette balise est utilisée pour définir une cellule d'en-tête de tableau. Les cellules d'en-tête sont généralement utilisées pour les titres de colonnes ou de lignes. Elles sont affichées en gras par défaut.
4. <td> : Cette balise est utilisée pour définir une cellule de données dans le tableau. Elle contient les données réelles que vous souhaitez afficher dans le tableau.
5. <caption> : Cette balise est facultative et peut être utilisée pour ajouter une légende ou une description au tableau. Elle est généralement placée juste en dessous de la balise d'ouverture <table>.

2. Structure de base d'un tableau HTML

2.1 Définir un tableau simple

Dans cet exemple:

1. La balise <caption> : Ajoute une légende au tableau
2. La balise <tr> : est utilisée pour ajouter des lignes (nous avons trois lignes au total)
3. La balise <td> : est utilisée pour ajouter des colonnes (nous avons deux colonnes au total)
4. La balise <th> : est utilisée pour ajouter des entêtes

2.2 Définir un tableau avec bordure

On peut aussi définir des bordures à l'aide de l'attribut border

 

3. Liste des attributs associés à la balise <table>

La balise <table> en HTML peut être utilisée avec plusieurs attributs pour définir diverses propriétés et comportements du tableau. Ces attributs vous permettent de contrôler l'apparence et le comportement de la balise <table> et de ses éléments enfants. Il convient de souligner que certains de ces attributs, comme border, cellpadding et cellspacing, sont déconseillés dans les normes HTML5 au profit de méthodes de mise en page plus modernes et flexibles à l'aide de CSS. Voici une liste des attributs couramment utilisés avec la balise <table> :

1. border: Définit la largeur de la bordure autour du tableau.
2. cellpadding: Définit l'espacement entre le contenu des cellules et les bords de la cellule.
3. cellspacing: Définit l'espacement entre les cellules du tableau.
4. width: Définit la largeur totale du tableau.
5. height: Définit la hauteur totale du tableau.
6. summary: Fournit un résumé textuel du contenu du tableau pour l'accessibilité.
7. align: Aligne le tableau par rapport au texte environnant.
8. bgcolor: Définit la couleur d'arrière-plan du tableau.
9. frame: Contrôle les bordures du tableau. Les valeurs possibles sont "void", "above", "below", "hsides", "vsides" et "box".
10. rules: Définit les règles pour afficher les lignes et les colonnes du tableau. Les valeurs possibles sont "none", "groups", "rows" et "cols".
11. caption: Utilisé pour associer un élément
    au tableau.
12. class et id: Attributs de classe et d'identifiant pour appliquer des styles CSS ou pour la manipulation JavaScript.
13. colspan : Utilisé pour de fusionner des cellules sur plusieurs colonnes horizontalement.
14. rowspan : Utilisé pour de fusionner des cellules sur plusieurs lignes verticalement.

Exemple ( attribut width, height et border)

Exemple ( attribut cellspacing)

 

Exemple (attribut cellpadding)

 

4. Fusionner les cellules d'un tableau

Comme mentionné ci-dessus, pour fusionner des cellules d'un tableau HTML on utilise:

1. L'attribut colspan : permet de fusionner des cellules sur plusieurs colonnes horizontalement.
2. L'attribut rowspan : L'attribut rowspan permet de fusionner des cellules sur plusieurs lignes verticalement.

Exemple (fusionner deux cellules horizontalement)

Exemple (fusionner deux cellules verticalement)

5. Les balises <thead>, <tbody> et <tfoot>

Les balises <thead>, <tbody> et <tfoot> sont utilisées pour organiser et structurer le contenu d'un tableau HTML de manière plus sémantique et accessible. Elles divisent le contenu du tableau en trois parties distinctes :

1. l'en-tête du tableau
2. le corps du tableau
3. le pied de page du tableau.

Voici une description de chaque balise avec des exemples :

5.1 La balise <thead> (Table Header)

La balise <thead> est utilisée pour contenir les éléments d'en-tête du tableau. Cela inclut généralement les cellules d'en-tête (<th>) qui décrivent les colonnes du tableau.

Exemple

Dans cet exemple, la balise <thead> contient les cellules d'en-tête du tableau.

5.2 La balise <tbody> (Table Body)

La balise <tbody> englobe les lignes de données principales du tableau. C'est dans cette section que vous placez les cellules de données (<td>) représentant les valeurs réelles du tableau.

5.3  La balise <tfoot> (Table Footer)

La balise <tfoot> est utilisée pour contenir les éléments de pied de page du tableau. Cela peut inclure des informations telles que des totaux, des moyennes ou d'autres données de résumé...

Exemple

L'exemple ci-dessus, utilise la balise <tfoot> qui permet d'afficher une ligne avec des informations de pied de page. Cette balise est également utile pour la mise en page et le style, car on peut lui appliquer des styles spécifiques en utilisant du code CSS.

Exemple complet avec des données

 

 

 

 

Younes Derfoufi
CRMEF OUJDA