Neueste Web-Entwicklung Tutorials
 

CSS Tabelle

❮ Zurück Nächstes Kapitel ❯

Das Aussehen einer HTML-Tabelle kann stark mit CSS verbessert werden:

Unternehmen Kontakt Land
Alfreds Futterkiste Maria Anders Deutschland
Berglunds snabbkop Christina Berglund Schweden
Centro Comercial Moctezuma Francisco cisco~~POS=HEADCOMP Chang Mexiko
Ernst Handel Roland Mendel Österreich
Insel Handels Helen Bennett Vereinigtes Königreich
Koniglich Essen Philip Cramer Deutschland
Lachen Bacchus Winecellars Yoshi Tannamuri Kanada
Magazzini Alimentari Riuniti Giovanni Rovelli Italien

Tabellenrahmen

Um Tabellenrahmen in CSS, verwenden Sie die angeben border Eigenschaft.

Das folgende Beispiel gibt einen schwarzen Rand für <table> , <th> und <td> Elemente:

Beispiel

table, th, td {
   border: 1px solid black;
}
Versuch es selber "

Beachten Sie, dass die Tabelle in dem obigen Beispiel Doppelgrenzen aufweist. Dies liegt daran , sowohl die Tabelle und das <th> und <td> Elemente haben separate Grenzen.

Collapse Tabellenrahmen

Die border-collapse Eigenschaft legt fest , ob die Tabellenrahmen in einer einzigen Grenze zusammengelegt werden sollten:

Beispiel

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
Versuch es selber "

Wenn Sie nur einen Rahmen um den Tisch wollen, geben Sie nur die border Eigenschaft für <table> :

Beispiel

table {
    border: 1px solid black;
}
Versuch es selber "

Tabelle Breite und Höhe

Breite und Höhe einer Tabelle werden durch die definierte width und height Eigenschaften.

Das folgende Beispiel setzt die Breite des Tisches bis 100%, und die Höhe des <th> Elemente zu 50px:

Beispiel

table {
    width: 100%;
}

th {
    height: 50px;
}
Versuch es selber "

Horizontale Ausrichtung

Die text-align Eigenschaft legt die horizontale Ausrichtung (wie links, rechts oder in der Mitte) des Inhalts in <th> oder <td> .

Standardmäßig wird der Inhalt von <th> sind Elemente zentriert und der Gehalt an <td> Elemente sind linksbündig.

Das folgende Beispiel links richtet den Text in <th> Elemente:

Beispiel

th {
    text-align: left;
}
Versuch es selber "

Vertikale Ausrichtung

Die vertical-align Eigenschaft legt die vertikale Ausrichtung (wie oben, unten oder in der Mitte) des Inhalts in <th> oder <td> .

Standardmäßig ist die vertikale Ausrichtung des Inhalts in einer Tabelle ist Mitte (für beide <th> und <td> Elemente).

Im folgenden Beispiel wird die vertikale Textausrichtung nach unten für <td> Elemente:

Beispiel

td {
    height: 50px;
    vertical-align: bottom;
}
Versuch es selber "

Tabelle Padding

Um den Abstand zwischen der Grenze zu steuern und den Inhalt in einer Tabelle, verwenden Sie die padding - Eigenschaft auf <td> und <th> Elemente:

Beispiel

th, td {
    padding: 15px;
    text-align: left;
}
Versuch es selber "

Horizontal Divider

Vorname Familienname, Nachname Ersparnisse
Peter Greif $ 100
Lois Greif $ 150
Joe Swanson $ 300

Fügen Sie den border-bottom - Eigenschaft auf <th> und <td> für die horizontale Teiler:

Beispiel

th, td {
    border-bottom: 1px solid #ddd;
}
Versuch es selber "

Hoverable Tabelle

Verwenden Sie den :hover - Wähler auf <tr> auf Tabellenzeilen auf der Maus markieren über:

Vorname Familienname, Nachname Ersparnisse
Peter Greif $ 100
Lois Greif $ 150
Joe Swanson $ 300

Beispiel

tr:hover {background-color: #f5f5f5}
Versuch es selber "

Gestreiftes Tabellen

Vorname Familienname, Nachname Ersparnisse
Peter Greif $ 100
Lois Greif $ 150
Joe Swanson $ 300

Für Zebra-Streifen - Tabellen, verwenden Sie die nth-child() - background-color nth-child() Selektor und fügen Sie eine background-color für alle selbst (oder ungerade) Tabellenzeilen:

Beispiel

tr:nth-child(even) {background-color: #f2f2f2}
Versuch es selber "

Tabelle Farbe

Das folgende Beispiel gibt die Hintergrundfarbe und Textfarbe von <th> Elemente:

Vorname Familienname, Nachname Ersparnisse
Peter Greif $ 100
Lois Greif $ 150
Joe Swanson $ 300

Beispiel

th {
    background-color: #4CAF50;
    color: white;
}
Versuch es selber "

Responsive Tabelle

Eine ansprechende Tabelle wird eine horizontale Bildlaufleiste angezeigt werden, wenn der Bildschirm zu klein ist, den gesamten Inhalt anzuzeigen:

Vorname Familienname, Nachname Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte
Jill Schmied 50 50 50 50 50 50 50 50 50 50 50 50
Vorabend Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Fügen Sie ein Containerelement (wie <div> ) mit overflow-x:auto um das <table> Element, um es anspricht:

Beispiel

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Versuch es selber "
Beispiele

Mehr Beispiele

Machen Sie eine ausgefallene Tisch
Dieses Beispiel zeigt, wie eine Phantasie Tabelle zu erstellen.

Stellen Sie die Position der Tabellenbeschriftung
Dieses Beispiel zeigt, wie die Tabelle Beschriftung zu positionieren.

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»

CSS Tabelleneigenschaften

Eigentum Beschreibung
border Setzt alle Rahmeneigenschaften in einer Erklärung
border-collapse Gibt an, ob oder nicht Tabellenrahmen zusammengelegt werden sollte
border-spacing Gibt den Abstand zwischen den Grenzen von benachbarten Zellen
caption-side Gibt die Platzierung einer Tabellenbeschriftung
empty-cells Gibt an, ob nicht auf leere Zellen in einer Tabelle Grenzen und Hintergrund angezeigt werden
table-layout Legt die Layout-Algorithmus für eine Tabelle verwendet werden

❮ Zurück Nächstes Kapitel ❯