HTML -Tabellengrößen
HTML-Tabellen können unterschiedliche Größen für jede Spalte, Zeile oder die gesamte Tabelle haben.
Verwenden Sie das styleAttribut mit den
Eigenschaften widthoder height
, um die Größe einer Tabelle, Zeile oder Spalte anzugeben.
HTML-Tabellenbreite
Um die Breite einer Tabelle festzulegen, fügen Sie dem Element das style
Attribut hinzu:<table>
Beispiel
Setzen Sie die Breite der Tabelle auf 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>
Hinweis: Die Verwendung eines Prozentsatzes als Größeneinheit für eine Breite bedeutet, wie breit dieses Element im Vergleich zu seinem übergeordneten Element sein wird, das in diesem Fall das <body>
Element ist.
Spaltenbreite der HTML-Tabelle
Um die Größe einer bestimmten Spalte festzulegen, fügen Sie das style
Attribut zu einem <th>oder
<td>-Element hinzu:
Beispiel
Legen Sie die Breite der ersten Spalte auf 70 % fest:
<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>
Zeilenhöhe der HTML-Tabelle
Um die Höhe einer bestimmten Zeile festzulegen, fügen Sie das style
Attribut einem Tabellenzeilenelement hinzu:
Beispiel
Stellen Sie die Höhe der zweiten Zeile auf 200 Pixel ein:
<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>