Zusammenführen von Tabellenzellen in HTML

8.1 Zusammenführen von Zellen horizontal

Das Zusammenführen von Zellen in einer Tabelle ermöglicht dir die Erstellung flexiblerer und informativerer Datenansichten. Das ist besonders nützlich, wenn du mehrere Zellen für die Erstellung von Überschriften oder aggregierten Daten zusammenführen musst. In HTML werden zum Zusammenführen der Zellen die Attribute colspan und rowspan verwendet.

Attribut colspan

Das Attribut colspan verbindet Zellen horizontal. Es gibt an, wie viele Spalten eine Zelle umfassen soll. Wenn du z.B. eine Zelle mit colspan="2" hast, wird sie den Platz von zwei normalen Zellen in der Zeile einnehmen.

Beispiel für die Verwendung:

Stell dir vor, du hast eine Tabelle mit drei Spalten und möchtest, dass die erste Zelle in der Zeile zwei Spalten einnimmt. Du verwendest colspan="2", um diese beiden Zellen zu verbinden. Das ist nützlich für die Erstellung von Überschriften, die mehrere Spalten umfassen, oder für das Zusammenführen von Daten, die sich auf mehrere Kategorien beziehen.

    
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Alter</th>
          <th>Stadt</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>London</td>
        </tr>
        <tr>
          <td colspan="2">Gesamt</td>
          <td>2 Einträge</td>
        </tr>
      </table>
    
  

8.2 Zusammenführen von Zellen vertikal

Das Attribut rowspan verbindet Zellen vertikal. Es gibt an, wie viele Zeilen eine Zelle umfassen soll. Wenn du z.B. eine Zelle mit rowspan="2" hast, wird sie den Platz von zwei normalen Zellen in der Spalte einnehmen.

Beispiel für die Verwendung:

Stell dir vor, du hast eine Tabelle mit drei Zeilen und möchtest, dass die erste Zelle in der Spalte zwei Zeilen einnimmt. Du verwendest rowspan="2", um diese beiden Zellen zu verbinden. Das ist nützlich für die Erstellung von Tabellen, wo eine Datenkategorie sich auf mehrere Zeilen bezieht, wie z.B. zusammengefasste Überschriften oder aggregierte Daten.

    
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Projekt</th>
          <th>Stadt</th>
        </tr>
        <tr>
          <td rowspan="2">Alice</td>
          <td>Projekt A</td>
          <td>London</td>
        </tr>
        <tr>

          <td>Projekt B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Erklärung der Funktion

Wie colspan und rowspan funktionieren

Horizontales Zusammenführen (colspan): Stell dir vor, du erstellst einen Stundenplan, bei dem ein Kurs in mehreren Räumen stattfindet. Du kannst Zellen mit colspan verbinden, um anzugeben, dass ein Kurs zwei Zeiten umfasst.

Vertikales Zusammenführen (rowspan): Stell dir vor, du erstellst eine Tabelle mit Wettkampfergebnissen, bei der ein Teilnehmer an mehreren Runden teilnimmt. Du kannst Zellen mit rowspan verbinden, um anzugeben, dass ein Teilnehmer zwei Runden umfasst.

Praktische Beispiele

Erstellen von Überschriften, die mehrere Spalten umfassen: Wenn du eine Tabelle mit verschiedenen Datenkategorien hast und eine Überschrift erstellen möchtest, die mehrere Spalten umfasst, verwende colspan. Zum Beispiel kann die Überschrift "Mitarbeiterinformationen" die Spalten "Name", "Alter" und "Abteilung" umfassen.

Daten vertikal zusammenführen: Wenn du Daten hast, die vertikal zusammengeführt werden müssen, z.B. mehrere Einträge für dieselbe Person oder dasselbe Objekt, verwende rowspan. Wenn du zum Beispiel Informationen über ein Projekt hast und ein Projekt mehrere Zeilen (z.B. Projektphasen) umfasst, kombiniere die Zeilen mit rowspan.

8.4 Beispiele

Stell dir vor, du hast eine Tabelle, die Mitarbeiter und deren Teilnahme an verschiedenen Projekten zeigt:

• Mitarbeiter: Ivan, Maria, Peter.
• Projekte: Projekt A, Projekt B.

Du möchtest die Zellen zusammenführen, um zu zeigen, dass Ivan und Maria gleichzeitig an zwei Projekten arbeiten:

    
<table border="1">
    <tr>
        <th>Name</th>
        <th>Projekt A</th>
        <th>Projekt B</th>
        <th>Stadt</th>
    </tr>
    <tr>
        <td>Ivan</td>
        <td colspan="2">Ja</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Ja</td>
        <td>London</td>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Ja</td>
        <th>Nein</th>
        <td>Rom</td>
    </tr>
</table>
    
  

Oder, wenn du zeigen möchtest, dass Ivan an zwei Projekten arbeitet:

    
      <table border="1">
        <tr>
          <th>Name</th>
          <th>Projekt</th>
          <th>Stadt</th>
        </tr>
        <tr>
          <td rowspan="2">Ivan</td>
          <td>Projekt A</td>
          <td>London</td>
        </tr>
        <tr>
          <!-- empty -->
          <td>Projekt B</td>
          <td>London</td>
        </tr>
        <tr>
          <td>Sergej</td>
          <td>Projekt C</td>
          <td>Rom</td>
        </tr>
      </table>
    
  

Ich habe absichtlich einen Kommentar an der Stelle eingefügt, wo die Zelle, die durch die Nachbarzelle erweitert wurde, "aufgefressen" wurde. So ist es besser ersichtlich, wo die anderen angezeigt werden.