Tabellen-Zellen miteinander verbinden

Wenn wir nun Tabellenzellen miteinander verbinden möchten, dass z.B. anstatt 3 Zellen nur eine vorhanden ist, funktioniert das über colspan und rowspan.

Im folgenden Beispiel sollen das Feld A, B, C miteinander verbunden werden, damit nur der Inhalt von A übrig bleibt.

So sieht normalerweise die Tabelle aus:

A B C
1 2 3

Nun kommt der Befehl colspan zum Einsatz - nachdem wir die Zellen A, B und C verbinden möchten, also colspan="3"

<table border="1">
  <tr>
    <td colspan="3" > A </td>
    <td> B </td>
    <td> C </td>
  </tr>  
  <tr>
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>  
  </tr> 
</table>

Das hat die Auswirkung:

A B C
1 2 3

Die Zelle B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden <td> löschen, und gut ist

<table border="1">
  <tr>
    <td colspan="3" > A  </td>

  </tr>
  <tr>
    <td> 1  </td>
    <td> 2  </td>
    <td> 3  </td>
  </tr>
</table>
A
1 2 3

Das gleiche klappt auch in der Vertikalen mit rowspan. Wir wollen anstatt ABC nun B und 2 verbinden.

<table border="1">
  <tr>
    <td> A  </td>
    <td rowspan="2" > B  </td>
    <td> C  </td>
  </tr>
  <tr>
    <td> 1  </td>

    <td> 3  </td>
  </tr>
</table>

Und nun haben wir Platz für den Inhalt auf der rechten Seite:

A B C
1 3
vorheriges Kapitel: Tabellenkopf u. Fuß
nächstes Kapitel: Online stellen
Tabellenkopf u. FußSeitenanfangOnline stellen
eBook HTML-Seminar.de
del.icio.usMister Wong         Tabellenkopf u. FußSeitenanfangOnline stellen
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de