Detaillierte Erläuterung der tatsächlichen Verwendung des HTML -Tabellenlayouts

Wann wird die Tabelle verwendet?

Jetzt werden Tabellen <Tabelle> im Allgemeinen nicht mehr für das Gesamtlayout von Webseiten verwendet. Wenn sie jedoch mit bestimmten spezifischen Designs konfrontiert sind, wie z. B. Formulareingabe und Datenpräsentation, können Formulare die am besten geeignete Wahl sein.

Der intuitive Eindruck einer Tabelle ist, dass Elemente ordentlich von mehreren Zellen angeordnet sind, die deutlich Zeilen und Säulen sehen können. Dies kann mit Excel verbunden werden. Aus Excels Position in der Datenverarbeitung und -statistik können wir die Bedeutung von Tabellen auf Webseiten verstehen.

Einfach ausgedrückt, wenn Sie intuitiv das Gefühl haben, dass mehrere Elemente im Konzept von Zeilen und Spalten angeordnet sind, erleichtert Sie die Verwendung von Tabellen. Zum Beispiel das Antragsformular in Caniuse.com:

Die Verwendung einer Tabelle ist einfach, aber manchmal endet die Tabelle bei jedem Raster, was möglicherweise nicht das ist, was Sie wollen. Wenn beispielsweise einige Gitter Zeilenpausen haben, sieht die gesamte Tabelle sehr unansehnlich aus, da die Linienbrüche. Insbesondere für Tabellen, die für die Datenpräsentation verwendet werden, ist die Breitenallokation ein sehr wichtiges Thema. Möglicherweise müssen Sie die Gesamtbreite der Tabelle für die Daten sorgfältig berechnen, die in jeder Spalte von Grids dargestellt werden können.

Dies liegt daran, dass eine Tabelle ihre eigenen Merkmale im Layout aufweist und bestimmte Prinzipien folgt und ihr tatsächliches Layout durch Berechnungen bestimmen wird. Als nächstes verwendet dieser Artikel aktuelle Beispiele für Tabellen -Tests, um zu untersuchen, wie Tabellen ihr eigenes Layout berechnen.

Dieser Artikel konzentriert sich nur auf die häufigsten Methoden zur Anwendung von Tabellen und listet nicht alle Fälle auf. Verschiedene Browser haben unterschiedliche Analysen einiger Konzepte von Tabellen, aber die Layoutberechnungen sind im Grunde genommen konsistent (wenn es Unterschiede gibt, werden sie separat erwähnt).

Die nächsten Testformulare werden auf diese Weise dargestellt (der Inhalt stammt aus der Flugbahn von Null):

Gleichzeitig setzt die Tabelle Grenzkollapse: Zusammenbruch; und Grenzabteilung: 0;. Dies ist auch die häufigste Praxis für die Anwendung von Tabellen und die Normalisierung. CSS verwendet diesen Teil als Initialisierungsdefinition.

Das CSS-Attribut-Tabellen-Layout, das auf dem <table> -Element definiert ist, bestimmt den auf die Tabelle angewendeten Algorithmus während der Layoutberechnung. Es hat zwei Werte, automatisch und behoben. In normalen Fällen wird das Standardwertauto verwendet.

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 Layout -Berechnung von Tabellen bei der Einnahme dieser beiden Werte erörtert.

Automatisches Tischlayout -auto

Das Merkmal des automatischen Tabellenlayouts ist, dass das Breitenlayout der Tabelle mit allen Dateninhalten in der Tabelle zusammenhängt. Es muss alle Tischinhalte erhalten, bevor das endgültige Breitenlayout ermittelt und dann zusammen angezeigt werden kann.

Auf diese Weise ist der entscheidende Punkt, dass der Inhalt relevant ist. Was ist, wenn die Tabelle eine feste Breite definiert (500px hier) und alle Zellen nicht die Breite definieren (nur die Diskussion von CSS definieren Breiten), was passiert dann? Siehe die Ergebnisse:

In der obigen Tabelle ist der leere Teil mit & nbsp; Räume. Nach dem Vergleich finden wir die folgenden Punkte:

Die 2. und 3. Spalten haben die gleiche Breite.

Die Breite der Spalte 1 und das Breitenverhältnis einer Spalte, die nachfolgt, scheint 2: 1 zu sein.

Fügen Sie die Grenze und die inneren Ränder hinzu, und die Breiten aller Säulen werden zusammengefasst, entspricht der durch die Tabelle definierten Breite.

In jeder Zelle ist keine Breite definiert, sodass das Breitenlayout vollständig durch die spezifischen Inhaltsdaten (Textinformationen) bestimmt wird. Wie kann man ein solches Ergebnis erklären? Sie können zuerst eine solche Logik intuitiv schließen:

Schritt 1: Wählen Sie den Text mit dem meisten Textinhalt aus jeder Spalte aus (verstehen Sie, dass der Text als Repräsentant die breiteste Breite einnimmt, wenn der Text nicht umwickelt.

Schritt 2: Vergleichen Sie die Breiten der Vertreter jeder Spalte und weisen Sie ihnen die Gesamtbreite der Tabelle zu, einschließlich der Grenzen und der inneren Ränder gemäß ihrer breiten proportionalen Beziehung.

Gibt es einen Grund, wenn man sich auf die obige Logik bezieht und dann die vorherige Tabelle betrachtet? Beachten Sie, dass das zuvor erwähnte Breitenverhältnis 2: 1 zu sein scheint, wird dies sein? Schauen wir uns die Version an, die die inneren Ränder entfernt:

Verwenden Sie das Front-End-Debugging-Tool, um die Breite der oben genannten Zellen zu betrachten, und Sie werden feststellen, dass sich diese Tabelle von zuvor unterscheidet und das Verhältnis sehr nahe bei 2: 1 liegt (ja, es gibt auch einen kleinen Punkt aufgrund des Randes, aber ohne den Rand können Sie die Säulen nicht unterscheiden).

Es ist ersichtlich, dass bei der Analyse der proportionalen Beziehung der Breite die Inhaltsbreite, der innere Margen und die Grenze berücksichtigt werden. Dies zeigt auch, dass es sich nicht um ein Maß für die Anzahl der Wörter handelt, sondern ein Maß für die Breite, die Wörter im Zustand ohne Zeilenumbrüche einnehmen können (der 2: 1 hier kommt von der Tatsache, dass chinesische Zeichen gleich in der Breite sind). Verwenden Sie die inneren Ränder natürlich nur, um einen schöneren Tisch zu machen :).

Was passiert, wenn es eine Breitendefinition gibt? Hier ist eine Tabelle mit einer Breite, die in einem Teil der Zellen definiert ist:

Der entsprechende HTML -Code lautet: