Tabellen anpassen

Es ist manchmal erforderlich, Inhalte der Tabellenzellen z. B. zentriert oder auch rechtsbündig darzustellen. Manchmal ist auch notwendig, die Höhe der Zellen anzupassen.

Dazu existieren Attribute für den <td>-Tag.

Im folgenden Quelltext wurden diese Attribute eingebaut - vergleiche den Quelltext mit dem jeweiligen Aussehen auf der rechten Seite!

<table width="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="150">Titel 1 </th>
<th width="144">Titel 2</th>
</tr>
<tr>
<td height="40">links und mittig </td>
<td align="right" valign="bottom">rechts und unten </td>
</tr>
<tr>
<td height="39" align="center" valign="top">zentriert und oben </td>
<td align="center" valign="middle">zentriert und mittig </td>
</tr>
</table>

Im obigen Beispiel finden wir die folgenden Attribute:

Attribut Werte Wirkung
height
z. B. "40" Höhe in Pixeln
align
left center right horizontale Ausrichtung des Textes
valign
top middle bottom vertikale Ausrichtung des Textes

Diese Werte beziehen sich immer auf die jeweilige Zelle! Wird für eine Zelle eine Höhe angegeben, vergrößern sich automatisch alle Zellen auf diesen Wert!

Aufgabe

  1. Lege eine Datei: tabelle1.htm an.
    Die Tabelle (300 Pixel breit) soll dabei das folgende Aussehen haben :

    Attribut Wirkung
    rechtsbündig zentriert mit einer Höhe von 50 Pixeln
    Höhe 50 Pixel unten links 90 Pixel breit und oben rechts ausgerichtet

Das sieht dann so aus:

Titel 1 Titel 2
links und mittig rechts und unten
zentriert und oben zentriert und mittig