SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
CSS/Eigenschaften/Tabellenformatierung/width
Aus SELFHTML-Wiki
< CSS | Eigenschaften
Der Begriff width ist mehrdeutig.Dieser Artikel beschreibt die Verwendung der Eigenschaft width im Zusammenhang mit Tabellen. Für den allgemeinen Artikel zu width siehe CSS/Eigenschaften/width.
Die Eigenschaft width gibt abhängig von table-layout die Mindest- oder feste Breite einer Tabellenspalte an.
Empfehlung: zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen
Beim Festlegen von Breiten für Tabellenelemente muss man beachten, dass Tabellen in HTML-Dokumenten zeilenweise abgearbeitet werden. Dennoch kann man dem Browser schon vor der Darstellung der Tabelle Informationen über die Breite der entsprechenden Tabellenspalten liefern.
Beachten Sie:
table ist das einzige Tabellenelement, welches einen über margin steuerbaren Außenabstand besitzt.
Möglicherweise kommt es zu unerwünschten Effekten bei der gleichzeitigen Verwendung der HTML-Attribute cellspacing bzw. cellpadding und CSS-Eigenschaften.Beispiel
ansehen …
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Breitenangaben für Tabellen</title>
<style>
td, th { border: 1px solid; }
#spaltengruppe { width: 120px; }
#spalte4 { width: 200px; }
</style>
</head>
<body>
<table>
<caption>Breitenangaben</caption>
<colgroup id="spaltengruppe">
<col>
<col>
<col>
</colgroup>
<colgroup>
<col id="spalte4">
</colgroup>
<thead>
<tr>
<th>Ü 1</th>
<th>Ü 2</th>
<th>Ü 3</th>
<th>Ü 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Beachten Sie: Die Browser interpretieren diese Angaben unterschiedlich. Firefox und Internetexplorer setzen für jede Spalte der Gruppe eine Breite von 120px abzüglich border und padding; Opera, Safari und Chrome setzen für die gesamte Gruppe eine Breite von 120px.
Der IE8 ist hierbei am konsequentesten: Er setzt bei
table-layout:fixed; eine Inhaltsbreite von 120px, bei table-layout:auto; eine Gesamtbreite von 120px.Prozentangaben sind ebenfalls möglich. Diese beziehen sich dann auf die Breite des table-elements. Es ist dabei zu beachten, dass Breitenangaben einzelner Spalten Vorrang vor Breitenangaben in Spaltengruppen haben.
Beispiel
...
<style>
#spaltengruppe { width: 120px; }
#spalte1 { width: 50%; }
#spalte4 { width: 200px; }
</style>
...
<colgroup id="spaltengruppe">
<col id="spalte1">
<col>
<col>
</colgroup>
<colgroup>
<col id="spalte4">
</colgroup>
...
Spalte 1 wird in diesem Beispiel 50% der gesamten Tabellenbreite, also 440px abzüglich border und padding, einnehmen.
Beachten Sie: Wenn Sie
colgroup verwenden, müssen Sie jede Spalte einer Spaltengruppe zuordnen.
<colgroup> <col> <col> </colgroup> <col>ist ungültiges HTML.
Beachten Sie: In XHTML ist das schließende
col-Tag notwendig.
