CSS-Tabelle

CSS kann das Aussehen von HTML-Tabellen erheblich verbessern:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Probieren Sie es selbst aus

Tabellenkanten

Um Tabellenkanten in CSS zu setzen, verwenden Sie border Eigenschaft.

Nachfolgend werden den <table>-, <th>- und <td>-Elementen schwarze Umrandungen zugewiesen:

Vorname Nachname
Bill Gates
Steve Jobs

Beispiel

table, th, td {
  border: 1px solid black;
}

Probieren Sie es selbst aus

Hinweis:Die obige Tabelle hat eine doppelte Umrandung. Dies liegt daran, dass die table- und <th>- und <td>-Elemente separate Umrandungen haben.

Volle Breite der Tabelle

In einigen Fällen scheint die obige Tabelle sehr klein zu sein. Wenn Sie eine Tabelle benötigen, die die gesamte Bildschirmbreite (volle Breite) einnimmt, fügen Sie dem <table>-Element width: 100% hinzu:

Beispiel

table {
  width: 100%;
}

Probieren Sie es selbst aus

Doppelte Umrandung

Bitte beachten Sie, dass die obige Tabelle eine doppelte Umrandung hat. Dies liegt daran, dass die Tabelle und die th- und td-Elemente separate Umrandungen haben.

Für das Entfernen von doppelten Umrandungen siehe das folgende Beispiel.

Kanten zusammenfassen

border-collapse Eigenschaft zur Festlegung, ob die Tabellenkanten zusammengefasst werden sollen:

Vorname Nachname
Bill Gates
Steve Jobs

Beispiel

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

Probieren Sie es selbst aus

Wenn Sie nur eine Umrandung um die Tabelle wünschen, geben Sie für <table> nur border Eigenschaft:

Vorname Nachname
Bill Gates
Steve Jobs

Beispiel

table {
  border: 1px solid black;
}

Probieren Sie es selbst aus

Tabellenbreite und -höhe

Die Breite und Höhe der Tabelle werden durch width und height Eigenschaftsdefinition.

Nachfolgend wird die Breite der Tabelle auf 100% gesetzt und die Höhe des <th>-Elements auf 50px eingestellt:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

table {
  width: 100%;
}
th {
  height: 50px;
}

Probieren Sie es selbst aus

Um eine Tabelle zu erstellen, die nur die Hälfte der Seite einnimmt, verwenden Sie width: 50%:

Beispiel

table {
  width: 50%;
}
th {
  height: 70px;
}

Probieren Sie es selbst aus

Horizontale Ausrichtung

text-align Eigenschaft zur Festlegung der horizontalen Ausrichtung des Inhalts in <th> oder <td> (links, rechts oder zentriert).

Standardmäßig ist der Inhalt des <th>-Elements zentriert ausgerichtet, während der Inhalt des <td>-Elements links ausgerichtet ist.

Um den Inhalt des <td>-Elements ebenfalls zentriert auszurichten, verwenden Sie bitte text-align: center:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

th {
  text-align: center;
}

Probieren Sie es selbst aus

Nachfolgend wird die Textausrichtung des <th>-Elements auf links eingestellt:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

th {
  text-align: left;
}

Probieren Sie es selbst aus

Vertikale Ausrichtung

vertical-align Eigenschaft zur Festlegung der vertikalen Ausrichtung des Inhalts in <th> oder <td> (oben, unten oder zentriert).

Standardmäßig ist die vertikale Ausrichtung des Inhalts in Tabellen zentriert (<th> und <td>-Elemente sind beide).

Nachfolgend wird die vertikale Textausrichtung des <td>-Elements auf Unten eingestellt:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

td {
  height: 50px;
  vertical-align: bottom;
}

Probieren Sie es selbst aus

Tabelleninnenseite

Um den Abstand zwischen Rand und Tabelleninhalt zu steuern, verwenden Sie bitte padding Eigenschaft:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

th, td {
  padding: 15px;
  text-align: left;
}

Probieren Sie es selbst aus

Horizontale Trennlinie

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Fügen Sie zu <th> und <td> hinzu border-bottom Eigenschaft, um horizontale Trennlinien zu erreichen:

Beispiel

th, td {
  border-bottom: 1px solid #ddd;
}

Probieren Sie es selbst aus

Klickbare Tabelle

um die Tabellenzeile beim Mausüberfahren hervorzuheben: Verwenden Sie den Wähler :hover

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

tr:hover {background-color: #f5f5f5;}

Probieren Sie es selbst aus

Streifen-Tabelle

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Um ein Zebrastreifenlayout zu erreichen, verwenden Sie nth-child() Wähler, um allen geraden (oder ungeraden) Tabellenzeilen eine hinzuzufügen background-color:

Beispiel

tr:nth-child(even) {background-color: #f2f2f2;}

Probieren Sie es selbst aus

Tabellenfarbe

Im folgenden Beispiel wird die Hintergrundfarbe und die Textfarbe des <th>-Elements angegeben:

Vorname Nachname Ersparnisse
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Beispiel

th {
  background-color: #4CAF50;
  color: white;
}

Probieren Sie es selbst aus

Responsive Tabelle

Wenn der Bildschirm zu klein ist, um den gesamten Inhalt anzuzeigen, wird eine responsive Tabelle einen horizontalen Scrollbalken anzeigen:

Vorname Nachname Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Fügen Sie um den <table>-Elementen einen mit overflow-x:auto des Containerelements (z.B. <div>), um ein responsives Layout zu erreichen:

Beispiel

<div style="overflow-x:auto;">
<table>
... Tabelleinhalt ...
</table>
</div>

Probieren Sie es selbst aus

Anmerkung:In OS X Lion (auf dem Mac) sind die Scrollbalken standardmäßig ausgeblendet und werden nur angezeigt, wenn sie verwendet werden (selbst wenn "overflow:scroll" gesetzt ist).

Mehr Beispiele

Eine stilisierte Tabelle erstellen
Dieses Beispiel zeigt, wie man eine stilisierte Tabelle erstellt.
Position der Tabellenüberschrift einstellen
Dieses Beispiel zeigt, wie man Tabellenüberschriften platzieren kann.

CSS-Tabelleigenschaften

Eigenschaft Beschreibung
border Kurzschreibweise. Setzt alle Randeigenschaften in einer Deklaration.
border-collapse Legt fest, ob die Tabellenränder gefaltet werden sollen.
border-spacing Legt den Abstand zwischen den benachbarten Zellen der Tabelle fest.
caption-side Legt den Ort der Tabellenüberschrift fest.
empty-cells Legt fest, ob Ränder und Hintergründe in den leeren Zellen der Tabelle angezeigt werden sollen.
table-layout Legen Sie das Layout-Algorithmus für die Tabelle fest.