CSS Tabelle
Mit CSS können HTML-Tabellen schöner gestaltet werden.
| Unternehmen | Kontakt | Land |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Deutschland |
| Berglunds snabbköp | Christina Berglund | Sweden |
| Centro comercial Moctezuma | Francisco Chang | Mexiko |
| Ernst Handel | Roland Mendel | Österreich |
| Island Trading | Helen Bennett | UK |
| Königlich Essen | Philip Cramer | Deutschland |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
| North/South | Simon Crowther | UK |
| Paris spécialités | Marie Bertrand | France |
| The Big Cheese | Liz Nixon | USA |
| Vaffeljernet | Palle Ibsen | Dänemark |
Tabellenrahmen
Um CSS-Tabellenrahmen festzulegen, verwenden Sie die border-Eigenschaft.
Das folgende Beispiel legt einen schwarzen Rahmen für die Elemente Th und TD einer Tabelle fest:
Beachten Sie, dass die Tabelle im obigen Beispiel doppelte Rahmen hat. Das liegt daran, dass die Tabelle und die th/td-Elemente separate Rahmen haben.
Um einen einzelnen Rahmen für eine Tabelle anzuzeigen, verwenden Sie die Eigenschaft border-collapse.
Rahmen zusammenfassen
Die Eigenschaft border-collapse legt fest, ob die Tabellenrahmen zu einem einzigen Rahmen zusammengefasst oder getrennt werden:
Beispiel
Selbst ausprobieren »
Tabellenbreite und -höhe
Die Eigenschaften width und height definieren die Breite und Höhe einer Tabelle.
Das folgende Beispiel legt eine Tabelle mit 100% Breite und th-Elemente mit 50 Pixel Höhe fest:
Textausrichtung in Tabellen
Eigenschaften für Textausrichtung und vertikale Ausrichtung in einer Tabelle.
Die Eigenschaft text-align legt die horizontale Ausrichtung fest: left, right oder center:
Die Eigenschaft vertical-align legt die vertikale Ausrichtung fest, z. B. top, bottom oder middle:
Tabellen-Innenabstand
Um den Abstand zwischen dem Rahmen und dem Inhalt einer Tabelle zu steuern, verwenden Sie die Eigenschaft padding bei den Elementen td und th:
Tabellenfarben
Das folgende Beispiel gibt die Farbe des Rahmens sowie die Text- und Hintergrundfarbe der th-Elemente an:
Beispiel
Selbst ausprobieren »
Weitere Beispiele
Eine personalisierte Tabelle erstellen
Dieses Beispiel zeigt, wie man eine personalisierte Tabelle erstellt.
Legen Sie die Position der Tabellenbeschriftung fest
Dieses Beispiel zeigt, wie man eine Tabellenbeschriftung positioniert.