Übungen zum Tabellenaufbau

Zuerst eine einfache Tabelle mit 3 Zeilen und 4 Spalten

1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4 

<table border="1">
<tr>
 <td bgcolor="cccccc"> 1-1</td>
 <td bgcolor="cc9999"> 1-2</td>
 <td bgcolor="33ccff"> 1-3</td>
 <td bgcolor="33ff00"> 1-4</td>
</tr>
<tr>
 <td bgcolor="aaaaaa"> 2-1</td>
 <td bgcolor="cc6666"> 2-2</td>
 <td bgcolor="3399ff"> 2-3</td>
 <td bgcolor="33cc00"> 2-4</td>
</tr>
<tr>
 <td bgcolor="888888"> 3-1</td>
 <td bgcolor="cc0000"> 3-2</td>
 <td bgcolor="3366ff"> 3-3</td>
 <td bgcolor="339900"> 3-4</td>
</tr>
</table>


Zur besseren Übersicht machen wir die Zellen verschieden breit und hoch.

1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4 

<table align="center" width="300" border="1">
<tr>
 <td bgcolor="cccccc" height="15" width="30"> 1-1</td>
 <td bgcolor="cc9999" width="40"> 1-2</td>
 <td bgcolor="33ccff" width="50"> 1-3</td>
 <td bgcolor="33ff00" width="60"> 1-4</td>
</tr>
<tr>
 <td bgcolor="aaaaaa" height="30"> 2-1</td>
 <td bgcolor="cc6666"> 2-2</td>
 <td bgcolor="3399ff"> 2-3</td>
 <td bgcolor="33cc00"> 2-4</td>
</tr>
<tr>
 <td bgcolor="888888" height="40"> 3-1</td>
 <td bgcolor="cc0000"> 3-2</td>
 <td bgcolor="3366ff"> 3-3</td>
 <td bgcolor="339900"> 3-4</td>
</tr>
</table>


Als Nächstes versuchen wir die Reihe 1-1 bi 1-3 zu verbinden. Dazu werden wir das Attribut rowspan in der 1.Zelle (1-1) unterbringen und den Wert auf drei , da drei Zeilen, festlegen

1-1 1-2 1-3 1-4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4 
 
<table border="1">
<tr>
 <td bgcolor="cccccc" rowspan="3" height="15"
                   width="30"> 1-1</td>
 <td bgcolor="cc9999" width="40"> 1-2</td>
 <td bgcolor="33ccff" width="50"> 1-3</td>
 <td bgcolor="33ff00" width="60"> 1-4</td>
</tr>
<tr>
 <td bgcolor="aaaaaa" height="30"> 2-1</td>
 <td bgcolor="cc6666"> 2-2</td>
 <td bgcolor="3399ff"> 2-3</td>
 <td bgcolor="33cc00"> 2-4</td>
</tr>
<tr>
 <td bgcolor="888888" height="40"> 3-1</td>
 <td bgcolor="cc0000"> 3-2</td>
 <td bgcolor="3366ff"> 3-3</td>
 <td bgcolor="339900"> 3-4</td>
</tr>
</table>

Perfektes Kuddelmuddel! So sollte das aber nicht ausschauen. Also, was ist passiert? Offensichtlich sind die Felder 2-1 nd 3-1 verdrängt worden. Man kann aber auch sagen diese beiden Felder sind bereit im Feld 1-1 enthalten und daher zweimal vorhanden.


Somit versuche ich die beiden überschüssigen Felder zu löschen. Man wird sehen was dabei herauskommt. Ich bemerke gerade, dass durch die Nummerierung der Zellen die überschüssigen Felder leichter zu finden sind. Daher kann man den Schluss ziehen: Bei komplexeren Tabellen ist diese Kennzeichnung von Vorteil.

1-1 1-2 1-3 1-4
2-2 2-3 2-4
3-2 3-3 3-4 
 
<table border="1">
<tr>
 <td bgcolor="cccccc" rowspan="3" height="15"
                   width="30"> 1-1</td>
 <td bgcolor="cc9999" width="40"> 1-2</td>
 <td bgcolor="33ccff" width="50"> 1-3</td>
 <td bgcolor="33ff00" width="60"> 1-4</td>
</tr>
<tr>
 <td bgcolor="cc6666" height="30"> 2-2</td>
 <td bgcolor="3399ff"> 2-3</td>
 <td bgcolor="33cc00"> 2-4</td>
</tr>
<tr>
 <td bgcolor="cc0000" height="40"> 3-2</td>
 <td bgcolor="3366ff"> 3-3</td>
 <td bgcolor="339900"> 3-4</td>
</tr>
</table>

Befriedigt schau ich umher und warte auf Applaus :-).
Auf eines muss man jedoch noch aufpassen. Da die Höhenangabe der Zellen im jeweils ersten <td>-Tag steht und dieser gelöscht wurde muss man dieses Attribut umschreiben auf den neuen <td>-Tag.
Nebenbei bemerkt: wenn jemand mir im Workshop bis hierher gefolgt ist, dann durchschaut man das HTML-System schon ein bisserl.

Als Nächstes wird die Zelle 1-2 bis Zelle 1-4 verbunden. Dazu wird das Attribut colspan in der Zelle 1-2 eingesetzt

1-1 1-2 1-3 1-4
2-2 2-3 2-4
3-2 3-3 3-4
Dargestellt wird nur die erste Reihe: 

<tr>
 <td bgcolor="cccccc" rowspan="3" height="15"
                   width="30"> 1-1</td>
 <td colspan="3" bgcolor="cc9999"
                   width="40"> 1-2</td>
 <td bgcolor="33ccff" width="50"> 1-3</td>
 <td bgcolor="33ff00" width="60"> 1-4</td>
</tr>


Eine Skulptur aber keine Tabelle. Was ist passiert? Die Zelle 1-2 besteht aus drei Zellen. Die Zellen 1-3 und 1-4 sind zu viel, da bereits in Zelle 1-2 enthalten, und die darunterliegenden sammeln sich logischerweise unter der Zelle 1-2 (die ja drei Zellen beinhaltet).
Also die Zellen 1-3 und 1-4 müssen entfernt werden und falls dadurch Attribute mitgelöscht werden, sind diese in den verbleibenden Zellen unterzubringen.

1-1 1-2
2-2 2-3 2-4
3-2 3-3 3-4 

<table align="center" width="250" border="1">
<tr>
 <td bgcolor="cccccc" rowspan="3" height="15"
                   width="30"> 1-1</td>
 <td colspan="3" bgcolor="cc9999"
       width="40"> 1-2</td>
 </tr>
 <tr>
 <td width="40" bgcolor="cc6666" height="30"> 2-2</td>
 <td width="50" bgcolor="3399ff"> 2-3</td>
 <td width="60" bgcolor="33cc00"> 2-4</td>
</tr>
<tr>
 <td bgcolor="cc0000" height="40"> 3-2</td>
 <td bgcolor="3366ff"> 3-3</td>
 <td bgcolor="339900"< 3-4</td>
</tr>
</table>


Man kann auch - von einem Feld ausgehend- gleich zeitig mehrere Zellen waagrecht und senkrecht verbinden. In nachfolgenden Fall ging ich von Zelle 2-2 aus und ergänzte die Html-Zeile mit colspan=2 und rowspan=2. Wie bereits gehabt verschiebt sich alles. Wie man sieht ist Zelle 2-3, 3-2 und 3-3 zuviel und müssen gelöscht werden.

1-1 1-2
2-2 2-3 2-4
3-2 3-3 3-4


Was nimmer stimmt sind die Höhen die muss man jetzt nachrechnen und entsprechend einsetzen. Die Höhen waren ursprünglich 15, 30 und 40 Pixl = 85 Pixl. Die Breiten waren 30, 40, 50 und 60 Pixl. Nach Einsatz der nachgerechneten Ausmaße und entfernen der unnötigen Zellen hab ich wieder eine Tabelle

1-1 1-2
2-2 2-4
3-4 
 

 <table align="center" width="250" border="1"><tr>
   <td bgcolor="cccccc" rowspan="3" height="85"
         width="30"> 1-1</td>
   <td colspan="3" bgcolor="cc9999" width="40">
         1-2</td>
  </tr>
  <tr>
   <td rowspan="2" colspan="2" width="40" bgcolor=
        "cc6666" height="90"> 2-2</td>
   <td height="30" width="60" bgcolor="33cc00"> 2-4</td>
  </tr>
  <tr>
   <td height="40" bgcolor="339900"> 3-4</td>
  </tr>
</table>


Mit dieser Tabellengrundlage kann man dann ohne weiters eine Seite herstellen. Nur die Maße muss man ändern.


  1. Inhalt
  2. Links
  3. Hinweise
 Bilder
freundlich mysticBild
Vergrößern-Bild anklicken
drohung
Vergrößern-Bild anklicken



Zurück zur Tabellenseite