HTML -tabelformaten
HTML-tabellen kunnen verschillende groottes hebben voor elke kolom, rij of de hele tabel.
Gebruik het styleattribuut met de
widthof height
eigenschappen om de grootte van een tabel, rij of kolom op te geven.
HTML-tabelbreedte
Om de breedte van een tabel in te stellen, voegt u het style
attribuut toe aan het <table>element:
Voorbeeld
Stel de breedte van de tabel in op 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>
Opmerking: als u een percentage gebruikt als maateenheid voor een breedte, betekent dit hoe breed dit element wordt vergeleken met het bovenliggende element, in dit geval het <body>
element.
Kolombreedte HTML-tabel
Om de grootte van een specifieke kolom in te stellen, voegt u het style
attribuut toe aan een <th>of
<td>element:
Voorbeeld
Stel de breedte van de eerste kolom in op 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>
Rijhoogte HTML-tabel
Om de hoogte van een specifieke rij in te stellen, voegt u het style
attribuut toe aan een tabelrij-element:
Voorbeeld
Stel de hoogte van de tweede rij in op 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>