Un tableau est un composant essentiel en HTML pour afficher des données dans un format structuré avec des lignes et des colonnes. En HTML, les tableaux sont créés à l'aide des balises <table>, <tr> et <td>.
La balise <table> représente le conteneur de table principal, qui contient toutes les lignes et colonnes. Les lignes sont définies à l'aide de la balise <tr>(table row), tandis que les cellules des lignes sont définies à l'aide de la balise <td>(table data). De plus, vous pouvez utiliser la balise <th>(en-tête de tableau) pour définir les cellules d'en-tête du tableau.
Vous pouvez utiliser des attributs tels que colspan et rowspan pour fusionner des cellules dans le tableau ou répartir des cellules sur plusieurs lignes et colonnes. De plus, vous pouvez appliquer des propriétés CSS pour personnaliser l'apparence et la disposition du tableau.
Tableau( <table>)
- L' <table> élément est utilisé pour créer un tableau en HTML.
- Les données sont placées en lignes( <tr>) et en colonnes( <td> ou <th>).
- Chaque cellule de données est placée dans des éléments <td>(cellule de données) ou <th>(cellule d'en-tête).
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
En-tête de colonne( <th>)
- L' <th> élément est utilisé pour créer des en-têtes de colonne dans un tableau.
- Généralement placé dans la première ligne du tableau.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Lignes de données( <tr>):
- L' <tr> élément est utilisé pour créer des lignes de données dans une table.
- Des cellules de données( <td>) ou des cellules d'en-tête( <th>) sont placées à l'intérieur de ces <tr> éléments.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Étendue des colonnes( colspan)
L' colspan attribut est utilisé pour déterminer le nombre de colonnes qu'une cellule de données ou une cellule d'en-tête couvrira dans le tableau.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Étendue des lignes( rowspan)
L' rowspan attribut est utilisé pour déterminer le nombre de lignes qu'une cellule de données ou une cellule d'en-tête couvrira dans le tableau.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Fusionner des cellules( colspan et rowspan)
Vous pouvez combiner les attributs colspan et rowspan pour fusionner des cellules dans un tableau.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border propriété
- La border propriété spécifie l'épaisseur de la bordure du tableau.
- La valeur de border est un entier non négatif.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding propriété
- ,La cellpadding propriété spécifie la distance entre le contenu de la cellule et la bordure de la cellule dans le tableau.
- La valeur de cellpadding est un entier non négatif
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing propriété
- La cellspacing propriété spécifie l'espacement entre les cellules du tableau.
- La valeur de cellspacing est un entier non négatif.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Ces attributs et éléments vous permettent de créer et de personnaliser des tableaux en HTML selon vos besoins. Vous pouvez les utiliser pour afficher des données de manière claire et organisée sur votre site Web.