HTML-Kurs Lektion 10 Teil 2

Lektion 10/Teil 2 - Colspan und Rowspan

Wenn eine Spalte oder eine Tabellenreihe über mehrere Reihen oder Spalten gehen soll, benutzt man den Befehl Colspan bzw. Rowspan.

Wenn eine Tabelle erzeugt werden soll, die in der ersten Reihe drei Spalten und in der zweiten Reihe nur eine Spalte hat, dann sehen die Befehle dazu so aus:

<TABLE BORDER=1 CELLSPACING=3 CELLPADDING=3>
   <TR>
      <TD> 1. Spalte </TD>
      <TD> 2. Spalte </TD>
      <TD> 3. Spalte </TD>
   </TR>
   <TR>

<TD COLSPAN=3>

Eine Spalte, die über die Länge von den drei oberen Spalten geht.</TD>

</TR>
</TABLE>

Und so sieht die Tabelle aus:

1. Spalte	2. Spalte	3. Spalte
Eine Spalte, die über die Länge von den drei oberen Spalten geht.

Im nächsten Beispiel geht die erste Spalte über die Länge von drei Reihen. Damit die erste Spalte über die drei Reihen geht, bekommt der Befehl <TD> den Zusatz ROWSPAN=X. Und so sehen die Befehle dazu aus:

<TABLE BORDER=1 CELLSPACING=3 CELLPADDING=3>
   <TR>
      <TD ROWSPAN=3> Diese Spalte geht über die Länge von drei Reihen. </TD>
      <TD> Tabelleninhalt der zweiten Spalte in der ersten Reihe. </TD>
   </TR>
   <TR>
      <TD> Tabelleninhalt der zweiten Spalte in der zweiten Reihe. </TD>
   </TR>
   <TR>
      <TD> Tabelleninhalt der zweiten Spalte in der dritten Reihe. </TD>
   </TR>
</TABLE>

Und so sieht die Tabelle aus:

Diese Spalte geht über die Länge von drei Reihen.	Tabelleninhalt der zweiten Spalte in der ersten Reihe.
	Tabelleninhalt der zweiten Spalte in der zweiten Reihe.
	Tabelleninhalt der zweiten Spalte in der dritten Reihe.

Colspan und Rowspan kann man auch in einer Tabelle verwenden:

<HTML>
<HEAD>
   <TITLE>Colspan und Rowspan</TITLE>
</HEAD>

<BODY TEXT="#FF0000" BGCOLOR="#FFCC00">

<TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>
   <TR>
      <TD ROWSPAN=6>Diese Spalte geht über sechs Reihen</TD>
      <TD COLSPAN=4>Diese Spalte geht über die Breite von vier Spalten</TD>
      <TD ROWSPAN=6>Diese Spalte geht über sechs Reihen</TD>
   </TR> <TR>
      <TD ROWSPAN=2>Diese Spalte geht über zwei Reihen</TD>
      <TD COLSPAN=2>Diese Spalte geht über die Breite von zwei Spalten</TD>
      <TD ROWSPAN=2>Diese Spalte geht über zwei Reihen</TD>
   </TR> <TR>
      <TD>Eine Spalte</TD>
      <TD>Eine Spalte</TD>
   </TR> <TR>
      <TD ROWSPAN=2>Diese Spalte geht über zwei Reihen</TD>
      <TD>Eine Spalte</TD>
      <TD>Eine Spalte</TD>
      <TD ROWSPAN=2>Diese Spalte geht über zwei Reihen</TD>
   </TR> <TR>
      <TD COLSPAN=2>Diese Spalte geht über die Breite von zwei Spalten</TD>
   </TR> <TR>
      <TD COLSPAN=4>Diese Spalte geht über die Breite von vier Spalten</TD>
   </TR>
</TABLE>

</BODY>
</HTML>

Beispiel anzeigen

zur Lektion 10/3