BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Weitere Tabellenformatierungen


Bisher haben wir die Grundstruktur einer Tabelle und die dort möglichen Formatierungen betrachtet. Ausgehend von der Minimaltabelle:

<table>
<tr>
<td>
</td>
</tr>
</table>

sind einige Ergänzungen möglich.

Spaltenüberschriften

So kann man eine Zelle als Überschriftenzelle formatieren, wenn man statt <td> den Tag <th> verwendet. Man sehe:

Fonds Kurse
Pictet Water € 105,35
DWS Top 50 Welt €  92,31

Die Spalten der ersten Zeile werden zentriert und fett dargestellt. Wie dieses Beispiel zeigt, kann man Text auch neben Tabellen platzieren. Dies geschieht, indem man im <table>-Tag das Attribut align="left" verwendet, um die Tabelle links und den Text rechts anzuordnen. Mit align="right" stellt man den Text auf die linke Seite und die Tabelle auf die rechte.

Der Aufbau einer Tabelle mit Spaltenüberschrift wie oben sieht minimal so aus:

<table>
<tr>
<th>
</th>
</tr>
<tr>
<td>
</td>
</tr>
</table>

Tabellenüber- bzw. -unterschrift

Eine weitere Möglichkeit, Tabellen aufzuwerten, besteht in der Tabellenüberschrift, die oberhalb oder unterhalb der Tabelle, links, recht oder zentriert erscheint. Dazu verwendet man den Tag <caption align="left|right|top|bottom">. <caption> muss unmittelbar nach dem einleitenden Tag <table> stehen. Beispiele:

oben mittig via "top"
 

unten mittig via "bottom"
 

oben links via "left"
 

oben rechts via "right"
 

Mozilla, Firefox und Netscape stellen die letzten zwei Captions nicht oberhalb der Tabelle dar, sondern seitlich, Internet Explorer und Opera zeigen sie richtig.

Auf die Tags <th> und <caption> können selbstverständlich alle Möglichkeiten der Textformatierung angewendet werden.


Aufgabe 22

Öffne im Windows-Editor die Datei geruest.htm und füge eine Tabelle aus fünf Zeilen und sechs Spalten mit einer Breite von 300 Pixeln ein. Vergib eine Tabellenüberschrift links oben mit dem Inhalt LIBOR. Definiere die erste Zeile als Spaltenüberschrift. Die Überschriften lauten: Zeitraum, USD, GBP, CHF, YEN, EURO. Die Zellen der ersten Spalte haben die Inhalte: 1 Monat, 3 Monate, 6 Monate, 12 Monate. Die Daten der restlichen Zellen entnimmst Du der nachstehenden Tabelle. Die Tabelle sollte einen Rand haben. Die Zeile mit den Währungsangaben sollte eine gemeinsame Hintergrundfarbe haben. Ebenso sollten alle Zellen unterhalb einer Währung jeweils eine eigene, durchgehende Hintergrundfarbe haben. Beachte das Problem der Lesbarkeit! Speichere die Datei mit dem <title> Libor unter uebung15.htm ab.

LIBOR
6,62 6,06 3,19 0,39 4,65
6,65 6,24 3,39 0,40 4,81
6,76 6,37 3,59 0,45 5,01
6,85 6,54 3,74 0,49 5,20