HTML/Tabellen/Zellen verbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

[Bearbeiten] Zellen in einer Zeile verbinden - colspan

  • IE
  • Opera
  • Firefox
  • Safari
  • Chrome
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Das Attribut colspan (deutsch: Spalte überspannen) erlaubt es, eine Tabellenzelle nach rechts über mehrere Spalten auszudehnen.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zellen in einer Zeile verbinden</title> <style> table, td {border: 1px solid;} </style> </head> <body> <h1>Beispiel für <code>colspan</code></h1> <table> <tbody> <tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td> <td>4. Spalte</td></tr> <tr><td colspan="3">1. Spalte</td> <td>4. Spalte</td></tr> <tr><td>1. Spalte</td> <td colspan="3">2. Spalte</td> </tr> <tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td> <td>4. Spalte</td></tr> </tbody> </table> </body> </html>
Beachten Sie, dass überspannte Zellen in der Zeile fehlen müssen.

[Bearbeiten] Zellen in einer Spalte verbinden - rowspan

  • IE
  • Opera
  • Firefox
  • Safari
  • Chrome
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Das Attribut rowspan (deutsch: Zeile überspannen) erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zellen in einer Spalte verbinden</title> <style> table, td {border: 1px solid;} </style> </head> <body> <h1>Beispiel für <code>rowspan</code></h1> <table> <tbody> <tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr> <tr><td rowspan="3">1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr> <tr> <td rowspan="3">2. Spalte</td> <td>3. Spalte</td></tr> <tr> <td>3. Spalte</td></tr> <tr><td>1. Spalte</td> <td>3. Spalte</td></tr> </tbody> </table> </body> </html>
Beachten Sie, dass bereits überspannte Zellen in den Folgezeilen fehlen müssen.

[Bearbeiten] Kombination von colspan und rowspan

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Zellen verbinden</title> <style> table, td {border: 1px solid;} </style> </head> <body> <h1>Kombination von <code>colspan</code> und <code>rowspan</code></h1> <table> <tbody> <tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr> <tr><td rowspan="3" colspan="2">1. Spalte</td> <td>3. Spalte</td></tr> <tr> <td>3. Spalte</td></tr> <tr> <td>3. Spalte</td></tr> <tr><td>1. Spalte</td> <td>2. Spalte</td> <td>3. Spalte</td></tr> </tbody> </table> </body> </html>
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML