Komplexe Tabellenkonstruktionen
 
mit überspannenden Zellen
 
Wie oben geschrieben, müssen bei einer mehrzeiligen Tabellenkonstruktion muss jede Zeile immer gleich viele Zellen besitzen. Es ist jedoch möglich, einzelne Zellen über mehrere Spalten oder Zeilen hinweg zu spannen.
 
Zellen über mehrer Spalten spannen
Um eine Zelle über mehrere Spalten spannen zu können, wird in den entspr. <td>-Tag das Attribut colspan="Anzahl der zu überspannenden Spalten bzw. Zellen" eingefügt werden.
 
Hierbei ist das Gesetz der Gleichheit einzuhalten:
Wenn eine Zelle X Zellen in den Zeilen darunter/darüber überspannen soll, müssen die nun überzähligen Zellen in Ihrer eigenen Zeile gelöscht werden.
 
Abbildung a)

 
Abbildung b)


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Tabelle </title>
</head>
<body>
 <table border="1" width="300">
<tr>
<td colspan="2">Erste Zeile, erste Zelle</td>
 </tr>
<tr>
<td>Zweite Zeile, erste Zelle</td>
<td>Zweite Zeile, zweite Zelle</td>
 </tr>
 </table>

</body>
</html>
SO SIEHT'S AUS
 
:: Aufgabe
 

Zellen über mehrer Zeilen spannen
Um eine Zelle über mehrere Zeilen spannen zu können, wird in den entspr. <td>-Tag das Attribut rowspan="Anzahl der zu überspannenden Zeilen" eingefügt werden.
 
Hierbei ist das Gesetz der Gleichheit einzuhalten:
Wenn eine Zelle X Zeilen darunter/darüber überspannen soll, müssen die nun überzähligen Zellen in Ihrer eigenen Zeile gelöscht werden.
 
Abbildung c)

 
Abbildung d)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Tabelle </title>
</head>
<body>
 <table border="1" width="300">
<tr>
<td rowspan="2">Erste Zeile, erste Zelle</td>
<td>Erste Zeile, zweite Zelle</td>
 </tr>
<tr>
<td>Zweite Zeile, zweite Zelle</td>
 </tr>
 </table>

</body>
</html>
SO SIEHT'S AUS

:: Aufgabe

Ein weiteres Beispiel:
 
Grundtabelle:

<table border="1">
<tr>
<td>Erste Zeile, erste Zelle</td>
<td>Erste Zeile, zweite Zelle</td>
 </tr>
<tr>
<td>Zweite Zeile, erste Zelle</td>
<td>Zweite Zeile, zweite Zelle</td>
 </tr>
<tr>
<td>Dritte Zeile, erste Zelle</td>
<td>Dritte Zeile, zweite Zelle</td>
 </tr>
<tr>
<td>Vierte Zeile, erste Zelle</td>
<td>Vierte Zeile, zweite Zelle</td>
 </tr>
</table>

So sieht's aus:

Erste Zeile, erste Zelle Erste Zeile, zweite Zelle
Zweite Zeile, erste Zelle Zweite Zeile, zweite Zelle
Dritte Zeile, erste Zelle Dritte Zeile, zweite Zelle
Vierte Zeile, erste Zelle Vierte Zeile, zweite Zelle

 

Modifizierte Tabelle:

<table border="1">
<tr>
<td>Erste Zeile, erste Zelle</td>
<td rowspan="4">Erste Zeile, zweite Zelle</td>
 </tr>
<tr><td>Zweite Zeile, erste Zelle</td></tr>
<tr><td>Dritte Zeile, erste Zelle</td></tr>
<tr><td>Vierte Zeile, erste Zelle</td></tr>
 </table>

So sieht's aus:

Erste Zeile, erste Zelle  Erste Zeile, zweite Zelle
Zweite Zeile, erste Zelle
Dritte Zeile, erste Zelle
Vierte Zeile, erste Zelle
  
 		  
 
Kombinationen aus verbundenen Zellen und Spalten
 
Grundtabelle:

<table border="1">
<tr>
<td>Erste Zeile, erste Zelle</td>
<td>Erste Zeile, zweite Zelle</td>
<td>Erste Zeile, dritte Zelle</td>
</tr>
<tr>
<td>Zweite Zeile, erste Zelle</td>
<td>Zweite Zeile, zweite Zelle</td>
<td>Zweite Zeile, dritte Zelle</td>
</tr>
<tr>
<td>Dritte Zeile, erste Zelle</td>
<td>Dritte Zeile, zweite Zelle</td>
<td>Dritte Zeile, dritte Zelle</td>
</tr>
<tr>
<td>Vierte Zeile, erste Zelle</td>
<td>Vierte Zeile, zweite Zelle</td>
<td>Vierte Zeile, dritte Zelle</td>
</tr>
</table>

So sieht's aus:

Erste Zeile, erste Zelle Erste Zeile, zweite Zelle Erste Zeile, dritte Zelle
Zweite Zeile, erste Zelle Zweite Zeile, zweite Zelle Zweite Zeile, dritte Zelle
Dritte Zeile, erste Zelle Dritte Zeile, zweite Zelle Dritte Zeile, dritte Zelle
Vierte Zeile, erste Zelle Vierte Zeile, zweite Zelle Vierte Zeile, dritte Zelle

 
Modifizierte Tabelle:

<table border="1">
<tr>
<td>Erste Zeile, erste Zelle</td>
<td>Erste Zeile, zweite Zelle</td>
<td>Erste Zeile, dritte Zelle</td>
</tr>
<tr>
<td>Zweite Zeile, erste Zelle</td>
<td rowspan="3" colspan="2">Zelle über zwei Spalten und drei Zeilen</td>
 </tr>
<tr>
<td>Dritte Zeile, erste Zelle</td>
 </tr>
<tr>
<td>Vierte Zeile, erste Zelle</td>
 </tr>
</table>

So sieht's aus:

Erste Zeile, erste Zelle Erste Zeile, zweite Zelle Erste Zeile, dritte Zelle
Zweite Zeile, erste Zelle Zelle über zwei Spalten und drei Zeilen
Dritte Zeile, erste Zelle
Vierte Zeile, erste Zelle

 
:: Aufgabe
:: Aufgabe
 
   

 
Verschachtelte Tabellen

Für komplexere Layouts kann es sich anbieten, eigenständige Tabellenkonstruktionen in übergeordneten Tabellenkonstruktionen aufzubauen. Hierzu kann einfach der Befehlsatz einer komplett aufgebauten Tabelle in die Zelle einer anderen Tabelle eingefügt werden.
 

<table width="300" border="1" cellpadding="2">
<tr><td align="right" colspan="2"><strong>Kopfzeile</strong></td></tr>
<tr>
<td valign="top" class="text">
 
<table border="1" cellpadding="4" cellspacing="3">
<tr><td class="text">Button 01</td></tr>
<tr><td class="text">Button 02</td></tr>
<tr><td class="text">Button 03</td></tr>
<tr><td class="text">Button 04</td></tr>
<tr><td class="text">Button 05</td></tr>
<tr><td class="text">Button 06</td></tr>
</table>
 
</td>
<td valign="top" class="text">Flie&szlig;text, nach oben ausgerichtet</td>
</tr>
</table>

So sieht's aus:

Kopfzeile
Button 01
Button 02
Button 03
Button 04
Button 05
Button 06
 Fließtext, nach oben ausgerichtet

Ein typisches Beispiel für die Grundkonstruktion einer Website:
In der Kopfzeile rechtsbündig ein Logo, in der Zeile darunter, erste Zelle (nach oben ausgerichtet, in einer eigenen Tabellenkonstruktion), die Navigation, in der zweiten Zelle daneben, der Fließtext.
 
WARUM? SO SIEHT'S AUS
 
:: Aufgabe
:: Wiederholung