HTML-Tabelle definieren und erstellen

Einführung

HTML-Tabellen werden üblicherweise verwendet, um tabellarische Daten auf Webseiten anzuzeigen. In diesem Lab werden Sie lernen, wie man mit den <table>, <tr>, <td>- und <th>-Tags einfache HTML-Tabellen erstellt.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. 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.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 85% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Tabelle erstellen

Lassen Sie uns beginnen, indem wir eine neue HTML-Datei namens index.html erstellen und die grundlegende Struktur einrichten. Innerhalb der <body>-Tags erstellen Sie ein <table>-Element. Dieses Element wird alle Zeilen und Spalten Ihrer Tabelle enthalten.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Zeilen definieren

Als nächstes definieren Sie die Zeilen Ihrer Tabelle mit dem <tr>-Tag. Jede Zeile wird eine oder mehrere Zellen enthalten. Um eine einzelne Zelle zu erstellen, verwenden Sie das <td>-Tag.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Zeile 1, Zelle 1</td>
        <td>Zeile 1, Zelle 2</td>
      </tr>
      <tr>
        <td>Zeile 2, Zelle 1</td>
        <td>Zeile 2, Zelle 2</td>
      </tr>
    </table>
  </body>
</html>

Hinzufügen eines Tabellenkopfes

In einigen Fällen möchten Sie möglicherweise eine Kopfzeile zu Ihrer Tabelle hinzufügen. Dazu verwenden Sie das <th>-Tag anstelle des <td>-Tags.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Kopfzeile 1</th>
        <th>Kopfzeile 2</th>
      </tr>
      <tr>
        <td>Zeile 1, Zelle 1</td>
        <td>Zeile 1, Zelle 2</td>
      </tr>
      <tr>
        <td>Zeile 2, Zelle 1</td>
        <td>Zeile 2, Zelle 2</td>
      </tr>
    </table>
  </body>
</html>

Hinzufügen von Bordüren und Stilen

Standardmäßig haben HTML-Tabellen minimalen Stil und keine Bordüren. Um einer Tabelle eine Bordüre hinzuzufügen, verwenden Sie die CSS-Eigenschaft border.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Kopfzeile 1</th>
        <th>Kopfzeile 2</th>
      </tr>
      <tr>
        <td>Zeile 1, Zelle 1</td>
        <td>Zeile 1, Zelle 2</td>
      </tr>
      <tr>
        <td>Zeile 2, Zelle 1</td>
        <td>Zeile 2, Zelle 2</td>
      </tr>
    </table>
  </body>
</html>

Zusammenfassung

Durch das Folgen dieses Tutorials haben Sie gelernt, wie man eine grundlegende HTML-Tabelle erstellt und sie mit CSS formatiert. Tabellen können durch Hinzufügen von Attributen wie colspan und rowspan zu Zellen sowie durch Verwendung zusätzlicher Tags wie <caption> und <thead> weiter personalisiert werden. Mit diesen Tools können Sie komplexe und informierende Tabellen erstellen, um Daten auf Ihren Webseiten anzuzeigen.