Tabellen

Für Tabellen gibt es zwei Verwendungszwecke:

Aktuelle Browser sprechen immer besseres CSS und deshalb ist der Einsatz blinder Tabellen mittlerweile umstritten.

Ein Seitenlayout durch blinde Tabellen zu realisieren, ist (war) gängige Technik. Durch den Einsatz von Stylesheets (CSS) ergeben sich allerdings mittlerweile andere Möglichkeiten. Welches Prinzip man verfolgt, bleibt einem selbst überlassen. Je mehr ich mich mit CSS befasst habe, umso mehr habe ich mich vom Einsatz von Tabellen verabschiedet. Fakt ist, dass der Quellcode durch Tabellen doch recht unübersichtlich wird.

Aufbau einer Tabelle

Eine Tabelle wird durch <table> eingeleitet. Als Eigenschaft sollte zunächst border="1" eingefügt werden, damit man die Tabelle wenigstens in der Entwurfsphase auch sieht. Gemäss W3C ist eine Breitenangabe zulässig, eine Höhenangabe jedoch nicht. Möchten Sie beides vorgeben, können Sie dies durch die Angabe style="width:100%; height:100%" erreichen. 

<table style="width:100%; height:100%" border="1">...</table>

Die Tabelle wird nun zunächst in Zeilen (tr = table row) aufgeteilt. Die Zeilen beinhalten dann die Zellen (td = table data), welche durch mehrere Zeilen dann die Spalten bilden.

Statt der gewöhnlichen Datenzellen <td> können auch Kopfzellen <th> verwendet werden. Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet). <th> leitet eine Kopfzelle ein, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). 

<table style="width:100%; height:100%" border="1">
  <tr>  Erste Zeile
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>  Zweite Zeile
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Damit die Tabellenzellen auch korrekt angezeigt werden, müssen sie einen Inhalt haben, und sei es auch nur das geschützte Leerzeichen (STRG + Leertaste). In die Tabellenzellen können nun beliebige Inhalte (Table Data) eingefügt werden (Texte, Bilder, weitere Tabellen). Dabei nimmt sich die Zelle den Platz, den sie braucht, und gibt damit die Spaltenbreite vor. Texte werden am Zellenende automatisch umbrochen, bei Bildern geht dieses natürlich nicht. Gerade hierbei ist also auf deren Größe zu achten. Um eine Mindestbreite vorzugeben, ist die Angabe width erlaubt. Als Wert können hier Prozentangaben oder konkrete Werte gesetzt werden.

Normale Tabellen

Tabellen haben in HTML zwei Funktionen. Zunächst einmal können Daten in einer "richtigen" Tabelle wiedergegeben werden, z.B. Stundenpläne:

Stundenplan
Montag Dienstag Mittwoch Donnerstag Freitag Samstag
           
           
           
           
           
           

Tabellen gestalten

Mit CSS können Tabellen gestaltet werden. Siehe dazu auch hier.

Frühere Ansätze wie bordercolordark und bordercolorlight sind kein gültiges HTML 4.01 und sollten vermieden werden. 

    table.formatiert {
      table-layout: fixed;
      width: 80%;
      border-top: 2px solid #CFCFCF;  /* oder auch: dashed, dottet, double */
      border-right: 2px solid #50558E;
      border-bottom: 2px solid #50558E;
      border-left: 2px solid #CFCFCF;
      background: #EEEEEE;
    }
    table.formatiert td,
    table.formatiert th {
      border-top: 1px solid #CFCFCF;
      border-right: 1px solid #50558E;
      border-bottom: 1px solid #50558E;
      border-left: 1px solid #CFCFCF;
      padding: 2px 5px;
    }

Bei "table-layout: fixed" ohne Breitenangabe wird der verfügbare Platz unabhängig vom Inhalt der Zellen auf alle Spalten gleichmäßig aufgeteilt.

Näheres zur Spaltenbreite siehe SelfHTML. Siehe dort auch unter "Anzeigebeispiel"

Stundenplan
Montag Dienstag Mittwoch Donnerstag Freitag Samstag
           
           
           
           
           
           

Border Collapse

Die doppelten Gitternetzlinien kann man auch zusammenfallen lassen (border-collapse):

    table#collapse {
      table-layout: fixed;
      width: 80%;
      border-collapse: collapse;
      border: 1px solid black;
    }
    table#collapse td, table#collapse th {
      border:1px solid black;
      background:#eeeeee;
      text-align: center;
    }
Frühling Sommer Herbst Winter
       
       
       

Blinde Tabellen

Ferner gibt es noch blinde Tabellen, welche für das Layout einer Seite verwendet werden können. Jedoch gilt der Einsatz blinder Tabellen als nicht mehr zeitgemäß.

A

B

C

D

E

F

G

Die Tabelle kann nun mit Inhalten gefüllt und farblich gestaltet werden:

A

B

C

D

E

F

G