Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Tabellen <table> <tr> <td> » Tabellenzellen verbinden

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:

A B C
1 2 3

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:

A B C
1 2 3

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> 
A
1 2 3

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:

A B C
1 3

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details