HTML Tutorial - Tabellen gestalten

HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Tabellen in HTML Teil II
Mit Tabellentechniken können Sie die unterschiedlichsten Pobleme in der Regel sehr einfach lösen. Sie können Tabellen auf dem Bildschirm erzeugen, die von der Darstellung auch als Tabellen fungieren und Daten tabellarisch anzeigen. Sie können mit Tabellen, jedoch auch Ihrer HTML Seite ein entsprechendes Layout zu weisen.

<title>Mustermanns Blumentips</title>

<!--

body { background-color:#33EE00; color:#002000; font-family:Times; }

th { background-color:navy; color:white; }

.zentriert { text-align:center; }

.hervorgehoben { font-family:Arial; font-size:200%; color:navy; }

.weissHG { background-color:white; }

.goldHG { background-color:#FFC200; color:black; text-align:center; }

-->

</style>
</head>
<body>

<tr>

<th>Nummer</th>

</tr>

<tr>

<td style="width:200px" class="weissHG">Blumentip 1</td>

<td>

Vergessen Sie nie Ihre Blumen zu gießen!

</td>

</tr>

<td style="height:100pt">Blumentip 2</td>

<td>Nachtschattengewächse im Dunkeln lagern</td>

</tr>

</table>

</body>
</html>

So sieht's im Browser aus...

Die Tabelle hat immer noch 3 Zeilen und 2 Spalten, jedoch wurden die Standardvorgaben durch zusätzlich verwendete Attribute bzw. CSS-Formatierungen verändert. Zunächst bewirkt die CSS-Formatierung

th { background-color:navy; color:white; }

dass der Hintergrund eines Tabellenkopfes stets marineblau und der Text weißfarbig ist. Eine solche CSS-Anweisung ist sinnvoll, wenn alle Tabellenköpfe des Dokuments gleich aussehen sollen.

Sollen einzelne Tabellenzellen farblich markiert werden, so kann man das mit CSS-Klassen machen, wie hier mit den Klassen weissHG oder goldHG für weißen oder goldfarbenen Hintergrund.

Das td-Tag wird mit zusätzlichen Attributen ausgezeichnet, welche direkten Einfluss auf die jeweiligen Zelleninhalte haben:

text-align:center: Zelleninhalt wird (horizontal) zentriert
vertical-align:top: Zelleninhalt wird nach oben ausgerichtet. Optionen:
- vertical-align:top: obenbündig
- vertical-align:middle: mittig
- vertical-align:bottom: untenbündig
- vertical-align:baseline: an der Grundlinie des Textes ausgerichtet
- vertical-align:sub: tiefergestellt (gleiche Schriftgröße)
- vertical-align:super: höhergestellt (gleiche Schriftgröße)
- vertical-align:text-top: am oberen Schriftrand ausgerichtet
- vertical-align:text-bottom: am unteren Schriftrand ausgerichtet
Näheres siehe unter de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align
width="200": Zellenbreite wird auf 200 Pixel gesetzt

Hinweis:
Eine Veränderung der Maße einer Zelle wirkt sich natürlich auf die Zellen der anderen Zeilen aus: Die veränderten Breitenangaben der einzelnen Zellen in der 1. Reihe nehmen direkten Einfluss auf die darunter folgenden Zellen der 2. Reihe (da ja die breiteste Zelle in einer Reihe die gesamte Breite einer Spalte angibt).

CSS-Attribute zur Zeilenhöhe:
style="line-height:100pt": Zellenhöhe 100 Punkte

Hinweis zur Zeilenhöhe:
Da es in der Vergangenheit oft Probleme einiger Browser mit Höhenangaben gab, arbeitete man oft mit Blindgif-Techniken, gerade wenn man ein pixelgenaues Layout vorgeben möchte: Hierbei wird die Zellenhöhe durch ein transparentes Gif erzwungen. Diese Technik ist jedoch nicht elegant und sollte in aktuellen Browserversionen, die alle CSS-Formate verstehen, kein echtes Problem sein. Weitere Hinweise: de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]