Meisterhaftes HTML-Tabellenspalten gruppieren

Einführung

Das HTML <colgroup>-Tag wird verwendet, um verschiedene Stile auf eine oder mehrere Spalten in einer HTML-Tabelle anzuwenden. Das <colgroup>-Tag eliminiert die Notwendigkeit, Stile in jeder Zelle einer Tabelle zu definieren. Mit dem span-Attribut dieses Tags können Sie Stile auf die Spalten anwenden, auf denen Sie sie anwenden möchten.

In diesem Lab werden Sie lernen, wie Sie eine Tabelle mit farbigen Spalten mithilfe des HTML <colgroup>-Tags erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/fig_cap -.-> lab-70728{{"HTML-Tabellenspalten gruppieren"}} html/tables -.-> lab-70728{{"HTML-Tabellenspalten gruppieren"}} html/complex_tbl -.-> lab-70728{{"HTML-Tabellenspalten gruppieren"}} html/tbl_access -.-> lab-70728{{"HTML-Tabellenspalten gruppieren"}} end

Erstellen der HTML-Tabelle

Zunächst erstellen Sie eine HTML-Tabelle, auf die Sie mit dem <colgroup>-Tag Stile anwenden möchten. Fügen Sie den folgenden Code in Ihre HTML-Datei ein:

<!doctype html>
<html>
  <head>
    <title>Farbige Tabelle</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Farbige Tabelle
      </caption>
      <colgroup>
        <col style="background-color: grau;" />
        <col style="background-color: hellblau;" />
        <col style="background-color: hellgrün;" />
      </colgroup>
      <thead>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
          <th>Spalte 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Zeile 1, Spalte 1</td>
          <td>Zeile 1, Spalte 2</td>
          <td>Zeile 1, Spalte 3</td>
        </tr>
        <tr>
          <td>Zeile 2, Spalte 1</td>
          <td>Zeile 2, Spalte 2</td>
          <td>Zeile 2, Spalte 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Der obige Code erstellt eine Tabelle mit einem Rand von 1 und einer Überschrift "Farbige Tabelle". Das <colgroup>-Tag enthält drei <col>-Tags, die drei verschiedenen Spalten jeweils unterschiedliche Farben zuweisen. Das <thead>-Tag enthält drei <th>-Tags, die die Überschriften der drei Spalten enthalten. Und das <tbody>-Tag enthält zwei Zeilen mit jeweils drei Spalten.

Schreiben von CSS für eine bessere Gestaltung

In diesem Schritt werden wir CSS verwenden, um Stile auf die oben erstellte Tabelle anzuwenden.

Fügen Sie den folgenden CSS-Code in Ihre HTML-Datei ein:

<!doctype html>
<html>
  <head>
    <title>Farbige Tabelle</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: weiß;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Farbige Tabelle
      </caption>
      <colgroup>
        <col style="background-color: grau;" />
        <col style="background-color: hellblau;" />
        <col style="background-color: hellgrün;" />
      </colgroup>
      <thead>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
          <th>Spalte 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Zeile 1, Spalte 1</td>
          <td>Zeile 1, Spalte 2</td>
          <td>Zeile 1, Spalte 3</td>
        </tr>
        <tr>
          <td>Zeile 2, Spalte 1</td>
          <td>Zeile 2, Spalte 2</td>
          <td>Zeile 2, Spalte 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Überprüfen Sie den abgeschlossenen Code in Ihrer index.html-Datei. Sie sollten eine Tabelle mit drei Spalten sehen, wobei jede Spalte eine unterschiedliche Farbe hat.

Zusammenfassung

Das HTML <colgroup>-Tag wird verwendet, um verschiedene Stile auf eine oder mehrere Spalten einer Tabelle in HTML anzuwenden, wodurch die Notwendigkeit entfällt, Stile in jeder Zelle einer Tabelle zu definieren. In diesem Lab haben Sie gelernt, wie Sie eine Tabelle mit farbigen Spalten mithilfe des <colgroup>-Tags erstellen und ihr mithilfe von CSS Stile anwenden.