HTML und XHTML

Tabellen

komplizierter

Leider sind nicht alle Tabellen so pflegeleichte Kunden. Es gibt auch kompliziertere Gebilde wie etwa das folgende:

Sehen wir uns mal an, wie so etwas gemacht wird. Auf der Abbildung siehst du, wie man von einer regelmässigen Tabelle zu einer gelangt, die unserer Vorlage entspricht:

Abbildung 13: von einer regulären zu einer komplexen Tabelle

die Attribute rowspan und colspan

Und wie bringt man einzelne Zellen in dieser Tabelle dazu, miteinander zu verschmelzen?

Dazu haben wir die Attribute rowspan und colspan. Sie veranlassen eine Zelle, sich über ihre Grenzen auszudehnen (span heisst umfassen, umspannen) bis sie über mehrere Zeilen (Rows) oder Spalten (COLumns) geht. Es reicht also, eine Zelle statt mit einem einfachen <td> mit dem Tag <td rowspan="2"> einzuleiten, und schon verschmilzt sie mit ihrer nächstunteren Nachbarzelle und umspannt nun zwei Zeilen. In unserem Beispiel wird das für die Zelle mit der Abbildung so gemacht.

Andere Zellen wachsen in die Breite: die allererste Zelle in der Tabelle erstreckt sich über alle vier Spalten, was wir mit <td colspan="4"> erreichen können.

Natürlich ist sowas immer ein wenig von der persönlichen Arbeitstechnik abhängig. Manchmal hilft es, sich das kurz auf einem Blatt Papier zu skizzieren, oder diese Seite auszudrucken und die Tags in die Tabelle hinein zu schreiben. Manchmal wirft man auch bloss einen Blick auf die Lösung und sagt sich: Klar, das hätt' ich auch so gemacht.

Nämlich so:

Schön, dann wird's jetzt Zeit, sowas in ein HTML-Dokument einzufügen.

Die Tabelle, die wir hier skizziert haben, gehört in die Datei produkte/gewuerze/nelken.html.

Natürlich gehen wir auch diesmal Schritt für Schritt vor.

So weit gab's wohl noch keine Probleme.

Richtig: fünf. Du kannst die fünf <tr>-Elemente auch schon mal eintragen. Ich würde empfehlen, sie mit Leerzeilen optisch ein wenig voneinander zu trennen, das macht es leichter, sich im HTML-Code zurecht zu finden. Auf das Resultat am Bildschirm hat's aber keinen Einfluss.

Und nun kommen wir zum Interessanteren Teil der Sache.

Wie viele <td>'s oder Zellen hat's in der ersten Zeile der Tabelle?
Richtig: eine einzige.
Und über wie viele Spalten erstreckt sich die?
Richtig: über vier.

Nur um sicher zu gehen, dass wir noch auf dem richtige Weg sind - So sollte es nun aussehen:

<table>
<tr>
<td colspan="4"></td>
</tr>

OK? dann machen wir mit der zweiten Zeile weiter. Wie viele <td>'s brauchen wir hier?

Vier. Aber bei der ersten gibt's noch eine Besonderheit zu berücksichtigen.

Und hier ist der Vergleich:

<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>

Auch die dritte Zeile wartet wieder mit einer kleinen Besonderheit auf. Wie viele <td>'s brauchen wir hier?
Ganz richtig: nur drei, denn die erste Zelle haben wir schon mit Zeile 2 erledigt; die hängt hier von oben runter, aber ein neues Element ist es nicht.

Und das sollte dabei rausgekommen sein:

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

Hier sind die beiden Zeilen:

<tr>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="3"></td>
</tr>

Bis jetzt sieht unsere Seite so aus:

Nun fehlt eigentlich nur noch der Inhalt. Er befindet sich in der Datei nelken_text.txt, die bei den Übungsdateien zu finden ist. Die einzelnen Abschnitte liegen dort bereits in der Reihenfolge vor, in der sie hier in die Tabellen-Elemente einzufügen sind. Wenn Du das geschafft hast, sieht die Tabelle ungefähr so aus:

...und so sieht das dann aus: