Detaillierte Erläuterung der praktischen Verwendung des HTML-Tabellenlayouts_HTML/Xhtml_Webseitenproduktion

Wann werden Formulare verwendet?

Tabellen

Der intuitive Eindruck der Tabelle besteht darin, dass sie aus mehreren ordentlich angeordneten Zellen besteht und die Zeilen und Spalten deutlich zu erkennen sind. Dies kann mit Excel in Verbindung gebracht werden. Anhand des Status von Excel in der Datenverarbeitung und Statistik können wir die Bedeutung der Tabellen auf der Webseite verstehen.

Um es einfach auszudrücken: Wenn Sie intuitiv spüren, dass mehrere Elemente in Zeilen und Spalten angeordnet sind, wird Ihnen die Verwendung einer Tabelle die Arbeit erheblich erleichtern. Wie das Beispiel eines Bewerbungsformulars auf caniuse.com:

Berechnung des Tabellenlayouts

Die Verwendung von Tabellen ist sehr einfach, aber manchmal entspricht der Endzustand, den die Tabelle für jedes Raster darstellt, möglicherweise nicht Ihren Wünschen. Wenn beispielsweise einige Raster Zeilenumbrüche aufweisen, sieht die gesamte Tabelle aufgrund der Zeilenumbrüche sehr unansehnlich aus. 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 für die Daten, die jede Spalte des Rasters darstellen kann, sorgfältig berechnen.

Das liegt daran, dass die Tabelle ihre eigenen Merkmale im Layout hat. Sie folgt bestimmten Prinzipien und bestimmt ihr tatsächliches Layout durch Berechnung. Als Nächstes untersucht dieser Artikel anhand eines tatsächlichen Tabellentestbeispiels, wie die Tabelle ihr eigenes Layout berechnet.
Erste Stellungnahme

Dieser Artikel konzentriert sich nur auf die gängigsten Methoden zum Anwenden von Tabellen und listet nicht alle Situationen auf. Verschiedene Browser haben unterschiedliche Interpretationen einiger Tabellenkonzepte, aber die Layoutberechnungen sind grundsätzlich gleich (falls es Unterschiede gibt, werden diese separat erwähnt).

Die als nächstes verwendeten Testformulare sehen folgendermaßen aus (der Inhalt stammt von Zero Track):

Gleichzeitig werden in der Tabelle border-collapse:collapse; und border-spacing:0; gesetzt. Dies ist auch die gebräuchlichste Methode zum Anwenden von Tabellen. Normalize.css verwendet diesen Teil als Initialisierungsdefinition.
Zwei Algorithmen

Das im

Der Unterschied zwischen diesen beiden Algorithmen besteht darin, ob das Breitenlayout der Tabelle mit dem Dateninhalt in der Tabelle zusammenhängt. In diesem Artikel wird das Prinzip der Layoutberechnung der Tabelle in diesen beiden Werten erläutert.
Automatisches Tabellenlayout – automatisch

Das Merkmal des automatischen Tabellenlayouts besteht darin, dass das Breitenlayout der Tabelle mit dem gesamten Dateninhalt in der Tabelle zusammenhängt. Um das endgültige Breitenlayout zu bestimmen, muss der gesamte Tabelleninhalt abgerufen und dann zusammen angezeigt werden.

Aus dieser Sicht ist der entscheidende Punkt „inhaltlich“. Was passiert, wenn die Tabelle eine feste Breite definiert (hier 500 Pixel), aber nicht alle Zellen eine definierte Breite haben (es werden nur CSS-definierte Breiten besprochen)? Schauen wir uns die Ergebnisse an:

In der obigen Tabelle werden die leeren Teile mit Leerzeichen geschrieben. Nach dem Vergleich lassen sich folgende Punkte feststellen:

Spalte 2 und Spalte 3 haben die gleiche Breite.
Das Verhältnis zwischen der Breite der ersten Spalte und der Breite aller nachfolgenden Spalten scheint 2:1 zu betragen.
Einschließlich der Ränder und Abstände entspricht die Gesamtbreite aller Spalten der in der Tabelle definierten Breite.

Jede Zelle hat keine definierte Breite, sodass das Breitenlayout vollständig durch die spezifischen Inhaltsdaten (Textinformationen) bestimmt wird. Wie sind solche Ergebnisse zu erklären? Über diese Logik kann man zunächst intuitiv spekulieren:

Schritt 1: Wählen Sie aus jeder Spalte diejenige mit dem meisten Textinhalt (verstanden als die breiteste Breite des Textes ohne Zeilenumbruch) als „Repräsentanten“ aus.
Schritt 2: Vergleichen Sie die Breiten der „Repräsentanten“ jeder Spalte und weisen Sie ihnen dann die Gesamtbreite der Tabelle, einschließlich Rahmen und Polsterung, entsprechend ihrem proportionalen Breitenverhältnis zu.

Unter Bezugnahme auf die obige Logik sehen wir uns die vorherige Tabelle an. Ist das nicht sinnvoll? Beachten Sie, dass zuvor gesagt wurde, dass das Breitenverhältnis 2:1 zu sein scheint. Könnte das sein? Schauen wir uns die Version ohne Polsterung an:

Verwenden Sie das Front-End-Debugging-Tool, um sich die Breite der Zellen oben genauer anzusehen. Sie werden feststellen, dass sich diese Tabelle von der vorherigen unterscheidet und das Verhältnis sehr nahe bei 2:1 liegt (ja, dieser kleine Punkt). liegt am Rand, aber es gibt keinen. Der Rand kann die Spalten nicht unterscheiden.

Es ist ersichtlich, dass bei der Analyse der Breitenverhältnisbeziehung die Inhaltsbreite, der Abstand und der Rand berücksichtigt werden. Dies zeigt auch, dass es sich nicht um ein Maß für die Anzahl der Zeichen handelt, sondern um ein Maß für die Breite, die die Zeichen ohne Zeilenumbrüche einnehmen können (das 2:1 kommt hier daher, dass chinesische Schriftzeichen gleich breit sind). Natürlich dient die Polsterung nur dazu, den Tisch schöner zu machen :).

Was passiert, wenn eine Breitendefinition vorhanden ist? Im Folgenden finden Sie eine Tabelle mit Breitendefinitionen für einige Zellen:

Der entsprechende HTML-Code lautet:

Die folgenden Punkte finden Sie in der obigen Tabelle:

Die tatsächliche Breite einer Zelle mit einer Breite von 5 Pixel beträgt 13 Pixel, was genau der Breite eines einzelnen chinesischen Zeichens entspricht. Zellen mit chinesischen Zeichen in derselben Spalte ordnen den Text in Form der minimalen Zellenbreite an (also, die Zeilen werden geändert).
Eine Zelle, deren Breite auf 200 Pixel eingestellt ist, hat tatsächlich eine Breite von 200 Pixel, obwohl in derselben Spalte eine Breite von 70 Pixel definiert ist.
Die dritte Spalte, die keine genaue Breitendefinition hat, erhält nach der Zuweisung der Spalten 1 und 2 schließlich die gesamte verbleibende Breite der Tabelle.

Die Schlussfolgerung daraus ist, dass, wenn es Spalten mit Breitendefinitionen und Spalten ohne Breitendefinitionen gibt:

Wenn die definierte Breite der Zelle kleiner ist als die minimale Anordnungsbreite ihres Inhalts (im Gegensatz zur Non-Wrap-Anordnung die Breite, die die Zelle benötigt, wenn möglichst viele Zeilen in der Zelle angeordnet sind), dann wird die In der Spalte, in der sich die Zelle befindet, wird der Inhalt in der kleinstmöglichen Anordnung dargestellt.
Wenn die Inhaltsbreite der Zelle in derselben Spalte (ohne Zeilenumbruch, dieses Wort bedeutet dies später) kleiner ist als die größte Breitendefinition in der Spalte, dann ist die tatsächliche Breite der Spalte gleich der Breitendefinition.
Bei Spalten ohne Breitendefinition weist die Tabelle zunächst den Spalten mit Breitendefinition die Breite zu und weist sie ihnen dann zu (das Verhältnis zwischen ihnen hängt wiederum von der Breite des Inhalts ab).

Die vordere Spalte ohne Breitendefinition kann als Fall 1 betrachtet werden. Einige Spalten hier haben Breitendefinitionen, andere nicht, was als Fall 2 angesehen werden kann. Das Folgende ist Fall 3, das heißt, wenn alle Spalten Breitendefinitionen haben:

Entsprechender HTML-Code:

In der obigen Tabelle wurde die Auffüllung entfernt, sodass der Wert eindeutig durch die Breite definiert werden kann und das Breitenverhältnis dieser drei Spalten 2:1:1 beträgt. Hier gibt es eine weitere Bedingung: Die Breite des Inhalts in der Zelle überschreitet nicht den Breitendefinitionswert. Nach dem Test verhalten sich IE7 und niedriger anders als andere Browser, wenn der Inhalt den Breitendefinitionswert ü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 weiterhin die entsprechende Breite zuweist Breitendefinitionswerten wird ihnen auch die verbleibende Breite im Verhältnis zu ihrer Breite zugewiesen.

Das Obige ist die Analyse von drei Situationen, in denen das automatische Tabellenlayout definiert ist und die Tabelle selbst eine feste Breite hat. Wenn die Tabelle selbst die Breite nicht definiert, wird es mehr Situationen geben, die sich auf den enthaltenden Block (Details) der Tabelle beziehen. Wenn es in Zukunft eine geeignete Gelegenheit gibt, werden wir sie besprechen (so). Der sogenannte Artikelplatz ist begrenzt...).
Festes Tabellenlayout-fixiert

Das Merkmal des festen Tabellenlayouts besteht darin, dass das Breitenlayout der Tabelle nichts mit dem Dateninhalt in der Tabelle zu tun hat. Es müssen lediglich die Informationen der ersten Zeile der Tabelle empfangen werden, um das endgültige Breitenlayout zu bestimmen Beginnen Sie mit der Anzeige.

Das feste Tabellenlayout ist „inhaltsunabhängig“ und betont die „erste Zeile“. Bitte sehen 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 Breitendefinitionen.
Wenn die Zellen in der ersten Zeile Breitendefinitionen haben, weisen Sie zuerst ihre erforderliche Breite zu und dann die Die verbleibende Breite wird gleichmäßig auf Zellen ohne Breitendefinition verteilt.
Die Breitenverteilung der Zellen in der ersten Zeile bestimmt das Breitenlayout der Tabelle, und der Inhalt nach der ersten Zeile ändert das Layout nicht.

Es ist außerdem wichtig zu beachten, dass Sie bei Verwendung eines festen Tabellenlayouts die Breite des Tabellenelements definieren müssen. Wenn seine Breite nicht definiert ist (d. h. der automatische Standardwert), verwendet der Browser stattdessen das automatische Tabellenlayout .
Abschlusserklärung

Im Zusammenhang mit Tabellen gibt es tatsächlich Elemente wie