HTML colspan-Attribut

Das HTML-Attribut colspan lässt eine einzelne Tabellenzelle über zwei oder mehr Spalten verlaufen. Es ist das HTML-Äquivalent von „Zellen verbinden" in einer Tabellenkalkulation: Anstatt pro Spalte einer Zeile eine eigene Zelle zu haben, weisen Sie einer Zelle einen colspan-Wert zu, sodass sie den horizontalen Platz mehrerer Spalten einnimmt. So erstellen Sie Zusammenfassungszeilen, gruppierte Kopfzeilen und Layouts, bei denen ein Inhalt zu mehr als einer Spalte gehört.

Diese Seite behandelt die Werte, die colspan akzeptiert, welche Elemente es unterstützen, wie man es mit rowspan kombiniert, um gleichzeitig Spalten und Zeilen zu überspannen, Barrierefreiheitsaspekte für Kopfzellen sowie das moderne CSS, das die alte border="1"-Formatierung ersetzt.

Welche Elemente colspan unterstützen

colspan kann nur auf den beiden Tabellen-Zell-Elementen verwendet werden:

<td> — eine normale Datenzelle. colspan legt fest, über wie viele Spalten die Datenzelle reicht.
<th> — eine Kopfzelle. colspan legt fest, über wie viele Spalten die Kopfzeile beschriftet.

Es ist nicht gültig auf <table>, <tr>, <col> oder anderen Elementen. Um ganze Spalten an einer einzigen Stelle zu steuern, verwenden Sie stattdessen <col>/<colgroup> — das Überspannen von Zellen selbst gehört jedoch immer zu <td> oder <th>.

Werteregeln

Der Wert von colspan ist eine positive ganze Zahl (1, 2, 3, …):

colspan="1" ist der Standardwert — eine normale Zelle, die eine einzelne Spalte umfasst. Sie müssen ihn selten explizit schreiben.
Jeder Wert größer als 1 lässt die Zelle über so viele Spalten reichen. Die Zelle belegt Spaltenpositionen der übrigen Zellen in derselben Zeile, sodass jedes colspan die Anzahl der Geschwisterzellen in dieser Zeile verringert.
Der HTML-Standard begrenzt den Wert auf 1000; größere Zahlen werden auf diesen Wert reduziert.
colspan="0" war eine alte HTML4-Idee mit der Bedeutung „alle verbleibenden Spalten überspannen". Es ist nicht Teil des HTML Living Standard und wird nicht zuverlässig von Browsern unterstützt — verwenden Sie es daher nicht, sondern geben Sie stattdessen eine explizite positive ganze Zahl an.

Wenn Sie einen colspan-Wert angeben, der größer ist als die tatsächlich verfügbaren Spalten in der Zeile, erstreckt der Browser die Zelle einfach bis zum Rand der Tabelle; es werden keine zusätzlichen Spalten erzeugt.

Syntax

<td colspan="value"> ... </td>
<th colspan="value"> ... </th>

Beispiel des HTML-colspan-Attributs auf dem `<td>`-Element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Month</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>March</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>April</td>
        <td>$150</td>
      </tr>
      <tr>
        <td colspan="2">Total: $250</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Die letzte Zeile hat nur ein <td>, nicht zwei, da colspan="2" dafür sorgt, dass diese einzelne Zelle sowohl die Spalte „Month" als auch die Spalte „Salary" füllt. Würden Sie colspan weglassen, fehlte in dieser Zeile eine Zelle und das Tabellenlayout würde kaputt gehen.

Beispiel des HTML-colspan-Attributs auf dem `<th>`-Element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
      <tr>
        <td>February</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Probier es selbst »

Kombination von colspan und rowspan

colspan überspannt Spalten (horizontal); sein Gegenstück rowspan überspannt Zeilen (vertikal). Sie werden fast immer zusammen behandelt, da reale Tabellen beides benötigen — zum Beispiel eine Kopfzeile, die mehrere Spalten über Unterüberschriften beschriftet, oder eine Beschriftungszelle, die mehrere Zeilen nach unten abdeckt.

Sie können beide Attribute auf derselben Zelle verwenden, damit sie einen rechteckigen Block aus Spalten und Zeilen gleichzeitig überspannt. Wie bei colspan allein muss jede Zelle, die eine andere Zelle „überdeckt", aus dem Markup der Zeile entfernt werden, in der sie erschienen wäre — andernfalls enthält diese Zeile zu viele Zellen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <table>
      <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Contact</th>
      </tr>
      <tr>
        <th>Phone</th>
        <th>Email</th>
      </tr>
      <tr>
        <td>Anna</td>
        <td>555-0101</td>
        <td>[email protected]</td>
      </tr>
    </table>
  </body>
</html>

Hier bewirkt rowspan="2", dass die Kopfzeile „Name" in die zweite Kopfzeile hineinreicht, während colspan="2" der Kopfzeile „Contact" ermöglicht, über „Phone" und „Email" zu stehen. Weitere Informationen zum Aufbau solcher Strukturen finden Sie auf der Seite HTML Tables.

Tabellenkanten mit CSS gestalten

Das in den Beispielen verwendete Attribut border="1" ist die alte Methode zum Zeichnen von Zellrahmen. Es ist in modernem HTML veraltet — verwenden Sie stattdessen CSS. Die wichtigste Eigenschaft ist border-collapse: collapse, die die doppelten Zellrahmen zu einzelnen gemeinsamen Linien zusammenführt:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #666;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>15</td>
      </tr>
    </table>
  </body>
</html>

Damit haben Sie volle Kontrolle über Rahmenfarbe, -breite und -abstände, was das border-Attribut nicht leisten kann.

Barrierefreiheit für überspannende Kopfzellen

Wenn ein <th> mehrere Spalten überspannt, benötigen Bildschirmleseprogramme Hilfe beim Verstehen, welche Datenzellen es beschreibt. Fügen Sie eines der folgenden Attribute hinzu:

Das scope-Attribut auf der Kopfzeile — scope="colgroup" für eine Kopfzeile, die mehrere Spalten überspannt, oder scope="col" für eine einzelne Spalte. Dies ist die einfachste Option für überschaubare Tabellen.
Geben Sie bei komplexen Tabellen jeder Kopfzeile eine id und verweisen Sie von den entsprechenden Datenzellen mit dem headers-Attribut (headers="h1 h2") darauf.

Eine Spaltengruppen-Kopfzeile sollte beispielsweise als <th colspan="2" scope="colgroup">Contact</th> ausgezeichnet werden, damit unterstützende Technologien sie mit beiden überspannten Spalten verbinden.

Übungsaufgabe

Übung

Was ist der Hauptzweck des HTML colspan-Attributs?

Es macht die Tabellenüberschriften fett.Es ändert die Farbe von Tabellenzellen.Es legt fest, über wie viele Spalten sich eine Zelle horizontal erstrecken soll.Es legt fest, über wie viele Zeilen sich eine Zelle vertikal erstrecken soll.Es richtet den Text innerhalb der Tabellenzellen aus.