HTML lernen (2): Tabellen erstellen

Tabellenzellen

∅ 2.3 / 4 Bewertungen

Tabellenzellen

Auf dieser Seite

Auch für die Gestaltung einzelner Tabellenzellen stehen Attribute zur Verfügung. Werden die Attribute im <tr>-Tag eingesetzt, bezieht sich die Anweisung auf die ganze Tabellenzeile. Soll das Attribut nur für eine Zelle gelten, müssen Sie die entsprechenden HTML-Anweisungen im <td>- oder <th>-Tag notieren.

Attribute

align="X"

Linksbündig: align="left"
Rechtsbündig: align="right"
Zentriert: align="center"

Standardmäßig werden alle Eingaben in den Tabellenzellen linksbündig ausgerichtet. Die horizontale Ausrichtung lässt sich mit dem <align>-Tag bestimmen.

Beispiel:

<table border="1" width="100%">
<tr>
<td align="left">Montag</td>
<td align="center">Dienstag</td>
<td align="right">Mittwoch</td>
</tr>
</table>

valign="X"

Oben: valign="top"
Mitte: valign="middle"
Unten: valign="bottom"

Mit dem Attribut valign kann die vertikale Ausrichtung geändert werden.

Beispiel:

<table border="1" height="80">
<tr>
<td valign="top">Januar</td>
<td valign="middle">Februar</td>
<td valign="bottom">März</td>
</tr>
</table>

width="X%" / width="X"

Bestimmt die Breite von Tabellenspalten. Das Attribut kann in <td>- und <th>-Tags eingesetzt werden. Der Wert für das Attribut width kann relativ (prozentual zum Browser-fenster) oder absolut (als Pixelwert) angegeben werden.

Beispiel:

<table border="1" width="100%">
<tr>
<td width="90%">Berlin</td>
<td width="10%">Hamburg</td>
</tr>
</table>

height="X%" / height="X"

Legt die Höhe der Tabellenzeile fest. Die Werte können relativ (prozentual zum Browser-Fenster, z.B. 90%) oder absolut (als Pixelwert, z.B. 500) angegeben werden.

Beispiel:

<table border="1" height="250">
<tr>
<td height="80">Montag</td>
</tr>
<tr>
<td height="170">Dienstag</td>
</tr>
</table>

bgcolor="#XXXXXX"

Bestimmt die Hintergrundfarbe der Tabellenzelle.

Beispiel:

<table border="1">
<tr>
<td bgcolor="0099FF">Dänemark</td>
<td bgcolor="0066CC">Schweden</td>
</tr>
</table>

nowrap

Verhindert den Umbruch innerhalb einer Zelle.

Beispiel:

<table border="1">
<tr>
<td nowrap valign="top">Fischer's Fritz fischt frische Fische,
frische Fische fischt Fischer's Fritz.</td>
<td>Bißchen eng hier.</td>
</tr>
</table>

Übung

Aufgabe:

In dieser Übung werden zur Gestaltung der einzelnen Zellen einige der oben aufgeführten Attribute eingesetzt. Legen Sie als erstes bitte eine neue HTML-Datei an. Bestimmen Sie anschließend das Aussehen der Tabellen indem Sie die passenden HTML-Anweisungen einsetzen.

  • Die Tabelle besteht aus zwei Spalten und drei Zeilen.

  • Breite der Tabelle 100% des Browser-Fensters.

  • Höhe der Tabelle 200 Pixel.

  • Breite der ersten Spalte = 70%

  • Breite der zweiten Spalte = 30%

  • Rahmenstärke ein Pixel.

  • Horizontale Ausrichtung der ersten Spalte = rechtsbündig

  • Horizontale Ausrichtung der zweiten Spalte = zentriert

  • Vertikale Ausrichtung der ersten Zeile = oben

  • Vertikale Ausrichtung der zweiten und dritten Zeile = unten

  • Hintergrundfarbe für alle Zellen der ersten Zeile = "#006699"

  • Hintergrundfarbe für alle Zellen der zweiten Zeile = "#00CCCC"

  • Hintergrundfarbe für alle Zellen der zweiten Zeile = "#00FFFF"

Hier finden Sie die Lösung.