0Pricing
HTML Academy · Lektion

colspan und rowspan zum Zusammenfassen

Führen Sie Zellen über mehrere Spalten und Zeilen hinweg zusammen.

colspan und rowspan zum Zusammenfassen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was bedeutet das Zusammenfassen von Zellen?

Standardmäßig belegt jede Tabellenzelle eine Zeile und eine Spalte. Mit dem Zusammenfassen kann sich eine Zelle über mehrere Spalten oder Zeilen erstrecken:

  • colspan – über mehrere Spalten erstrecken
  • rowspan – über mehrere Zeilen erstrecken

colspan

Mit dem Attribut colspan kann sich eine Zelle über mehrere Spalten erstrecken:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

Mit dem Attribut rowspan kann sich eine Zelle über mehrere Zeilen erstrecken:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan und rowspan zusammen

Sie können beide Attribute in einer einzelnen Zelle kombinieren:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Zusammengefasste Zellen berücksichtigen

Wenn sich eine Zelle über mehrere Spalten erstreckt, lassen Sie diese Spalten in den betroffenen Zeilen weg:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Häufige Muster zum Zusammenfassen

Beispiele für das Zusammenfassen von Zellen in realen Tabellen:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan für zusammengefasste Zeilenüberschriften

Verwenden Sie rowspan, um zusammengefasste Bezeichnungen für Zeilengruppen zu erstellen:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 – Zelle über die gesamte Breite

Ein colspan von 0 erstreckt sich über alle verbleibenden Spalten in einer Spaltengruppe (wird selten verwendet):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Zusammengefasste Zellen und Barrierefreiheit

Komplexe Tabellen mit zusammengefassten Zellen benötigen die Attribute scope und headers für Screenreader:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Fehler beim Zusammenfassen von Zellen beheben

Häufige Fehler beim Zusammenfassen von Zellen:

  • Zu viele oder zu wenige Zellen in einer Zeile nach dem Zusammenfassen
  • rowspan reicht über die Anzahl der Zeilen hinaus
  • Überlappende Zusammenfassungen (zwei Zellen beanspruchen dieselbe Position)

Verwenden Sie die DevTools des Browsers, um die Tabellenstruktur zu untersuchen, wenn etwas falsch aussieht.

CSS für zusammengefasste Zellen

Formatieren Sie Zellen, die sich über mehrere Spalten oder Zeilen erstrecken:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Drucken und zusammengefasste Zellen

Zusammengefasste Zellen werden in modernen Browsern korrekt gedruckt. Es gibt jedoch einige Einschränkungen:

  • Wenn sich thead-Zeilen über Spalten erstrecken, werden sie auf jeder gedruckten Seite korrekt wiederholt
  • rowspan innerhalb von tbody wird bei Seitenumbrüchen nicht wiederholt
  • Testen Sie komplexe Tabellen vor der Veröffentlichung in der Druckvorschau

Kurztest

Sie haben eine Tabellenzelle, die sich über 3 Spalten erstrecken soll. Welches Attribut verwenden Sie?

Zusammenfassung: colspan und rowspan

Das Wichtigste zum Zusammenfassen von Zellen:

  • colspan – Zelle erstreckt sich über mehrere Spalten
  • rowspan – Zelle erstreckt sich über mehrere Zeilen
  • Berücksichtigen Sie zusammengefasste Zellen: Lassen Sie die von der Zusammenfassung abgedeckten Zellen weg
  • Fügen Sie scope="colgroup" hinzu, damit zusammengefasste Kopfzellen barrierefrei sind
  • Verwenden Sie die DevTools, um Layoutprobleme zu beheben

Häufig gestellte Fragen

Ist die Lektion „colspan und rowspan zum Zusammenfassen“ kostenlos?

Ja — der vollständige Text von „colspan und rowspan zum Zusammenfassen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „colspan und rowspan zum Zusammenfassen“?

Führen Sie Zellen über mehrere Spalten und Zeilen hinweg zusammen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „colspan und rowspan zum Zusammenfassen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. table, tr, td und th
  2. Struktur von thead, tbody und tfoot
  3. colspan und rowspan zum Zusammenfassen
  4. Barrierefreiheit bei Tabellen: scope, summary und caption
← Zurück zu HTML Academy