CSS
Tabellen
Suche…
Syntax
- Tabellenlayout: auto | Fest;
- Grenzzusammenbruch: separate | Zusammenbruch;
- Randabstand: <Länge> | <Länge> <Länge>;
- leere Zellen: show | verbergen;
- Bildunterschriftseite: oben | Unterseite;
Bemerkungen
Diese Eigenschaften gelten sowohl für <table> -Elemente (*) als auch für HTML-Elemente, die als display: table oder display: inline-table angezeigt werden
(*) <table> -Elemente werden offensichtlich von UA / Browsern nativ als display: table
HTML-Tabellen sind semantisch für Tabellendaten gültig. Es wird nicht empfohlen, Tabellen für das Layout zu verwenden. Verwenden Sie stattdessen CSS.
Tabellenlayout
Die table-layout Eigenschaft ändert den Algorithmus, der für das Layout einer Tabelle verwendet wird.
Nachfolgend ein Beispiel für zwei Tabellen, deren width: 150px :
Die Tabelle links hat ein table-layout: auto während die table-layout: fixed rechts ein table-layout: fixed hat table-layout: fixed . Ersteres ist breiter als die angegebene Breite (210px statt 150px), aber der Inhalt passt. Letzteres nimmt die definierte Breite von 150px an, unabhängig davon, ob der Inhalt überläuft oder nicht.
| Wert | Beschreibung |
|---|---|
| Auto | Dies ist der Standardwert. Sie definiert das Layout der Tabelle, das durch den Inhalt der Zellen bestimmt wird. |
| Fest | Dieser Wert legt das Tabellenlayout so fest, dass es von der in der Tabelle angegebenen width -Eigenschaft bestimmt wird. Wenn der Inhalt einer Zelle diese Breite überschreitet, ändert sich die Größe der Zelle nicht, sondern der Inhalt wird überlaufen. |
Grenzzusammenbruch
Die Eigenschaft border-collapse legt fest, ob die Grenzen einer Tabelle getrennt oder zusammengefügt werden sollen.
Nachfolgend ein Beispiel für zwei Tabellen mit unterschiedlichen Werten für die Eigenschaft border-collapse :
Die Tabelle auf der linken Seite hat border-collapse: separate während die Tabelle auf der rechten Seite border-collapse: collapse
| Wert | Beschreibung |
|---|---|
| trennen | Dies ist der Standardwert. Dadurch werden die Grenzen der Tabelle voneinander getrennt. |
| Zusammenbruch | Dieser Wert legt fest, dass die Rahmen der Tabelle zusammengefügt werden, anstatt dass sie voneinander getrennt sind. |
Randabstand
Die border-spacing bestimmt den Abstand zwischen Zellen. Dies hat keine Auswirkungen , wenn border-collapse gesetzt zu separate .
Unten finden Sie ein Beispiel für zwei Tabellen mit unterschiedlichen Werten für die Eigenschaft " border-spacing :
Die Tabelle links hat einen border-spacing: 2px (Standardeinstellung), während die rechte Tabelle einen border-spacing: 2px hat border-spacing: 8px .
| Wert | Beschreibung |
|---|---|
| <Länge> | Dies ist das Standardverhalten, obwohl der genaue Wert zwischen Browsern variieren kann. |
| <Länge> <Länge> | Diese Syntax ermöglicht die Angabe separater horizontaler und vertikaler Werte. |
leere Zellen
Die Eigenschaft empty-cells legt fest, ob Zellen ohne Inhalt angezeigt werden sollen oder nicht. Dies hat keine Auswirkungen , wenn border-collapse gesetzt zu separate .
Nachfolgend ein Beispiel mit zwei Tabellen mit unterschiedlichen Werten für die Eigenschaft empty-cells :
Die Tabelle links enthält empty-cells: show während die rechte Tabelle empty-cells: hide . Ersteres zeigt die leeren Zellen an, letzteres jedoch nicht.
| Wert | Beschreibung |
|---|---|
| Show | Dies ist der Standardwert. Es zeigt Zellen auch wenn sie leer sind. |
| verbergen | Dieser Wert verbirgt eine Zelle insgesamt, wenn die Zelle keinen Inhalt enthält. |
Mehr Informationen:
- https://www.w3.org/TR/CSS21/tables.html#empty-cells
- https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells
- http://codepen.io/SitePoint/pen/yfhtq
- https://css-tricks.com/almanac/properties/e/empty-cells/
Bildunterschriften
Die Eigenschaft caption-side bestimmt die vertikale Positionierung des Elements <caption> innerhalb einer Tabelle. Dies hat keine Auswirkungen, wenn ein solches Element nicht vorhanden ist.
Nachfolgend ein Beispiel mit zwei Tabellen mit unterschiedlichen Werten für die Eigenschaft caption-side :
Die Tabelle auf der linken Seite hat eine caption-side: top während die Tabelle rechts eine caption-side: bottom hat caption-side: bottom .
| Wert | Beschreibung |
|---|---|
| oben | Dies ist der Standardwert. Die Beschriftung wird über der Tabelle platziert. |
| Unterseite | Dieser Wert platziert die Beschriftung unter der Tabelle. |