Tailles des tableaux HTML
Les tableaux HTML peuvent avoir des tailles différentes pour chaque colonne, ligne ou pour l'ensemble du tableau.
Utilisez l' styleattribut avec les
propriétés widthou height
pour spécifier la taille d'un tableau, d'une ligne ou d'une colonne.
Largeur du tableau HTML
Pour définir la largeur d'un tableau, ajoutez l' style
attribut à l' <table>élément :
Exemple
Définissez la largeur du tableau sur 100 % :
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Remarque : L'utilisation d'un pourcentage comme unité de taille pour une largeur signifie la largeur de cet élément par rapport à son élément parent, qui dans ce cas est l' <body>
élément.
Largeur de colonne du tableau HTML
Pour définir la taille d'une colonne spécifique, ajoutez l' style
attribut sur un élément <th>ou
:<td>
Exemple
Définissez la largeur de la première colonne sur 70 % :
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Hauteur de ligne du tableau HTML
Pour définir la hauteur d'une ligne spécifique, ajoutez l' style
attribut sur un élément de ligne de tableau :
Exemple
Définissez la hauteur de la deuxième ligne sur 200 pixels :
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>