Detaillierte Erläuterung der praktischen Anwendung des HTML-Tabellenlayouts

Wann wird die Tabelle eingesetzt?

Tabellen werden heute für das Gesamtlayout einer Webseite in der Regel nicht mehr verwendet. Bei bestimmten spezifischen Designs, wie etwa bei der Formulareingabe oder Datenpräsentation, können Tabellen jedoch die beste Wahl sein.

Der intuitivste Eindruck einer Tabelle besteht darin, dass es sich um ein Element handelt, das aus mehreren ordentlich angeordneten Zellen besteht und bei dem die Zeilen und Spalten klar erkennbar sind. Dies kann mit Excel in Verbindung gebracht werden. Aus der Position von Excel in der Datenverarbeitung und Statistik können wir die Bedeutung von Tabellen auf Webseiten verstehen.

Einfach ausgedrückt erleichtert die Verwendung einer Tabelle die Arbeit erheblich, wenn Sie intuitiv spüren, dass mehrere Elemente in Zeilen und Spalten angeordnet sind. Die folgende Tabelle wird beispielsweise bei caniuse.com verwendet:

Berechnung des Tabellenlayouts

Die Verwendung einer Tabelle ist einfach, manchmal entspricht der Endzustand der einzelnen Raster in der Tabelle jedoch nicht Ihren Wünschen. Wenn beispielsweise einige Zellen Zeilenumbrüche aufweisen, wird die gesamte Tabelle aufgrund der Zeilenumbrüche sehr unansehnlich aussehen. Insbesondere bei Tabellen, die zur Datenpräsentation verwendet werden, ist die Breitenzuweisung ein sehr wichtiges Thema. Möglicherweise müssen Sie die Gesamtbreite der Tabelle basierend auf den Daten, die in jeder Spalte dargestellt werden können, sorgfältig berechnen.

Dies liegt daran, dass die Tabelle ihre eigenen Layoutmerkmale hat. Sie folgt bestimmten Prinzipien und ihr tatsächliches Layout wird durch Berechnung bestimmt. Als Nächstes untersucht dieser Artikel anhand eines tatsächlichen Tabellentestbeispiels, wie die Tabelle ihr eigenes Layout berechnet.
Eingangserklärung

Dieser Artikel behandelt nur die gebräuchlichsten Verwendungsmöglichkeiten von Tabellen und deckt nicht alle Situationen ab. Verschiedene Browser interpretieren einige Tabellenkonzepte unterschiedlich, die Layoutberechnungen sind jedoch grundsätzlich gleich (falls es Unterschiede gibt, werden diese gesondert erwähnt).

Die unten verwendeten Testtabellen sehen alle folgendermaßen aus (der Inhalt stammt aus Zero Tracks):

Gleichzeitig setzt die Tabelle border-collapse:collapse; und border-spacing:0;. Dies ist auch die gebräuchlichste Art, Tabellen anzuwenden. Normalize.css verwendet diesen Teil als Initialisierungsdefinition.
Zwei Algorithmen

Die im <table>-Element definierte CSS-Eigenschaft „table-layout“ bestimmt den Algorithmus, der von der Tabelle zum Berechnen des Layouts verwendet wird. Es gibt zwei Werte: „Auto“ und „Fest“. Im Allgemeinen wird der Standardwert „auto“ verwendet.

Der Unterschied zwischen diesen beiden Algorithmen besteht darin, ob die Breitenanordnung der Tabelle mit dem Dateninhalt in der Tabelle zusammenhängt. In diesem Artikel werden die Berechnungsprinzipien des Tabellenlayouts für diese beiden Wertetypen erläutert.
Automatisches Tabellenlayout-auto

Das Merkmal des automatischen Tabellenlayouts besteht darin, dass das Breitenlayout der Tabelle mit dem gesamten Dateninhalt in der Tabelle zusammenhängt. Es muss den gesamten Tabelleninhalt abrufen, bevor das endgültige Breitenlayout bestimmt und dann zusammen angezeigt wird.

Es scheint, dass der entscheidende Punkt die „Inhaltsrelevanz“ ist. Was passiert, wenn für die Tabelle eine feste Breite (hier 500 Pixel) definiert ist und für alle Zellen keine Breite definiert ist (es wird nur die durch CSS definierte Breite besprochen)? Schauen wir uns die Ergebnisse an:

In der obigen Tabelle sind die leeren Teile mit Leerzeichen aufgefüllt. Nach dem Vergleich können wir folgende Punkte feststellen:

Die Spalten 2 und 3 sind gleich breit.
Das Verhältnis der Breite der ersten Spalte zur Breite aller nachfolgenden Spalten scheint 2:1 zu sein.
Die Gesamtbreite aller Spalten, einschließlich Ränder und Abstand, entspricht der durch die Tabelle definierten Breite.

Die einzelnen Zellen haben keine festgelegte Breite, die Breiteneinteilung wird also vollständig durch die jeweiligen Inhaltsdaten (Textinformationen) bestimmt. Wie sind solche Ergebnisse zu erklären? Sie können zunächst intuitiv die folgende Logik ableiten:

Schritt 1: Wählen Sie aus jeder Spalte die Spalte mit dem größten Textinhalt (unter der Voraussetzung, dass keine Zeilenumbrüche vorhanden sind und die vom Text eingenommene Breite am größten ist) als „Repräsentant“ aus.
Schritt 2 vergleicht die Breite der „Vertreter“ jeder Spalte und verteilt dann die Gesamtbreite der Tabelle, einschließlich Rändern und Polsterung, entsprechend ihres Breitenverhältnisses auf sie.

Lassen Sie uns unter Berücksichtigung der obigen Logik einen Blick auf die vorherige Tabelle werfen. Ergibt sie nicht einen gewissen Sinn? Beachten Sie, dass zuvor gesagt wurde, dass das Breitenverhältnis „scheinbar“ 2:1 beträgt. Was wäre das? Schauen wir uns eine Version ohne Polsterung an:

Verwenden Sie das Front-End-Debugging-Tool, um die Breite der Zellen oben genauer zu betrachten. Sie werden feststellen, dass sich diese Tabelle von der vorherigen unterscheidet und das Verhältnis sehr nahe bei 2:1 liegt (ja, dieses kleine bisschen liegt an der Umrandung, aber ohne die Umrandung kann man die Spalten nicht unterscheiden).

Es ist ersichtlich, dass bei der Analyse des Breitenverhältnisses die Inhaltsbreite, die Polsterung und der Rahmen berücksichtigt werden. Daran erkennt man auch, dass nicht die Anzahl der Zeichen gemessen wird, sondern die Breite, die die Zeichen ohne Umbruch einnehmen können (das 2:1 rührt hier daher, dass chinesische Schriftzeichen gleich breit sind). Die Verwendung der Polsterung dient natürlich nur dazu, den Tisch schöner zu machen :).

Was passiert, wenn eine Breitendefinition vorhanden ist? Hier ist eine Tabelle mit einigen Zellen, deren Breiten definiert sind:

Der entsprechende HTML-Code lautet:

Folgende Punkte können Sie der obigen Tabelle entnehmen:

Die tatsächliche Breite einer Zelle, die auf 5px eingestellt ist, beträgt 13px, was genau der Breite eines einzelnen chinesischen Zeichens entspricht. Die Zellen mit chinesischen Zeichen in derselben Spalte ordnen den Text in der Form der minimalen Zellenbreite an (also der Zeilenumbrüche).
Eine Zelle mit einer Breite von 200 Pixel wird tatsächlich mit einer Breite von 200 Pixel gerendert, obwohl für dieselbe Spalte eine Breitendefinition von 70 Pixel vorliegt.
Die dritte Spalte, für die keine exakte Breite definiert ist, hat am Ende die verbleibende Breite der Tabelle nach der Zuweisung der ersten und zweiten Spalte.

Die Schlussfolgerung hieraus ist, dass, wenn sowohl Spalten mit als auch ohne Breitendefinitionen vorhanden sind:

Wenn die definierte Breite einer Zelle kleiner ist als die minimale Anordnungsbreite ihres Inhalts (die Breite, die für die Zelle erforderlich ist, wenn im Gegensatz zur nicht umbrochenen Anordnung so viele Zeilen wie möglich in der Zelle angeordnet sind), wird die Spalte, in der sich die Zelle befindet, den Inhalt in der minimalen Anordnung darstellen.
Wenn die Inhaltsbreite einer Zelle in der gleichen Spalte (ohne Zeilenumbrüche, dieser Begriff wird im folgenden Text verwendet) kleiner ist als die in der Spalte definierte maximale Breite, dann ist die tatsächliche Breite der Spalte gleich der definierten Breite.
Spalten ohne definierte Breite werden ihre Breiten zuerst von der Tabelle zugewiesen, nachdem sie Spalten mit definierter Breite zugewiesen wurden (auch hier hängt das Verhältnis zwischen ihnen von der Inhaltsbreite ab).

Die Spalte ganz vorne, die keine Breitendefinition hat, kann als Fall 1 angesehen werden. Hier haben einige Spalten Breitendefinitionen, andere nicht, was als Fall 2 angesehen werden kann. Hier ist Fall 3, wenn für alle Spalten Breiten definiert sind:

Entsprechender HTML-Code:

In der obigen Tabelle wurde das Padding entfernt, damit die Werte eindeutig durch die Breite definiert werden können, wodurch sich für die drei Spalten ein Breitenverhältnis von 2:1:1 ergibt. Hierbei gilt noch eine weitere Bedingung: Die Breite des Inhalts in der Zelle darf den definierten Breitenwert nicht überschreiten. Nach Tests verhalten sich IE7 und niedrigere Versionen anders als andere Browser, wenn der Inhalt die definierte Breite überschreitet.

Aus diesem Tabellenbeispiel können wir erkennen, dass, wenn alle Spalten Breitendefinitionen haben und die Summe der Werte dieser Breitendefinitionen kleiner als die Breite der Tabelle ist, die Tabelle ihnen nach der Zuweisung der Breiten entsprechend ihren Breitendefinitionswerten weiterhin die verbleibende Breite entsprechend ihrem Breitenverhältnis zuweist.

Oben finden Sie eine Analyse von drei Situationen, in denen das automatische Tabellenlayout verwendet wird und die Tabelle selbst eine feste Breite definiert. Wenn die Tabelle selbst keine Breite definiert, gibt es weitere Situationen, und diese hängen mit dem enthaltenden Block (Details) der Tabelle zusammen. Wenn sich in Zukunft eine geeignete Gelegenheit ergibt, werden wir dies erneut besprechen (die sogenannte Artikellänge ist begrenzt ...).
Festes Tabellenlayout-fest

Das Merkmal des festen Tabellenlayouts besteht darin, dass das Breitenlayout der Tabelle unabhängig vom Dateninhalt in der Tabelle ist. Es müssen nur die Informationen der ersten Zeile der Tabelle empfangen werden, um das endgültige Breitenlayout zu bestimmen und mit der Anzeige zu beginnen.

Das feste Tabellenlayout ist „inhaltsunabhängig“ und betont die „erste Zeile“. Schauen Sie sich das folgende Tabellenbeispiel an:

Entsprechender HTML-Code:

Die Logik des festen Tabellenlayouts ist viel einfacher und wird wie folgt ausgedrückt:

Übernehmen Sie nur die Informationen der ersten Zeile und ignorieren Sie den Inhalt aller Zellen nach der ersten Zeile und die Breitendefinition
Wenn in der ersten Zeile die Zellen eine definierte Breite haben, wird ihnen zuerst die benötigte Breite zugewiesen und anschließend werden die restlichen Breiten gleichmäßig auf die Zellen ohne definierte Breite verteilt.
Die Breitenzuweisung der Zellen in der ersten Zeile bestimmt das Breitenlayout der Tabelle, und der Inhalt nach der ersten Zeile ändert das Layout nicht.

Beachten Sie außerdem, dass Sie bei Verwendung eines festen Tabellenlayouts eine Breite für das Tabellenelement definieren müssen. Wenn die Breite nicht definiert ist (d. h. der Standardwert „auto“), verwendet der Browser stattdessen ein automatisches Tabellenlayout.
Schlusswort

Tatsächlich gibt es noch weitere Elemente, die sich auf Tabellen beziehen, wie etwa <colgroup>, <thead>, <tfoot>, <caption> usw., aber sie werden für den häufigsten Gebrauch nicht benötigt. Vielmehr werden sie auch bei der Berechnung des Tabellenlayouts berücksichtigt. Wenn man dann noch den Fall der Zellenzusammenführung hinzufügt, können Sie sich wahrscheinlich vorstellen, wie kompliziert Tabellenlayoutberechnungen sind.

Im W3C-Dokument wird erwähnt, dass die Berechnung des Tabellenlayouts (automatisches Tabellenlayout) noch keine Spezifikation ist. Eine W3C-Beschreibung der Tabellenlayoutberechnungen finden Sie unter „Tabellenbreitenalgorithmen“.
Abschluss

Tatsächlich ist es nicht sehr praktikabel, derart detaillierte Rückschlüsse auf die Berechnungsprinzipien des Tabellenlayouts zu ziehen. Es wäre lediglich hilfreich, diese Informationen als Referenz zu haben, wenn Sie die Einzelheiten ausarbeiten müssen, obwohl solche Gelegenheiten selten sind.

Aus dem Inhalt dieses Artikels können wir jedoch eine aussagekräftigere Schlussfolgerung ziehen: Wenn die Tabelle die Breite definiert und nicht alle Zellen die Breite definieren, versucht die automatische Layouttabelle ihr Bestes, um zu verhindern, dass alle Ihre Daten umbrechen. Wenn Sie auf eine Situation stoßen, in der sich das Umbrechen auf das Erscheinungsbild auswirkt, bedeutet dies, dass Sie die Daten rationalisieren oder die Ränder reduzieren müssen, anstatt zu versuchen, die Breitenzuweisung selbst neu vorzunehmen.

Dieses Mal, wenn ich diese Art von tatsächlicher Messung und Schlussfolgerung durchführe, denke ich, dass es leichter zu verstehen wäre, wenn ich es je nach der spezifischen Situation ausführlich erkläre, anstatt es auf einmal systematisch und vollständig darzustellen. Vielleicht kann man es als Sprachübung betrachten?