Balise de tableau HTML est utilisé pour afficher les données sous forme de tableau (ligne * colonne). Il peut y avoir plusieurs colonnes alignées.

Nous pouvons créer un tableau pour afficher les données sous forme tabulaire, en utilisant

Dans chaque tableau, la ligne du tableau est définie parbalise, l'en-tête du tableau est défini par, et les données de la table sont définies parMots clés.

Les tableaux HTML sont utilisés pour gérer la mise en page de la page, par ex. section d'en-tête, barre de navigation, contenu du corps, section de pied de page, etc. Mais il est recommandé d'utiliser la balise div sur le tableau pour gérer la mise en page de la page.

Balises de tableau HTML

Exemple de tableau HTML

Voyons l'exemple de la balise de table HTML. Sa sortie est illustrée ci-dessus.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Sortir:

combien y a-t-il de fruits

Dans le tableau HTML ci-dessus, il y a 5 lignes et 3 colonnes = 5 * 3 = 15 valeurs.

Tableau HTML avec bordure

Il existe deux manières de spécifier la bordure des tableaux HTML.

1. Par attribut border du tableau en HTML
2. Par propriété border en CSS

1) Attribut de bordure HTML

Vous pouvez utiliser l'attribut border de la balise table en HTML pour spécifier la bordure. Mais ce n’est pas recommandé maintenant.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Sortir:

2) Propriété CSS Border

Il est désormais recommandé d'utiliser la propriété border du CSS pour spécifier la bordure dans le tableau.

 table, th, td { border: 1px solid black; } 

Vous pouvez réduire toutes les bordures en une seule bordure grâce à la propriété border-collapse. Cela réduirait la frontière en une seule.

comment récupérer des applications cachées

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Sortir:

Tableau HTML avec remplissage de cellules

Vous pouvez spécifier le remplissage de l'en-tête et des données du tableau de deux manières :

1. Par l'attribut cellpadding du tableau en HTML
2. Par propriété de remplissage en CSS

L'attribut cellpadding de la balise de tableau HTML est désormais obsolète. Il est recommandé d'utiliser CSS. Voyons donc le code de CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Sortir:

Largeur du tableau HTML :

Nous pouvons spécifier la largeur du tableau HTML en utilisant le Largeur CSS propriété. Il peut être spécifié en pixels ou en pourcentage.

Nous pouvons ajuster la largeur de notre table selon nos besoins. Voici l'exemple pour afficher un tableau avec une largeur.

 table{ width: 100%; } 

Exemple:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Sortir:

Tableau HTML avec colspan

Si vous souhaitez qu'une cellule s'étende sur plusieurs colonnes, vous pouvez utiliser l'attribut colspan.

Il divisera une cellule/ligne en plusieurs colonnes, et le nombre de colonnes dépend de la valeur de l'attribut colspan.

Voyons l'exemple qui s'étend sur deux colonnes.

Code CSS :

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

Code HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Sortir:

xdxd signification

Tableau HTML avec étendue de lignes

Si vous souhaitez qu'une cellule s'étende sur plusieurs lignes, vous pouvez utiliser l'attribut rowspan.

Cela divisera une cellule en plusieurs lignes. Le nombre de lignes divisées dépendra des valeurs de rowspan.

Voyons l'exemple qui s'étend sur deux lignes.

Code CSS :

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

Code HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Sortir:

Tableau HTML avec légende

La légende HTML est affichée au-dessus du tableau. Il doit être utilisé uniquement après la balise table.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Styliser les cellules paires et impaires du tableau HTML

Code CSS :

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Sortir:

REMARQUE : Vous pouvez également créer différents types de tableaux en utilisant différentes propriétés CSS dans votre tableau.

Navigateurs pris en charge

Élément	Chrome	C'EST À DIRE	Firefox	Opéra	Safari
	Oui	Oui	Oui	Oui	Oui