Mit Tabellen Website-Layout´s umzusetzen ist zwar längst überholt, aber wenn man denn mal wirklich eine Tabelle braucht,
sollte man zumindest Wissen, wie man eine Tabelle anlegt.

Wie erstellt man eine Tabelle?

<table>
  <tr>
    <th>Ãœberschrift 1</th>
    <th>Ãœberschrift 2</th>
    <th>Ãœberschrift 3</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
    <td>Spalte 3</td>
  </tr>
</table>

Mit dem „table“-Tag wird eine Tabelle eingeleitet. Das „tr“ steht führt eine Zeile ,
die Zeilen enthalten jeweils 3 Spalten die man mit „td“ erstellt. Das „th“-Tag verhält sich genau wie ein „td“,
allerdings wird das „th“ als eine Spalten-Ãœberschrift (Head) verwendet.

Das ist nun unsere Basis, es gibt aber noch reichlich nützliche Formatierungen die man bei einer Tabelle Anwenden kann und sollte.
Hier die meiner Meinung nach am wichtigsten und am häufigsten verwendeten Formatierungen:

Ausrichtung von Zellen

Standardmäßig wird der Inhalt einer Zelle Vertikal- und Horizontalzentriert in dieser ausgegeben. Wenn man aber den Inhalt nun von links oder rechts sowie oben oder unten ausgerichtet haben möchte,
kann man das mit Hilfe von „align“ für die Horizontale Ausrichtung und mit „valign“ für die Vertikale Ausrichtung tun.

Folgende Angaben sind zulässig und auf „tr“ und „li“ anwendbar:

align=“left“ = Horizontal links ausgerichtet
align=“center“ = Horizontal mittig ausgerichtet
align=“right“ = Horizontal rechts ausgerichtet

valign=“top“ = Vertikal links ausgerichtet
valign=“middle“ = Vertikal mittig ausgerichtet
valign=“bottom“ = Vertikal rechts ausgerichtet

Anwendungsbeispiel

<table style="border-collapse: collapse;">
  <tr valign="top">
    <th align="left">Ãœberschrift 1</th>
    <th align="left">Ãœberschrift 2</th>
  </tr>
  <tr>
    <td align="left">Spalte 1</td>
    <td valign="top">Spalte 2</td>
  </tr>
</table>

border-collapse

Im Normalfall, sind die Zellenrahmen (border) einer Tabelle getrennt, so dass man 2 Rahmen hat. Mit „border-collapse“ kann man entscheiden,
ob die Rahmen der einzelnen Zellen zusammenfallen oder standartmäßig getrennt sein sollen.

Folgende Angaben sind zulässig:

border-collapse: seperate = Standartwert 2 getrennte Rahmen
border-collapse: collapse = Rahmen fallen zusammen und werden zu 1

„border-collapse“ bietet sich an, wenn man die eine Tabelle optisch anpassen und den Standart Rahmen durch einen eigenen (border) ersetzen möchte.

Anwendungsbeispiel

<table style="border-collapse: collapse;">
  <tbody>
  <tr>
    <th>Ãœberschrift 1</th>
    <th>Ãœberschrift 2</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
  </tr>
  </tbody>
</table>

Zellen verbinden

Wenn man bestimmte Zellen Verbinden möchte z.B. soll in einer 3-Spaltigen Tabelle die erste Zeile nur eine Tabelle für eine Ãœberschrift enthalten, setzt man dieses mit „colspan“ oder einem „rowspan“ um.

„colspan“ verbindet Zellen einer Spalte miteinander man schreibt: colspan=“3″ in das th/td welches sich über in dem falle 3 spalten erstrecken soll.
„rowspan“ Verbindet Zellen einer Zeile auf die gleiche Weise: rowspan=“2″ hier nimmt die Zelle 2 Zeilen in Anspruch so dass Sie nicht nochmal in der Zeile darunter angelegt werden muss.

Anwendungsbeispiel

<table>
  <tr>
    <th colspan="2">Ãœberschrift 1 und 2</th>
    <th>Ãœberschrift 3</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
  <td rowspan="2">Spalte 3 und 6</td>
  </tr>
  <tr>
    <td>Spalte 4</td>
    <td>Spalte 5</td>
  </tr>
</table>

Tabellenrahmenabstände

Um den Tabellenrahmenabstand zu einander zu beeinflussen, kann man die Formatierung „border-spacing“ nutzen.

Anwendungsbeispiel

<table style="border-spacing: 5pt;">
  <tr>
    <th>Ãœberschrift 1</th>
    <th>Ãœberschrift 2</th>
  </tr>
  <tr>
    <td>Spalte 1</td>
    <td>Spalte 2</td>
  </tr>
</table>