HTML/Tabellen/Zellen verbinden

← Tabellenbeschriftung

HTML/Tabellen
(Übersicht)

Gestaltung mit CSS →

Text-Info

15min

leicht

Grundkenntnisse in
● HTML

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.

Achtung!

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 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. In XHTML ist das schließende <col>-Tag aber erforderlich. Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie daher das col-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <col />.

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