W3.CSS- Tabellen
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 50 |
| Mike | Roß | 35 |
W3.CSS-Tabellenklassen
W3.CSS bietet die folgenden Klassen für Tabellen:
| Klasse | Definiert |
|---|---|
| w3-Tabelle | Container für eine HTML-Tabelle |
| w3-gestreift | Gestreifter Tisch |
| w3-Grenze | Eingefasster Tisch |
| w3-begrenzt | Eingefasste Linien |
| w3-zentriert | Zentrierter Tabelleninhalt |
| w3-schwebbar | Schwebebarer Tisch |
| w3-Tabelle-all | Alle Eigenschaften gesetzt |
Grundlegende Tabelle
Die Klasse w3-table wird verwendet, um eine einfache Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Gestreifter Tisch
Die Klasse w3-striped wird verwendet, um Zebrastreifen zu einer Tabelle hinzuzufügen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table w3-striped">
Eingefasster Tisch
Die Klasse w3-bordered fügt jeder Tabellenzeile einen unteren Rand hinzu:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table w3-bordered">
Gestreifter umrandeter Tisch
Kombinieren Sie die w3-striped- Klasse und die w3-bordered- Klasse, um eine gestreifte umrandete Tabelle zu erstellen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table w3-striped w3-bordered">
Rahmen um einen Tisch
Die Klasse w3-border wird verwendet, um einen Rahmen um eine Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table w3-striped w3-border">
Tipp: Die Klasse w3-border ist nicht nur für Tabellen gedacht. Es kann auf jedem HTML-Element verwendet werden!
Alles anzeigen
Die Klasse w3-table-all kombiniert alle oben genannten Klassen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all">
Umdrehen der Streifen
Um die Streifen umzukehren (beginnen Sie mit der hellgrauen Farbe), fügen Sie ein <thead>-Element um die Tabellenkopfzeile herum ein. Sie müssen auch eine Farbe definieren, die für die Tabellenkopfzeile verwendet werden soll:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Beispiel
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Alle Inhalte zentrieren
Die w3-zentrierte Klasse zentriert den Inhalt der Tabelle:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-centered">
Zentrieren einer Spalte
Die Klasse w3-center zentriert den Inhalt einer Spalte:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Eine Spalte rechts ausrichten
Die Klasse w3-right-align richtet den Inhalt einer Spalte rechts aus:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Schwebebarer Tisch
Die Klasse w3-hoverable fügt beim Mouseover eine graue Hintergrundfarbe hinzu:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all
w3-hoverable">
Hover-Farben
Wenn Sie eine bestimmte Hover-Farbe wünschen, fügen Sie jedem <tr>-Element eine der w3-hover- color -Klassen hinzu:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<tr class="w3-hover-green">
Kombinieren von W3.CSS-Klassen
Viele W3.CSS-Klassen können auf alle HTML-Elemente angewendet werden.
Zum Beispiel: Rahmenklassen, Farbklassen, Schriftklassen, Kartenklassen und mehr.
Farbiger Tabellenkopf
Verwenden Sie eine der w3 -Farbklassen , um eine farbige Zeile anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Farbiger Tisch
Verwenden Sie eine der w3 -Farbklassen , um eine farbige Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table w3-blue">
Responsive Tabelle
Die Klasse w3-responsive erstellt eine responsive Tabelle. Auf kleinen Bildschirmen scrollt die Tabelle dann horizontal. Beim Betrachten auf großen Bildschirmen gibt es keinen Unterschied.
Ändern Sie die Größe des Bildschirms, um die Auswirkung auf die folgende Tabelle zu sehen:
| Vorname | Nachname | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte | Punkte |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Schmied | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Vorabend | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Beispiel
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Tisch als Karte
Verwenden Sie eine w3-Kartenklasse , um eine Tabelle als Karte anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-card-4">
Kleiner Tisch
Verwenden Sie die Klasse w3-tiny , um eine winzige Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-tiny">
Kleiner Tisch
Verwenden Sie die Klasse w3-small , um eine kleine Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-small">
Großer Tisch
Verwenden Sie die Klasse w3-large , um eine große Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-large">
XLarge Tisch
Verwenden Sie die w3-xlarge- Klasse, um eine xlarge-Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-xlarge">
XXLgroßer Tisch
Verwenden Sie die Klasse w3-xxlarge , um eine xxlarge-Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-xxlarge">
XXXLarge Tisch
Verwenden Sie die Klasse w3-xxxlarge , um eine xxxlarge-Tabelle anzuzeigen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
Beispiel
<table class="w3-table-all w3-xxxlarge">
Jumbo-Tisch
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">