Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.
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.
Inhaltsverzeichnis
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.
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.
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.
<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>
Zellen in einer Spalte verbinden - rowspan
Das Attribut rowspan
(deutsch: Zeile überspannen) erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen.
<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>
Kombination von colspan
und rowspan
<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>
Siehe auch
Weblinks
- W3C: colgroup-element