Tabellen

 Realisierung mit dem Editor

Ein weiteres Gestaltungsmittel sind Tabellen, vor allem auch als "blinde Tabelle", bei denen der Rand nicht sichtbar ist. Sie erlauben, Text und Grafik gezielter zu positionieren, als es sonst möglich ist.
Zur Demonstration wird hier eine Tabelle mit Rand definiert:

1. Zeile, 3. Spalte

Und so sieht der HTML-Text zu dieser Tabelle aus:
(Keine Angst! Mithilfe eines Editors gestaltet sich das Erstellen einer solchen Tabelle recht harmlos.)

  <table border="1">                                    Tabelle mit Rand
    <colgroup>                                          Spaltendefinition
      <col width="200">                                 Breite 200 Pixel
      <col width="100">                                 Breite 200 Pixel
      <col width="100">                                 ebenso!
    </colgroup>
    <tr>                                                Beginn der 1. Zeile
      <td>1. Zeile, 1. Spalte</td>                      Datenfeld
      <td>1. Zeile, 2. Spalte<br>                       dto. mit 2 Zeilen
        1. Zeile, 2. Spalte</td>
      <td><pre>1. Zeile, 3. Spalte</pre></td>           dto. mit <pre>-Text
    </tr>                                               Ende der 1. Zeile

    <tr valign="top">                                   2. Zeile: Text oben
      <td align="center">2. Zeile, 1. Spalte</td>       Im Feld: Text mittig
      <td align="center">2. Zeile, 2. Spalte<br>        dto.
        2. Zeile, 2. Spalte<br>
        2. Zeile, 2. Spalte</td>
      <td></td>                                         Leeres Feld (kein Rand!)
    </tr>

    <tr valign="bottom">                                In der Zeile: Text unten
      <td align="right">3. Zeile, 1. Spalte</td>        Im Feld: Text rechts
      <td>3. Zeile, 2. Spalte<br>
        3. Zeile, 2. Spalte</td>
      <td>&nbsp;</td>                                   Scheinbar leeres Feld
    </tr>                                                (geschütztes Leerzeichen)
  </table>                                              Ende der Tabelle

Problematisch bleibt die Bestimmung der Spaltenbreiten, für die man in der Regel lediglich eine Untergrenze angeben kann. Die Breite richtet sich stets nach dem Inhalt der Tabellenzelle. Große Bilder oder "pre"-formatierter Text zerstören u.U. den schönsten Tabellenaufbau. Nur mit einigem Aufwand (und guter Planung) kann man die Spaltenbreite kontrollieren.
Um den Aufbau vor allem großer Tabellen zu beschleunigen, sollte man stets die Spalten vorweg definieren, wie es oben mit colgroup bzw. col geschehen ist.

Bedeutung der Tag-Bezeichnungen:

tr	table row = Tabellenreihe/~zeile
td	table data = Tabellendaten (Eintrag in einer Zelle)
align	(hier: horizontale) Ausrichtung; Werte: left, center, right
valign	vertical align = vertikale Ausrichtung; Werte: top, middle, bottom
 	nonbreaking space = nicht umbrechbares Leerzeichen

 Realisierung mit dem Editor