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 übrigbleibt.

So sieht normalerweise die Tabelle aus:

Nun kommt bei dem Befehl <td> das Attribut colspan zum Einsatz - nachdem wir die Zellen A, B und C verbinden möchten, also <td 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:

Die Zellen 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> 

Das gleiche klappt auch in der Vertikalen mit dem Attribut 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: