DruckversionTabellenzellen
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
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.
Dieser Beitrag ist öffentlich.
Zugriff auf alle Inhalte haben Sie als Mitglied
Werden Sie Probemitglied - kostenlos.
Ohne finanzielles Risiko haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Die Anmeldung dauert drei Minuten. Sie können während der ersten 14 Tage ohne Angabe von Gründen stornieren. Eine E-Mail genügt.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied