Créer des tableaux en HTML

Introduction

Le tableau est l'un des éléments les plus utiles. Les tableaux sont présents partout dans les applications Web. La principale utilisation des tableaux est qu'ils servent à structurer les éléments d'information et à organiser l'information sur la page Web. Un tableau HTML est une mise en page basée sur un tableau. Les tableaux ne doivent pas être utilisés comme des aides à la mise en page. Dans cet article, nous allons aborder la création de tableaux en HTML.

Bon à savoir sur un tableau HTML

• La balise <table> est utilisée pour créer un tableau.
• En HTML, un tableau est considéré comme un groupe de lignes contenant chaque groupe de cellules.
• Il peut y avoir plusieurs colonnes dans une ligne.
• Les tableaux HTML ne devraient être utilisés que pour les données tabulaires, mais ils sont également utilisés pour réaliser des mises en page de pages Web.
• Si nous construisons des tableaux HTML sans aucun style ou attribut dans le navigateur, ils seront affichés sans aucune bordure.
• Balise Table : <TABLE> </TABLE>
• Le contenu que nous écrivons entre ces balises sera affiché à l'intérieur du tableau.

Balises utilisées dans un tableau HTML

Voici quelques-unes des balises utilisées dans un tableau HTML.

1. Balise <tr>

• La balise <tr> est utilisée pour définir une ligne dans le tableau HTML.
• Nous commencerons la ligne d'un tableau avec la balise ouvrante <TR>, puis nous construirons la ligne en créant chaque cellule, et lorsque nous aurons terminé toutes les cellules d'une ligne, nous fermerons alors la ligne avec la balise fermante </TR>.
• Balise de ligne : <TR></TR>

2. Balise <td>

• La balise <td> est utilisée pour définir les données de la cellule dans le tableau HTML.
• Nous allons créer chaque cellule avec la balise de début de cellule <TD>, puis ajouter le contenu ou les données à la cellule et enfin fermer la cellule avec la balise de fin de cellule </TD>.
• Balise de cellule : <TD></TD>

3. Balise <th>

• La balise <th> est utilisée pour définir la cellule d'en-tête dans un tableau HTML.
• La cellule d'en-tête du tableau est utilisée pour fournir des informations aux autres cellules de la colonne.
• Balise d'en-tête : <TH></TH>
• Généralement, elle est placée tout en haut des cellules.

4. Balise <bgcolor>

La balise <bgcolor> est utilisée pour spécifier la couleur de fond du tableau.

Syntaxe :

<table bgcolor = "color_name|hex_number|rgb_number">

• Pour color_name, nous pouvons fournir directement le nom de la couleur pour l'arrière-plan du tableau. Par exemple, nous pouvons spécifier <table bgcolor ="Red">.
• Pour hex_number, nous devons spécifier le code hexadécimal pour la couleur fond du tableau. Par exemple <table bgcolor = "#0000ff">.
• Pour rgb_number, nous devons spécifier le code rgb (rouge, vert, bleu) pour la couleur fond du tableau. Par exemple, <table bgcolor = "rgb(255,255,0)">.
• Dans le cas de rgb_number, si nous fournissons toutes les valeurs comme 255, le résultat de la couleur de fond est blanc.

5. Balise <caption>

• La balise <caption> est utilisée pour fournir la légende du tableau.
• Elle est placée ou utilisée immédiatement après la balise <table>.
• Par défaut, la légende du tableau sera alignée au centre au-dessus du tableau.
• Balise Caption : <caption></caption>

6. Écartement des cellules

• L'écartement ou spanning n'est rien d'autre que la combinaison de deux ou plusieurs cellules adjacentes dans le tableau.
• Il consiste en une extension de colonne (Col Span) et une extension de ligne (Row Span).
• Col span : L'attribut colspan spécifie le nombre de colonnes qu'une cellule du tableau doit couvrir.
• <td colspan = "number">.
• Il prend toujours une valeur entière.
• Row span : L'attribut rowspan spécifie le nombre de ligne qu'une cellule de tableau doit couvrir.
• <td rowspan = "number">
• Il prend toujours une valeur entière.

7. Balise <thead>

• La balise <thead> définit un ensemble de lignes définissant l'en-tête des colonnes du tableau.

Syntaxe :

<thead></thead>

8. Balise <tbody>

• La balise <tbody> est utilisée pour regrouper le contenu du corps dans le tableau HTML.
• Les tableaux peuvent contenir plus d'un corps dans certains cas ; dans d'autres cas, le tableau ne peut contenir qu'un seul corps ; dans ces cas, le <tbody> peut être supprimé.
• Les tableaux contenant un seul corps auront un corps implicite.

Syntaxe :

<tbody></tbody>

9. Balise <tfoot>

• La balise <tfoot> contient des lignes qui représentent un pied de page ou un résumé du tableau.

Syntaxe :

<tfoot></tfoot>

10. Balise <colgroup>

• Les colonnes du tableau peuvent être regroupées à l'aide de l'élément <colgroup>.
• Chaque élément <colgroup> déclaré dans le bloc définira un groupe à l'aide de l'attribut span, qui indiquera le nombre de colonnes qui appartiendront au groupe.
• Cet élément est utile pour appliquer des styles pour l'ensemble des colonnes au lieu de répéter ces styles pour chaque ligne ou cellule.

Syntaxe :

<colgroup></colgroup>

Exemples d'utilisation des balises de tableaux HTML

Voici quelques exemples d'utilisation des balise de tableaux HTML :

1. Balise <table>

Syntaxe :

<table></table>

Exemple 1 :

<table>
	<tr>
		<th>Firstname</th>
		<th>Lastname</th>
	</tr>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>sai</td>
	</tr>
</table>

Résultat :

Dans cet exemple, nous avons créé un tableau de trois lignes, comme nous pouvons le constater dans le Résultat, il ne contient aucune bordure. Ainsi, lorsque nous créons un tableau sans CSS ou sans utiliser de styles, le résultat s'affiche sans bordure.

Exemple 2 :

<head>
<style>
	table, th, td {
		border: 1px solid blue;
	}
</style>
</head>
<body>

<table style="width: 50%;">
	<tr>
		<th>Nom</th>
		<th>Prénom</th>
	</tr>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>Danielle</td>
	</tr>
</table>

</body>

Résultat :

Cet exemple montre que nous avons une bordure à notre résultat en donnant la propriété border dans la section style et en l'utilisant dans une balise <table>.

2. Balise <tr> et balise <td>

Syntaxe :

<tr><td>...</td></tr>

Exemple :

<table>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>Danielle</td>
	</tr>
</table>

Résultat :

Dans cet exemple, nous avons simplement créé deux lignes avec la balise <tr> et les données sont saisies à l'aide de la balise <td>.

3.  Balise <th>

Syntaxe :

<th></th>

Exemple :

<table>
	<tr>
		<th>Nom</th>
		<th>Prénom</th>
	</tr>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>Danielle</td>
	</tr>
</table>

Résultat :

Dans cet exemple, nous pouvons observer que Nom et le Prénom sont en gras par rapport aux autres car ils sont déclarés comme en-têtes des cellules en utilisant la balise <th>.

4. <bgcolor>

Syntaxe : 

<table bgcolor = "color_name|hex_number|rgb_number">

Exemple :

<table bgcolor="blue">
	<tr>
		<th>Nom</th>
		<th>Prénom</th>
	</tr>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>Danielle</td>
	</tr>
</table>

Résultat :

5. <caption>

Syntaxe :

<caption></caption>

Exemple :

<table style="width: 50%">
	<caption>Informations sur les étudiants</caption>
	<tr>
		<th>Nom</th>
		<th>Prénom</th>
	</tr>
	<tr>
		<td>Buri</td>
		<td>Shanthi</td>
	</tr>
	<tr>
		<td>Bharat</td>
		<td>Danielle</td>
	</tr>
</table>

Résultat :

Dans cet exemple, nous avons ajouté une légende au tableau en tant qu'informations sur les étudiants en utilisant une balise <caption>.

6. Col Span et Row Span

La syntaxe pour Col Span :

<td colspan="number"></td>

La syntaxe pour Row Span :

<td rowspan="number"></td>

Exemple pour Col Span :

<table>
	<tr>
		<th>Matières</th>
		<th>Points</th>
	</tr>
	<tr>
		<td>Maths</td>
		<td>75</td>
	</tr>
	<tr>
		<td>Anglais</td>
		<td>80</td>
	</tr>
	<tr>
		<td colspan="2">Total de points : 155</td>
	</tr>
</table>

Résultat :

Exemple pour Row Span :

<table>
	<tr>
		<th>Nom de l'étudiant</th>
		<th>Matières</th>
		<th>Points</th>
		<th>Total de points</th>
	</tr>
	<tr>
		<td>Grey</td>
		<td>Maths</td>
		<td>75</td>
		<td rowspan="2">155</td>
	</tr>
	<tr>
		<td>Grey</td>
		<td>Anglais</td>
		<td>80</td>
	</tr>
</table>

Résultat :

7. <thead>

Syntaxe :

<thead></thead>

8. <tbody>

Syntaxe :

<tbody></tbody>

9. <tfooter>

Syntaxe :

<tfooter></tfooter>

Exemple :

<head>
	<style>
		table, th, td {
			border: 1px solid black;
		}
		thead { color: red; }
		tbody { color: green; }
		tfoot { color: blue; }
	</style>
</head>
<body>

<table>
	<thead>
		<tr>
			<th>Matières</th>
			<th>Points</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Maths</td>
			<td>75</td>
		</tr>
		<tr>
			<td>Anglais</td>
			<td>80</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total de points</td>
			<td>155</td>
		</tr>
	</tfoot>
</table>

Résultat :

10. <colgroup>

Syntaxe :

<colgroup></colgroup>

Exemple :

<head>
	<style>
		table, th, td {
			border: 1px solid black;
		}
	</style>
</head>
<body>

<table style="width: 50%">
	<colgroup span="2"></colgroup>
	<colgroup span="2"></colgroup>
	<tr>
		<th></th>
		<th colspan="2">Danielle</th>
		<th colspan="2">Henri</th>
	</tr>
	<tr>
		<td></td>
		<td>Maths</td>
		<td>Anglais</td>
		<td>Maths</td>
		<td>Anglais</td>
	</tr>
	<tr>
		<td>Points</td>
		<td>60</td>
		<td>75</td>
		<td>80</td>
		<td>50</td>
	</tr>
</table>

Résultat :

Conclusion

En HTML, nous pouvons créer plusieurs tableaux en utilisant la balise <table>, et nous pouvons même regrouper les lignes et les colonnes. Nous pouvons même également donner plus de style à ces tableaux en utilisant le CSS.