Meisterung von HTML-Tabellenspalten

Einführung

Das HTML <col>-Tag wird verwendet, um die Eigenschaften jeder Spalte einer Tabelle separat zu definieren. In diesem Lab werden Sie lernen, wie Sie das <col>-Tag verwenden, um die Spalten einer HTML-Tabelle zu gestalten.

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/TablesGroup(["Tables"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/tables -.-> lab-70726{{"HTML-Tabellenspalte"}} html/complex_tbl -.-> lab-70726{{"HTML-Tabellenspalte"}} html/tbl_access -.-> lab-70726{{"HTML-Tabellenspalte"}} html/custom_attr -.-> lab-70726{{"HTML-Tabellenspalte"}} end

Erstellen einer HTML-Tabelle

In der index.html-Datei Ihres Projekts fügen Sie den folgenden Code hinzu, um eine einfache HTML-Tabelle zu erstellen:

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Produktname</th>
    <th>Preis</th>
    <th>Menge</th>
  </tr>
  <tr>
    <td>Produkt 1</td>
    <td>10 $</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Produkt 2</td>
    <td>20 $</td>
    <td>10</td>
  </tr>
</table>

Styling columns with `<col>` tag

Jetzt fügen wir das <col>-Tag hinzu, um die Spalten der Tabelle zu gestalten. Ersetzen Sie das <colgroup>-Tag im obigen Code durch folgenden Code:

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

Im obigen Code haben wir das <col>-Tag mit dem style-Attribut hinzugefügt, um unterschiedlichen Hintergrundfarben auf jede Spalte der Tabelle anzuwenden.

Verwenden des `span`-Attributs

Sie können das span-Attribut des <col>-Tags verwenden, um mehrere Spalten gleichzeitig anzuzeigen. Beispiel:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

In diesem Beispiel zeigt das zweite <col>-Tag zwei Spalten gleichzeitig an, indem es das span-Attribut mit dem Wert 2 verwendet.

Verwenden von Global- und Ereignisattributen

Das <col>-Tag unterstützt Globalattribute und Ereignisattribute, um zusätzliche Gestaltung und Funktionalität den Tabellenspalten hinzuzufügen. Beispielsweise können Sie das class-Attribut verwenden, um eine CSS-Klasse den Spalten hinzuzufügen:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Jetzt können Sie CSS-Stile auf die Tabellenspalten mit den Klassen .product-name und .price-quantity anwenden.

Hinzufügen von Einheiten zu Tabellenspalten

Sie können Einheiten zu Tabellenspalten hinzufügen, wie Währung oder Prozentwerte, indem Sie die Pseudo-Elemente ::before und ::after und CSS verwenden. Beispiel:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

Im obigen Code fügt das Pseudo-Element ::before ein Dollarzeichen vor den Werten in den ersten beiden Spalten hinzu, während das Pseudo-Element ::after ein Prozentzeichen nach den Werten in der letzten Spalte hinzufügt.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie das HTML <col>-Tag verwenden, um die Spalten einer HTML-Tabelle zu gestalten. Sie haben auch gelernt, wie Sie das span-Attribut, Globalattribute und Ereignisattribute verwenden, um zusätzliche Gestaltung und Funktionalität den Tabellenspalten hinzuzufügen. Schließlich haben Sie gelernt, wie Sie Einheiten zu Tabellenspalten mit CSS und Pseudo-Elementen hinzufügen.

HTML-Tabellenspalte