HTML verstehen Teil 6: Tabellen II

HTML verstehen Teil 6: Tabellen Teil II

Nach der Einführung des Grundgerüstes einer HTML-Tabelle im Teil 1, soll es heute um die Ausschmückung dieser HTML-Tabelle gehen. Mit welchen Attributen können Sie die Grundtabelle praktikabler und schöner machen? Sicherlich ist das mit CSS machbar, nur möchte ich hier zunächst nur im äußersten Notfall auf CSS ausweichen. Lernen Sie also die Tabelle mit den „Hausmitteln“ des HTML kennen. Weitere Ausschmückungen können Sie dann später noch machen.

Sehen Sie sich doch mal unsere Tabelle im Teil 1 an:

Tabellenkopf
Zeile 1, Spalte 1 Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Tabellenkopf ausrichten

Was fällt Ihnen auf?
Der Tabellenkopf steht links und nicht quer über die Tabelle! Unschön, nicht wahr? Wie wäre es mit…

Tabellenkopf
Zeile 1, Spalte 1 Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Wie Ihnen in der 1. Tabelle ausgefallen sein dürfte, ist der Tabellenkopf in der linken Zelle der Überschrift – des Tabellen headers ! Hhmm! Beim Absatz-Tag <p> haben Sie ein Attribut align=“left“ oder align = „center“ kennen gelernt. Richtig das geht auch hier. Es bezieht sich aber nur auf die Tabellenzelle nicht auch die ganze Tabellenzeile!
Erinnern Sie sich doch mal an Excel, auch hier können Sie durch „Zellenzusammenfassung“ zwei benachbarte Zellen einer Tabelle zu einer zusammenfügen.

Das geht auch in HTML durch das Attribut colspan=“[anzahl der Spalten]“ Fassen wir beides zusammen bekommen Sie:
<th colspan=“2″ align=“center“>Tabellenkopf</th>
Das Fettschriftschreiben des Tabellenkopftextes übernimmt übrigens das HTML-Tag <th> selbst

Beide Attribute sind natürlich nicht auf das Tag <th> beschränkt. Sie können es auch auf das <td>-Tag anwenden, wie ich es in der Zelle „Zeile 3,Spalte1“ gemacht habe! Hab ich mal so eingeschmuggelt! Die Zeile lautet nun
<td align=“center“>Zeile 3, Spalte 1</td>
Und wie Sie sehen, sehen Sie nix! Warum?

Tabellenbreiten

Mr. Browser hat eine Automatik, er versucht die Breiten der Tabellen, wenn er keine sonstigen Attribute findet an den längsten Zellen auszurichten, um ein schönes Erscheinungsbild zu erhalten! Nett von Mr. Browser, oder? Deshalb ist Mr. Browser die align=“center“ Angabe egal, denn die Zelle ist so klein, dass die Ausrichtung hier gar nicht auffällt.

Verändern Sie aber doch mal den Text von Zelle „Zeile 1 Spalte 1“ indem Sie den Text ändern in „Zeile1, Spalte 1 und noch ein wenig mehr“:

Tabellenkopf
Zeile 1, Spalte 1 und noch ein wenig mehr Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Mr. Browser bleibt bei der Tabellen Ausrichtung, nur dass er die 1.Spalte um den Text vergrößert. Jetzt sehen Sie auch die Wirkung des align-Attributs in Zelle 3,1!
Schön von Mr. Browser, doch kann Ihnen diese Angewohnheit des Herrn auch ziemlich auf die Nerven gehen.
Was machen Sie, wenn Sie feste Breiten der Spalten haben wollen, in den Spalten aber kürzere und längere Text haben? Mit Leerzeichen können Sie nichts ausrichten,
da Mr. Browser, diese ja bis auf eines immer abschneidet! Was also tun? Ersatzzeichen für das Leerzeichen ? Also &nbsp; ?

Das Attribut width rettet Sie vor den vielen Leerzeichen. Die Angaben im Attribut width können in Pixel oder in Prozent angegeben werden. Die Grundlage der Prozente ist die durch den <table>-Tag umfasste Größe. Beim Table-Tag selbst zieht sich die Prozentangabe auf die Breite des Bildschirms davor.

Verwenden Sie am Besten immer Prozentangaben. Sie können das width-Attribut bei <td>, <th> angeben. Sie schalten damit das Bestreben von Mr. Browser, eine „schöne“ Tabelle zu zeichnen nicht aus, Sie geben ihm nur Richtlinien wie breit die Tabellenelemente minimal sein sollen.

Durch das nette Verhalten von Mr. Browser, brauchen Sie nur für eine Zeile die width-Angaben zu machen, doch sollten Sie darauf achten, dass die width-Angaben für alle
<td>-Tags einer Zeile sich zu 100% addieren.

Machen wir ein Beispiel und schauen uns an was daraus wird:

<table border=“1″ width=“100%“>
<tr>
<th colspan=“2″ align=“center“>Tabellenkopf</th>
</tr>
<tr>
<td width=“30%“>Zeile 1, Spalte 1 und noch ein wenig mehr</td>
<td width=“70%“>Zeile 1, Spalte 2</td>
</tr>
<tr>
<td>Zeile 2, Spalte 1</td>
<td>Zeile 2, Spalte 2</td>
</tr>
<tr>
<td align=“center“>Zeile 3, Spalte 1</td>
<td>Zeile 3, Spalte 2</td>
</tr>
</table>

Daraus wird

Tabellenkopf
Zeile 1, Spalte 1 und noch ein wenig mehr Zeile 1, Spalte 2
Zeile 2, Spalte 1 Zeile 2, Spalte 2
Zeile 3, Spalte 1 Zeile 3, Spalte 2

Wie Sie sehen, hat Mr. Browser uns beim Wort genommen und in der Zelle 1,1 den Text nicht in eine Zeile geschrieben sondern hat einen Zeilenumbruch gemacht. Der brave hört auf Sie, merken Sie das?

Im nächsten Artikel – ja der Stoff für Tabellen ist groß – wird es um weitere Ausgestaltungen von Tabellen gehen, weitere Attribute für Zellengröße, Farben werden aufgeführt. Falls Sie aber bis dorthin schon Fragen haben, bitte stellen Sie diese, denn ich möchte, dass Sie die Tabelle völlig verstehen. Zum Schluss der Tabellenserie, wird es ein Beispiel geben, wo Sie mit ein wenig CSS die Einrahmungen der Tabelle noch weiter perfektionieren können, gerade wenn Sie eine Tabelle in Blog-Widgets, auf einer Verkaufsseite etc. einsetzen wollen. Denn Sie werden mir recht geben, der Rand (border) der Tabelle sieht bisher nicht schön aus! Um aber auch diese Dinge eingehen zu können, müssen Sie die Struktur und die Gestaltung der Tabellen verstanden haben.

Also wenn bis hierher Fragen sind, dann schreiben Sie mir bitte einen Kommentar.

Gruß
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar