Standard-HTML-Tabellen sehen ziemlich enttäuschend aus – peppen Sie sie mit einigen gut aussehenden CSS-Effekten auf.

Das Hinzufügen einer Tabelle zu Ihrer Website ist eine nützliche Möglichkeit, große Informationsmengen übersichtlich darzustellen. Tabellen bieten außerdem eine effiziente Platznutzung und erleichtern das Lesen und Vergleichen komplexer Daten.

Mit CSS können Sie Tabellen optisch ansprechender gestalten. Dies kann auch die allgemeine Benutzererfahrung für Ihre Website verbessern.

Modernes Design mit einzelnen Zeilen und Spalten

Sie können ein einfaches Tabellendesign mit einzelnen Zeilen und Spalten und ohne verbundene Zellen hinzufügen. Die Gestaltung der Tabelle stellt auch sicher, dass Ihre Webseite für den Benutzer ansprechend ist. Abgesehen von der Tischgestaltung gibt es noch andere coole HTML-Effekte Und CSS zeigt Website-Layouts an Sie können Ihre Website hinzufügen.

Sie können den Code für diese Übung in its GitHub-Repository.

  1. Fügen Sie in einer neuen HTML-Datei die grundlegende HTML-Codestruktur hinzu:
    instagram viewer 
    html>
    <html>
    <Kopf>
    <Titel>Mein einfacher TischTitel>
    Kopf>
    <Körper>

    Körper>
    html>
  2. Fügen Sie innerhalb des Körpers Tabellen-Tags hinzu:
    <Tisch>

    Tisch>
  3. Das HTML-Tabellenelement sollte enthalten Tischreihe -Tags für jede Zeile in der Tabelle. Die oberste Zeile wird üblicherweise für Überschriften verwendet. Verwenden Tabellenkopf HTML-Tags zur Darstellung jeder Spalte in der Tabelle:
    <tr>
    <th>Kopfzeile 1th>
    <th>Kopfzeile 2th>
    <th>Kopfzeile 3th>
    tr>
  4. Fügen Sie weitere Zeilen unterhalb der Kopfzeile hinzu. Verwenden Tabellendaten HTML-Tags zum Hinzufügen von Daten zu jeder Zelle in der Tabelle:
    <tr>
    <td>Zeile 1, Spalte 1td>
    <td>Zeile 1, Spalte 2td>
    <td>Zeile 1, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 2, Spalte 1td>
    <td>Zeile 2, Spalte 2td>
    <td>Zeile 2, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 3, Spalte 1td>
    <td>Zeile 3, Spalte 2td>
    <td>Zeile 3, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 4, Spalte 1td>
    <td>Zeile 4, Spalte 2td>
    <td>Zeile 4, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 5, Spalte 1td>
    <td>Zeile 5, Spalte 2td>
    <td>Zeile 5, Spalte 3td>
    tr>
  5. Fügen Sie ein Style-Tag innerhalb des Head-Tags hinzu. Fügen Sie der Tabelle ein allgemeines Styling hinzu, z. B. Schatten, abgerundete Tabellenecken, Schriftarten und Ränder:
    <Stil>
    Tisch {
    Grenze zusammenbrechen: Zusammenbruch;
    Breite: 100%;
    Farbe: #333;
    Schriftfamilie: Arial, serifenlos;
    Schriftgröße: 14px;
    Textausrichtung: links;
    Grenzradius: 10px;
    Überlauf: versteckt;
    Box Schatten: 0 0 20pxRGB(0, 0, 0, 0.1);
    Rand: Auto;
    Rand-oben: 50px;
    Rand unten: 50px;
     } 
    Stil>
  6. Gestalten Sie die Tabellenüberschrift, um ihr eine Hintergrundfarbe und ausgerichteten Text zu geben:
    Tischth {
    Hintergrundfarbe: #ff9800;
    Farbe: #F f f;
    Schriftstärke: deutlich;
    Polsterung: 10px;
    Text-Transformation: Großbuchstaben;
    Buchstaben-Abstand: 1px;
    Rand-oben: 1pxsolide#F f f;
    Rand unten: 1pxsolide#ccc;
    }
  7. Gestalten Sie die Tabellenzeilen so, dass sie zwischen grauen und weißen Farben wechseln und einen Effekt hinzufügen, wenn Sie mit der Maus über die Zeile fahren:
    Tischtr:n-tes Kind (gerade)td {
    Hintergrundfarbe: #f2f2f2;
    }
    Tischtr:schwebentd {
    Hintergrundfarbe: #ffedcc;
    }
  8. Gestalten Sie die Daten in den Zellen der Tabelle:
    Tischtd {
    Hintergrundfarbe: #F f f;
    Polsterung: 10px;
    Rand unten: 1pxsolide#ccc;
    Schriftstärke: deutlich;
    }
  9. Öffnen Sie Ihre HTML-Datei, um die Tabelle in einem Webbrowser anzuzeigen:

Mehrzeiliges Zellentabellendesign

Einige Tabellen enthalten Spalten mit zusammengeführten Zeilen, um eine mehrzeilige Zelle zu bilden.

  1. Entfernen Sie alle aktuellen Tabellenzeilen und behalten Sie nur die oberste mit den Überschriften bei:
    <Tisch>
    <tr>
    <th>Kopfzeile 1th>
    <th>Kopfzeile 2th>
    <th>Kopfzeile 3th>
    tr>
    Tisch>
  2. Erstellen Sie eine mehrzeilige Zelle mit dem rowspan-Attribut. Dadurch wird diese Zelle über die angegebene Anzahl von Zeilen erweitert.
     Abschnitt 1 
    <tr>
    <tdZeilenspanne="2">Mehrzeilige Zelletd>
    <td>Zeile 1, Spalte 2td>
    <td>Zeile 1, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 2, Spalte 2td>
    <td>Zeile 2, Spalte 3td>
    tr>
  3. Wenn Sie eine weitere mehrzellige Zeile mit einem anderen Rowspan-Wert hinzufügen, fügen Sie die entsprechende Anzahl von hinzu Tabellenzeilen HTML-Tags. Dies entspricht der Höhe oder Anzahl der Zeilen, über die sich die Zelle erstreckt. Wenn eine Zelle beispielsweise eine Zeilenspanne von 3 hat, müssen Sie drei Zeilen zu den anderen Spalten hinzufügen, um die Tabelle richtig auszurichten.
     Sektion 2 
    <tr>
    <tdZeilenspanne="3">Mehrzeilige Zelletd>
    <td>Zeile 3, Spalte 2td>
    <td>Zeile 3, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 4, Spalte 2td>
    <td>Zeile 4, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 5, Spalte 2td>
    <td>Zeile 5, Spalte 3td>
    tr>
  4. Öffnen Sie Ihre HTML-Datei, um die Tabelle in einem Webbrowser anzuzeigen:

Zusammengeführtes Zeilentabellendesign

Ähnlich wie mehrzeilige Zellen können Tabellen auch Zeilen haben, die über mehrere Spalten hinweg zusammengeführt werden.

  1. Entfernen Sie alle aktuellen Tabellenzeilen und behalten Sie nur die oberste mit den Überschriften bei:
    <Tisch>
    <tr>
    <th>Kopfzeile 1th>
    <th>Kopfzeile 2th>
    <th>Kopfzeile 3th>
    tr>
    Tisch>
  2. Fügen Sie der Tabelle weitere Tabellenzeilen hinzu. Verwenden Sie das Attribut colspan, um eine der Zeilen über 3 Spalten hinweg zusammenzuführen:
     Abschnitt 1 
    <tr>
    <tdStil="Hintergrundfarbe: #ffedcc"colspan="3">Q1td>
    tr>
    <tr>
    <td>Zeile 2, Spalte 1td>
    <td>Zeile 2, Spalte 2td>
    <td>Zeile 2, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 3, Spalte 1td>
    <td>Zeile 3, Spalte 2td>
    <td>Zeile 3, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 4, Spalte 1td>
    <td>Zeile 4, Spalte 2td>
    <td>Zeile 4, Spalte 3td>
    tr>
  3. Fügen Sie eine weitere zusammengeführte Zeile hinzu, um die Abschnitte der Tabelle zu trennen:
     Sektion 2 
    <tr>
    <tdStil="Hintergrundfarbe: #ffedcc"colspan="3">Q2td>
    tr>
    <tr>
    <td>Zeile 6, Spalte 1td>
    <td>Zeile 6, Spalte 2td>
    <td>Zeile 6, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 7, Spalte 1td>
    <td>Zeile 7, Spalte 2td>
    <td>Zeile 7, Spalte 3td>
    tr>
    <tr>
    <td>Zeile 8, Spalte 1td>
    <td>Zeile 8, Spalte 2td>
    <td>Zeile 8, Spalte 3td>
    tr>
  4. Öffnen Sie Ihre HTML-Datei, um die Tabelle in einem Webbrowser anzuzeigen:

Verwenden Sie attraktive Tabellen, um das Beste aus Ihren Daten zu machen

HTML-Tabellen sind eine großartige Möglichkeit, strukturierte Daten auf Ihrer Website anzuzeigen. Sie können sie mit CSS gestalten, um die Standarddarstellung zu verbessern. Stellen Sie jedoch sicher, dass Sie sich nicht hinreißen lassen und Tabellen für das Layout verwenden – aus Gründen der Barrierefreiheit sollten Sie sie ausschließlich für Daten verwenden.

Das Erstellen und Aktualisieren größerer Tabellen kann mühsam sein, insbesondere wenn Sie Spalten und Zeilen verwenden, die sich überspannen. Sie können Ihren eigenen Code schreiben, um das Markup zu generieren, oder freundlichere Syntaxen wie Markdown nutzen.