Planen Sie eine HTML-Tabelle mit ineinandergreifenden Überspannungen, indem Sie zuerst das vollständige Raster zeichnen, jeder zusammengeführten Zelle ein Rechteck zuweisen und Zellen nur dort eintragen, wo diese Rechtecke beginnen. Diese Anleitung führt Sie durch ein synthetisches Beispiel, das Sie in TextEdit erstellen und auf Ihrem Mac in der Vorschau ansehen können.

Das Raster festlegen, bevor Sie Zellen schreiben

Die Aufgabe besteht darin, eine Tabelle mit fünf Spalten zu erstellen, die gruppierte Spaltenüberschriften, eine Zelle mit Zeilen- und Spaltenüberspannung sowie eine weitere Zelle mit einer anderen Zeilenüberspannung enthält. Die Beschriftungen und Inhalte unten dienen der Veranschaulichung: Sie stellen neutrale Knotenblöcke dar, die nach Slots angeordnet sind.

HTML-Tabellen stellen mehrdimensionale Daten dar. Ihre Zellen müssen das Tabellenraster lückenlos und ohne Überlappungen abdecken. Wenn das gewünschte Ergebnis lediglich eine Seitenanordnung unabhängiger Kästen ist, verweist der HTML-Standard Autoren auf Layoutwerkzeuge wie CSS Grid. Hier besteht zwischen jedem Block und seinen Zeilen- und Spaltenüberschriften ein inhaltlicher Zusammenhang, daher eignet sich eine Tabelle für diese Aufgabe. HTML-Standard: Das table-Element.

Benennen Sie zunächst die kleinsten Spalten, die irgendwo in der Tabelle vorkommen. In diesem Beispiel sind das Slot, Knoten A, Knoten B, Knoten C und Hinweis. Die Überschrift „Knoten“ umfasst drei davon; sie bildet keine zusätzliche Spalte.

Die beiden Span-Attribute zählen den gesamten Zellbereich einschließlich der Startposition. colspan="2" umfasst also zwei Spalten, während rowspan="2" zwei Zeilen umfasst. Werden beide Attribute verwendet, entsteht ein Rechteck von zwei mal zwei Zellen. Wird ein Span weggelassen, beträgt sein Standardwert eins. MDN: Das Tabellendatenzellen-Element.

„Ineinandergreifend“ beschreibt, wie diese Rechtecke zusammenpassen. Jede einzelne Zelle hat weiterhin einen rechteckigen Bereich; eine Zelle kann sich nicht um eine andere herumkrümmen. Stellen Sie sich vor, Sie ordnen beschriftete Rechtecke auf kariertem Papier an.

Ein Slot-Verzeichnis für jede Zeile erstellen

Verwenden Sie eine erweiterte Plantabelle, in der wiederholte Beschriftungen den Bereich einer zusammengeführten Zelle zeigen. Die Wiederholung in diesem Verzeichnis bedeutet nicht, dass diese Zelle im HTML mehrfach eingetragen wird. Der Kopfbereich umfasst zwei Zeilen, der Tabellenkörper vier.

Geplante Zeile Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5
Kopfzeile 1 Slot Knoten Knoten Knoten Hinweis
Kopfzeile 2 Slot Knoten A Knoten B Knoten C Hinweis
Körperzeile 1 Slot 1 Block P Block P Block Q Hinweis X
Körperzeile 2 Slot 2 Block P Block P Block R Hinweis X
Körperzeile 3 Slot 3 Block S Block T Block T Hinweis X
Körperzeile 4 Slot 4 Block U Block U Block U Hinweis Y

Notieren Sie nun für jedes zusammengeführte Rechteck seine Startposition und Abmessungen. Die Koordinaten beginnen hier bei eins und werden in jedem Abschnitt neu gezählt.

Zelle Beginnt bei Umfasste Zeilen Umfasste Spalten
Slot-Überschrift Kopfzeile 1, Spalte 1 2 1
Knoten-Überschrift Kopfzeile 1, Spalte 2 1 3
Hinweis-Überschrift Kopfzeile 1, Spalte 5 2 1
Block P Körperzeile 1, Spalte 2 2 2
Hinweis X Körperzeile 1, Spalte 5 3 1
Block T Körperzeile 3, Spalte 3 1 2
Block U Körperzeile 4, Spalte 2 1 3

Dieses Verzeichnis macht die schwierige zweite Körperzeile einfach: Block P belegt bereits die Spalten 2 und 3, und Hinweis X belegt bereits Spalte 5. Dort beginnen also nur Slot 2 und Block R, weshalb diese Zeile lediglich zwei Zellen benötigt.

Gehen Sie für jede Zeile wie folgt vor:

  1. Markieren Sie die Positionen, die von Überspannungen aus vorherigen Zeilen belegt sind.
  2. Suchen Sie die erste unbelegte Spalte.
  3. Fügen Sie die nächste Zelle ein und markieren Sie ihr vollständiges Rechteck einschließlich der folgenden Zeilen.
  4. Verwerfen Sie ein Rechteck, wenn irgendein Teil eine belegte Position überlappt.
  5. Fahren Sie fort, bis alle fünf Spaltenpositionen berücksichtigt sind.

Dieses Verfahren ist eine Planungshilfe, die aus dem Tabellenmodell des Standards abgeleitet ist. Browser überspringen belegte Startpositionen, wenn sie Zellen platzieren; Autoren müssen dennoch überlappende Rechtecke vermeiden. Es reicht daher nicht aus, die Zellen einer Zeile zu zählen. HTML-Standard: Verarbeitungsmodell.

Eine nützliche Prüfung für jede Zeile lautet: übernommene belegte Spalten + Spalten, die von neu beginnenden Zellen abgedeckt werden = fünf. Körperzeile 2 hat drei übernommene Positionen und zwei neue. Körperzeile 3 hat eine übernommene Position und vier neue. Prüfen Sie auch die tatsächlichen Positionen und nicht nur die Summe: Übereinstimmende Summen erkennen keine Überlappung in Verbindung mit einer Lücke.

Zeilengruppen und Überschriftenbeziehungen planen

Platzieren Sie beide Kopfzeilen in einem einzigen thead und alle vier Körperzeilen in einem einzigen tbody. Eine Zelle kann keine getrennten Zeilengruppen überspannen. Block P kann beispielsweise nicht in einem tbody beginnen und in einem anderen enden. Der Standard legt auch die Reihenfolge der untergeordneten Tabellenelemente fest: ein optionales caption, Spaltengruppen, ein optionales thead, Körperzeilen und ein optionales tfoot. HTML-Standard: Tabellen.

Das Beispiel definiert drei Spaltengruppen: eine Spalte für Slot, drei für Knoten und eine für Hinweis. Die Überschrift „Knoten“ verwendet scope="colgroup"; ihre untergeordneten Überschriften verwenden scope="col". Die W3C-Anleitung zu unregelmäßigen Überschriften verbindet gruppierte Überschriften mit einer expliziten Spaltengruppenstruktur. Tabellen mit unregelmäßigen Überschriften.

Geometrie und Bedeutung erfordern getrennte Entscheidungen. Block P umfasst zwei Slot-Zeilen und zwei Knotenspalten. Die zugehörigen Überschriften sind daher Slot 1, Slot 2, Knoten, Knoten A und Knoten B. Hinweis X gehört zu drei Slot-Zeilen und zur Spalte „Hinweis“.

Für diese zusammengeführten Datenzellen macht das Beispiel die Zuordnungen mit id-Werten in den Überschriftenzellen und durch Leerzeichen getrennten Verweisen im Attribut headers jeder Datenzelle explizit. Die W3C dokumentiert diesen Ansatz für komplexe Tabellen, deren Überschriftenbeziehungen ausdrücklich angegeben werden müssen. Tabellen mit mehrstufigen Überschriften.

Fassen Sie unabhängige Werte nicht allein deshalb zusammen, weil ihr Text übereinstimmt. In diesem synthetischen Dokument beschreibt Block P bewusst einen Block, der sich über vier Positionen erstreckt. Enthält jede Position stattdessen eine eigene Beobachtung, sollten Sie die einzelnen Zellen beibehalten, damit die Tabelle diesen Unterschied abbildet.

Die vollständige HTML-Datei auf Ihrem Mac erstellen

Mit TextEdit können Sie das lokale HTML-Dokument erstellen. Wählen Sie Ablage > Neu und anschließend Format > In reinen Text umwandeln. Fügen Sie das vollständige Dokument unten ein, wählen Sie Ablage > Sichern und nennen Sie die Datei span-plan.html. Wenn Sie nach der Dateiendung gefragt werden, wählen Sie „.html“ verwenden. Dies sind die von Apple dokumentierten Schritte zum Erstellen von HTML-Dateien. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten.

Dies ist ein vollständiges, eigenständiges Dokument mit Beispieldaten und Formatierung. Es benötigt weder Skripte noch externe Ressourcen.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Öffnen Sie die gespeicherte Datei in einem Browser auf Ihrem Mac. Vergleichen Sie sie mit dem Verzeichnis: Block P sollte sich über Slot 1 und Slot 2 unter Knoten A und Knoten B erstrecken; Hinweis X sollte sich über Slot 1 bis 3 erstrecken; Block T sollte in Slot 3 nur Knoten B und Knoten C abdecken. An diesen drei Prüfungen erkennen Sie das beabsichtigte ineinandergreifende Muster gegenüber einer Tabelle, die lediglich einen rechteckigen Umriss hat.

Wenn die Datei beim erneuten Öffnen in TextEdit formatiert angezeigt wird, wählen Sie Ablage > Öffnen, wählen Sie die Datei aus, klicken Sie auf Optionen einblenden und wählen Sie Formatierte Textbefehle ignorieren. Für die spätere Bearbeitung dokumentiert Apple außerdem die Einstellung TextEdit > Einstellungen > Öffnen und Sichern, in der Sie HTML-Dateien als HTML-Code statt als formatierten Text anzeigen aktivieren können. Apples HTML-Anleitung für TextEdit.

Fehler erkennen und den Plan anpassen, ohne die Struktur zu verlieren

Wenn das Ergebnis von Ihrem Plan abweicht, prüfen Sie die erste fehlerhafte Zeile und die in sie übernommenen Rechtecke. Führen Sie die folgenden Prüfungen durch, bevor Sie Abstände oder Formatierungen ändern.

Symptom Was zu prüfen ist Korrektur für dieses Beispiel
Eine unerwartete zusätzliche Spalte Zellen, die dort hinzugefügt wurden, wo eine frühere Überspannung bereits Platz belegt Körperzeile 2 enthält nur Slot 2 und Block R; entfernen Sie dort etwaige Füllzellen
Block R erscheint unter dem falschen Knoten Breite und Höhe von Block P Prüfen Sie, ob Block P sowohl rowspan="2" als auch colspan="2" hat
Hinweis X endet nach Slot 2 Anzahl seiner Zeilen Setzen Sie seine Überspannung auf drei Zeilen
Die Kopfebenen sind nicht ausgerichtet Die erste Kopfzeile und die Anzahl der Zellen in der zweiten Zeile Slot und Hinweis überspannen zwei Zeilen; die zweite Kopfzeile enthält nur die drei Knotenüberschriften
Einer zusammengeführten Zelle fehlen Überschriften Ihre Verweise in headers Vergleichen Sie jede abgedeckte Zeile und Spalte mit dem Verzeichnis

Eine leere Zelle ist sinnvoll, wenn eine Position tatsächlich einen leeren Wert darstellt. Für eine Position, die bereits von einer Zelle mit Überspannung belegt ist, wird sie nicht benötigt. Die Dokumentation zu Tabellenzellen von MDN erklärt, dass gewöhnliche Zellen in verfügbare Positionen eingefügt werden und Überspannungen sich nicht überlappen dürfen. MDN: Das Tabellendatenzellen-Element.

Verwenden Sie für dieses feste Beispiel explizite positive Zeilenzahlen. Der Sonderwert rowspan="0" bedeutet, dass die verbleibenden Zeilen der aktuellen Zeilengruppe umfasst werden, sodass das Hinzufügen einer Zeile den Abdeckungsbereich dieser Zelle erweitern kann. Verwenden Sie diesen Wert nur, wenn „bis zum Ende dieser Gruppe“ die beabsichtigte Beziehung ausdrückt. MDN: Verhalten der Zeilenüberspannung.

Aktualisieren Sie das Verzeichnis, bevor Sie eine Zeile einfügen, löschen oder umsortieren. Wird zwischen Slot 1 und 2 eine neue Zeile eingefügt und soll Block P sie umfassen, erhöhen Sie die Zeilenüberspannung von Block P und ergänzen Sie die neue Zeilenüberschrift in seiner Liste headers. Prüfen Sie Hinweis X unabhängig davon: Durch dieselbe Einfügung kann sich auch sein beabsichtigter Abdeckungsbereich ändern. Beim Umsortieren von Zeilen ist dieselbe Prüfung erforderlich, weil die Überspannung der Position im Dokument folgt.

Wenn sich der Inhalt nicht mehr in verständliche Rechtecke aufteilen lässt, vereinfachen Sie die Darstellung. Die W3C empfiehlt, kleinere Tabellen in Betracht zu ziehen, wenn eine Tabelle mit mehreren Überschriftenebenen schwer verständlich ist. Tabellen mit mehrstufigen Überschriften.

Führen Sie das Slot-Verzeichnis bei Überarbeitungen neben der Quelldatei. Legen Sie bei jeder Änderung die beabsichtigten Rechtecke fest, tragen Sie Zellen nur an ihren Startpositionen ein und prüfen Sie die zugehörigen Überschriften. So können Sie wiederholt sicherstellen, dass sowohl die Form der Tabelle als auch die Beziehungen erhalten bleiben, die ihr Inhalt ausdrückt.

Quellen