# Lektion 10: Tabellen

Tabellen werden verwendet um “Tabellendaten” anzuzeigen, also Informationen, welche logisch – in Zeilen und Spalten angeordnet – präsentiert werden können.

## Ist das schwierig?

Tabellen in HTML zu bauen mag am Anfang schwierig aussehen. Aber wenn Sie cool bleiben und Schritt für Schritt vorgehen, ist es eigentlich ganz logisch. So wie alles andere bei HTML auch.

Beispiel 1:

    	<table>
    	  <tr>
    		<td>Zelle 1</td>
    		<td>Zelle 2</td>
    	  </tr>
    	  <tr>
    		<td>Zelle 3</td>
    		<td>Zelle 4</td>
    	  </tr>
    	</table>

sieht im Browser wie folgt aus:

Zelle 1 | Zelle 2
Zelle 3 | Zelle 4

## Wo ist der Unterschied zwischen TR und TD Tags

Werfen Sie einen nochmal einen kurzen Blick auf das obige Beispiel, dies ist wohl das bisher schwerste. Lassen Sie uns kurz den Code auseinandernehmen und die Tags erklären:

Drei verschiedene Elemente werden benötigt, um Tabellen zu erzeugen:

- Der Start-Tag `<table>` öffnet und der End-Tag `</table>` schließt die Tabelle. Logisch.
- Eine Tabellenzeile wird durch `<tr>` (steht für “table row”, also Tabellenzeile) und `</tr>` geöffnet bzw. geschlossen. Auch logisch.
- Ein Eintrag in der Tabelle (Tabellenzelle) wird mit `<td>` und `</td>` umschlossen. `td` steht für “table data”, was man mit Tabellendaten übersetzen kann. Sie sehen, alles einfach und logisch.

Hier eine kurze Erklärung des Beispiels 1: Die Tabelle startet mit einem `<table>` und wird gefolgt von einem `<tr>`, welches der Beginn einer neuen Zeile ist. Zwei Tabellenzellen werden in diese Zeile eingefügt: `<td>Zelle 1</td>` and `<td>Zelle 2</td>`. Danach wird die Zeile mit `</tr>` geschlossen und gleich beginnt eine neue Zeile mit `<tr>`. Auch diese enthält zwei Zellen. Die Zeile wird mit `</tr>` und die Tabelle am Schluß mit `</table>` geschlossen.

Noch ein Hinweis zum weiteren Verständnis: Zeilen werden die horizontalen Tabellenzellen genannt und von Spalten spricht man bei den vertikalen Tabellenzellen.

Zelle 1 | Zelle 2
Zelle 3 | Zelle 4

Zelle 1 und Zelle 2 bilden eine Zeile. Zelle 1 und Zelle 3 bilden eine Spalte.

Im gerade gezeigen Beispiel hat die Tabelle zwei Zeilen und zwei Spalten. Eine Tabelle kann aber eine unbegrenzte Anzahl an Zeilen und Spalten haben.

Beispiel 2:

    	<table>
    	  <tr>
    		<td>Zelle 1</td>
    		<td>Zelle 2</td>
    		<td>Zelle 3</td>
    		<td>Zelle 4</td>
    	  </tr>
    	  <tr>
    		<td>Zelle 5</td>
    		<td>Zelle 6</td>
    		<td>Zelle 7</td>
    		<td>Zelle 8</td>
    	  </tr>
    	  <tr>
    		<td>Zelle 9</td>
    		<td>Zelle 10</td>
    		<td>Zelle 11</td>
    		<td>Zelle 12</td>
    	  </tr>
    	</table>

sieht im Browser wie folgt aus:

Zelle 1 | Zelle 2 | Zelle 3 | Zelle 4
Zelle 5 | Zelle 6 | Zelle 7 | Zelle 8
Zelle 9 | Zelle 10 | Zelle 11 | Zelle 12

## Gibt es auch Attribute?

Natürlich! Z.B. gibt es das Attribut `border` (engl. für Grenze, Begrenzung). Dieses wird verwendet um die Dicke der Rahmen (Begrenzungslinien) der Tabelle anzugeben:

Beispiel 3:

    	<table border="1">
    	  <tr>
    		<td>Zelle 1</td>
    		<td>Zelle 2</td>
    	  </tr>
    	  <tr>
    		<td>Zelle 3</td>
    		<td>Zelle 4</td>
    	  </tr>
    	</table>

sieht im Browser wie folgt aus:

Zelle 1 | Zelle 2
Zelle 3 | Zelle 4

Die Dicke der Begrenzungslinien wird in Pixeln angegeben – siehe Lektion 9

Genau wie bei Bildern können Sie auch die Breite von Tabellen in Pixeln angeben. Alternativ dazu ist auch eine Prozentangabe möglich.

Beispiel 4:

    	<table border="1" width="30%">

Dieses Beispiel wird im Browser als Tabelle angezeigt, deren Breite 30% des Bildschirmes beträgt. Probieren Sie’s aus!

## Mehr Attribute?

Es gibt viele Attribute für Tabellen. Hier sind noch zwei weitere:

- `align` gibt die horizontale Ausrichtung (alignment) des Inhaltes in der Tabelle, einer Tabellenspalte oder einer einzelnen Zelle an. Werte für dieses Attribut sind `left` (links), `center` (zentriert) oder `right` (rechts).
- `valign` gibt die vertikale Ausrichtung (vertical alignment) des Inhaltes in einer Tabellenzelle. Werte für dieses Attribut sind z.B. `top` (oben), `middle` (in der Mitte) oder `bottom` (unten).

Beispiel 5:

    	<td align="right" valign="top">Zelle 1</td>

## Was kann ich in meine Tabellen einfügen?

Theoretisch können Sie alles in Tabellen einfügen: Text, Links und Bilder … ABER Tabellen sind dafür gedacht “Tabellendaten” anzuzeigen (also Informationen, welche in Zeilen und Spalten präsentiert werden sollten). Bitte nehmen Sie davon Abstand Dinge in Tabellen zu packen, bloß weil diese nebeneinander angezeigt werden sollen.

Früher (also eigentlich ist es erst ein paar Jahre her) wurden Tabellen als Layoutwerkzeug herangezogen. Wenn Sie aber die Präsentation von Texten und Bildern kontrollieren möchten, gibt es heute für solche Zwecke einen viel besseren Weg (Stichwort: CSS). Mehr dazu später.

Jetzt setzen Sie das soeben gelernte in die Praxis um und entwerfen Sie ein paar Tabellen in verschiedenen Größen, mit verschiedenen Attributen und Inhalten. Das sollte Sie ein wenig beschäftigen.