HTML/Tabellen/Zellen verbinden

Text-Info

15min

leicht

Grundkenntnisse in
● HTML
● HTML/Tabellen

Tabellenzellen können zu zwei Kontexten gehören: Zeilen und Spalten. Im HTML-Markup sind Zellen jedoch Nachkommen von Zeilen, niemals von Spalten. Dennoch können einige Aspekte von Zellen durch die Festlegung von Eigenschaften für Spalten beeinflusst werden.

Spalten gestalten

Mit colgroup ( = column group = Spaltengruppe) leiten Sie hinter dem einleitenden table-Tag eine Vorab-Definition der Tabellenspalten mit dem col-Element ( = column = Spalte) ein.

Wenn Sie dem Browser so gleich zu Beginn der Tabelle mitteilen, wie viele Spalten die Tabelle hat und wie breit diese sind, kann der Browser die Tabelle schneller aufbauen, d. h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist.

Beachten Sie: Sowohl absolute also auch relative Breitenangaben durch width-Attribute sind in HTML5 nicht mehr möglich. Verwenden Sie entsprechende CSS-Eigenschaften.

Beispiel

<table> <caption>Wochenplan</caption> <colgroup> <col> <col span="5" class="werktag"> <col span="2" class="wochenende"> </colgroup> <tr> <th>KW</th> <th scope="col">Montag</th> <th scope="col">Dienstag</th> <th scope="col">Mittwoch</th> <th scope="col">Donnerstag</th> <th scope="col">Freitag</th> <th scope="col">Samstag</th> <th scope="col">Sonntag</th> </tr> <!-- usw. andere Zeilen der Tabelle --> </table>

In diesem Beispiel werden keine <col>-Tags für jede Spalte notiert, stattdessen notieren Sie im einleitenden <colgroup>-Tag das Attribut span (span = spannen). Als Wert weisen Sie die Anzahl der gewünschten Spalten zu.

Beachten Sie: <col>-Tags dürfen in HTML kein Abschluss-Tag haben. Das abschließende </colgroup>-Tag ist dagegen optional.

Auch das <col>-Tag darf das Attribut span erhalten. Dadurch gruppieren Sie jedoch nicht mehrere Spalten zu einer, sondern Sie geben lediglich an, dass Attribute dieser Spalte auch für die nächsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span="3"> notieren, erhalten diese und die nächsten zwei Spalten die Breite von 100 Pixeln.

Das colgroup-Element darf das Attribut span auch dann enthalten, wenn es col-Elemente enthält. Dabei überschreibt die Anzahl der definierten col-Elemente jedoch die Angabe, die im span-Attribut des colgroup-Elements gemacht wurde.

Es ist auch erlaubt, mehrere colgroup-Elemente zu verwenden. So können Sie beispielsweise mit <colgroup span="3"> und <colgroup span="5"> hintereinander notiert insgesamt 8 Spalten für die Tabelle definieren.

Für die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Erzwingen von Spaltenbreiten auf herkömmliche Weise.

Zellen verbinden

Zellen in einer Zeile verbinden - colspan

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

Beispiel ansehen …

<tbody>
  <tr><td>            1. Sp.</td>             <td>2. Sp.</td> <td>3. Sp.</td> <td>4. Sp.</td></tr>
  <tr><td colspan="3">1. Sp.</td>                                             <td>4. Sp.</td></tr>
  <tr><td>            1. Sp.</td> <td colspan="3">2. Sp.</td>                                </tr>
  <tr><td>            1. Sp.</td>             <td>2. Sp.</td> <td>3. Sp.</td> <td>4. Sp.</td></tr>
</tbody>

Beachten Sie, dass überspannte Zellen in der Zeile fehlen müssen.

ansehen …

Zellen in einer Spalte verbinden - rowspan

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

Beispiel ansehen …

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

Beachten Sie, dass bereits überspannte Zellen in den Folgezeilen fehlen müssen.

ansehen …

Kombination von colspan und rowspan

Beispiel ansehen …

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

ansehen …

• Tabellenbeschriftung
• HTML/Tabellen
  (Übersicht)
• Gestaltung mit CSS

Siehe auch

• Referenz: col
• Referenz: colgroup

Weblinks

• W3C: colgroup-element