Neueste Web-Entwicklung Tutorials
 

W3.CSS Tabelle

❮ Zurück Weiter Kapitel ❯

Anzeigen einer Tabelle

Vorname Familienname, Nachname Punkte
Jill Schmied 50
Vorabend Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35

Einfache Tabelle

Vorname Familienname, 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>
Versuch es selber "

Grenzt Tabelle

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

Beispiel

<table class="w3-table w3-border">
Versuch es selber "

Gestreifte Tabelle

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

Beispiel

<table class="w3-table w3-striped">
Versuch es selber "

Angrenzende Gestreifte Tabelle

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

Beispiel

<table class="w3-table w3-bordered w3-striped">
Versuch es selber "

Rahmen um eine gestreifte Tabelle

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-border">
Versuch es selber "

Das Umlegen des Stripes

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

Um die Streifen drehen, fügen Sie einfach <thead> um den Tabellenkopf:

Beispiel

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Versuch es selber "

Tabelle mit einer farbigen Überschrift

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

Beispiel

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Versuch es selber "

Tabelle Farben

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

Beispiel

<table class="w3-table w3-blue">
Versuch es selber "

Hoverable Tabelle

Die w3-hoverable Klasse fügt eine graue Hintergrundfarbe bei mouse-over:

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Versuch es selber "

Wenn Sie eine bestimmte Farbe schweben möchten, fügen Sie eine der w3-Hover-Klassen zu jedem <tr> -Element:

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

Beispiel

<tr class="w3-hover-green">
Versuch es selber "

Tabelle als Karte

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-card-4">
Versuch es selber "

Responsive Tabelle

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

Versuchen Sie, den Bildschirm, um die Größe der Effekt zu sehen.

Vorname Familienname, Nachname Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte Punkte
Jill Schmied 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Vorabend Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Beispiel

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Versuch es selber "

Tiny Table

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-tiny">
Versuch es selber "

Kleiner Tisch

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-small">
Versuch es selber "

Große Tabelle

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-large">
Versuch es selber "

XLarge Tabelle

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

Beispiel

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Versuch es selber "

XXLarge Tabelle

Name Punkte
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Beispiel

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Versuch es selber "

XXXLarge Tabelle

Name Punkte
Schmied 50
Jackson 94
Johnson 67
Nilson 35

Beispiel

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Versuch es selber "

Jumbo Tabelle

Name Punkte
Schmied 50
Jackson 94
Johnson 67
Nilson 35

Beispiel

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Versuch es selber "

❮ Zurück Weiter Kapitel ❯