Tabellen können in HTML dazu benutzt werden um Elemente auszurichten oder zusammengehörigen Sachverhalte (z.B. gegensätzliche Thesen) darzustellen.

Tabellen werden folgendermaßen eingebunden:

<table><tr><th><!-- Überschriften --></th></tr><tr><td><!-- Inhalte --></td></tr></table>

Die Tabelle wird mit dem table-Tag begonnen. Dieser teilt dem Browser mit, dass eine Tabelle losgeht. Der tr-Tag („table row“) eröffnet eine neue Zeile. Eine Tabelle enthält eine oder mehr Zeilen. Jede Zeile enthält eine oder mehr Spalten, die mit dem td-Tag („table data“) geöffnet werden. Der th-Tag („table header“) ist für Spaltenüberschriften und kann auch weggelassen werden. Folgendes wäre also eine Tabelle ohne Überschriften und mit 2 Zeilen, sowie mit 3 Spalten pro Zeile:

<table>
  <tr>
    <td>Text 11</td>
    <td>Text 12</td>
    <td>Text 13</td>
  </tr><tr>
    <td>Text 21</td>
    <td>Text 22</td>
    <td>Text 23</td>
  </tr>
</table>

Um die Übersichtlichkeit des Quelltextes zu erhöhen empfiehlt es sich die Tags entsprechend ihrer Verschachtelung einzurücken. Was letztlich in den Spalten der Tabelle angezeigt wird ist egal. Es können in Tabellen weitere Tabellen, Links, Texte, Bilder, Frames, usw. enthalten sein. Als Beispiel können mit Tabellen Arbeitszeiten von Mitarbeitern dargestellt werden:

<table>
  <tr>
    <th>Mitarbeiter</th>
    <th>Arbeitszeit (pro Tag)</th>
    <th>Aufgaben</th>
  </tr><tr>
    <td>Xin</td>
    <td>12h</td>
    <td>proggen.org administrieren</td>
  </tr><tr>
    <td>Naums</td>
    <td>8h</td>
    <td>Artikel hinzufügen</td>
  </tr> <!-- so könnte das jetzt noch weiter gehen -->
</table>

Anzeigebeispiel:

Die Tabellen in dieser Seite passen sich der Website an. Außerhalb der proggen.org-Website haben die Tabellen, die wir oben erstellt haben, graue Ränder. Um Tabellen optisch zu gestalten gibt es es unter anderen diese Attribute:

Ein Beispiel mit linksbündiger Schrift in der gesamten Tabelle außer die Überschriften, die zentriert sind. Es gibt keine Rahmen, und die Tabelle nimmt die gesamte Fensterbreite ein. Die Inhalte sind am oberen Rand der Tabellenspalten ausgerichtet:

<table align="left" valign="middle" border="2px" width="100%">
  <tr>
    <th align="center">Mitarbeiter</th>
    <th align="center">Arbeitszeit (pro Tag)</th>
    <th align="center">Aufgaben</th>
  </tr><tr>
    <td>Xin</td>
    <td>12h</td>
    <td>proggen.org administrieren</td>
  </tr><tr>
    <td>Naums</td>
    <td>8h</td>
    <td>Artikel hinzufügen</td>
  </tr> <!-- so könnte das jetzt noch weiter gehen -->
</table>

Anzeigebeispiel:

Das align-Attribut gibt die horizontale Ausrichtung der Inhalte in der Tabelle, Zeile oder Spalte an. Es gibt folgende Attributwerte:

Das valign-Attribut gibt die vertikale Ausrichtung der Inhalte in der Tabelle, Zeile oder Spalte an. Es gibt folgende Attributwerte:

Die Festlegung der Optik innerhalb des HTML-Dokumentes ist allerdings nicht mehr gewünscht. Hierfür werden heutzutage CSS-Beschreibungen verwendet und mit der Tabelle nur noch die Daten tabellarisch strukturiert.

Das nächste Kapitel beschäftigt sich mit der Verwendung von Frames.