Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)

Tabellen spielten einst eine sehr wichtige Rolle bei der Entwicklung von Webseiten – dem Layout. Sogar im Web 2.0 können wir ihr Layout noch sehen. Mit dem kontinuierlichen Fortschritt der Technologie hat die Kombination Div+Css jedoch endlich die Tür zum altmodischen Layout geöffnet und eine neue Layout-Welle eingeläutet. Was folgte, waren neue und alte Grollgefühle, und viele Leute, ob sie nun eine Meinung zu Tabellen hatten oder nicht, begannen, sie zu kritisieren – aufgeblähter Code, semantische Tags, komplizierte Schreibmethoden usw. Bedenken Sie, dass Tabellen ursprünglich nicht für das Layout, sondern für die Anzeige von Daten erstellt wurden. Der Verzicht auf das Tabellenlayout bedeutet nicht den Verzicht auf die Tabelle selbst. Womit kann ich dich, meinen Tisch, retten?

Was ist eine Tabelle?

Eine Tabelle ist eine HTML-Tabelle, ein Datenträger.

Das Folgende ist eine relativ standardmäßige Methode zum Schreiben von Tabellencode:

Das Attribut table-layout:fixed, das erwähnt werden muss

Tabellenlayout: automatisch (Standard) | behoben.

Parameter:

auto: Der standardmäßige automatische Algorithmus. Das Layout basiert auf dem Inhalt der einzelnen Zellen. Die Tabelle wird erst angezeigt, wenn jede einzelne Zelle gelesen und berechnet wurde, was sehr langsam ist.
behoben: Layout-Algorithmus behoben. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Tabellenbreite, der Tabellenrahmenbreite, dem Zellenabstand und der Spaltenbreite und hat nichts mit dem Tabelleninhalt zu tun. Schnelle Analysegeschwindigkeit.

Arbeitsschritte des Festlayoutmodells:
1. Alle Spaltenelemente, deren Breitenattributwert nicht „auto“ ist, legen die Breite der Spalte entsprechend dem Breitenwert fest.
2. Die Breite der Zelle in der Spalte in der ersten Zeile der Tabelle. Stellen Sie die Breite dieser Spalte entsprechend der Breite der Zelle ein. Wenn die Zelle mehrere Spalten umfasst, wird die Breite gleichmäßig auf die Spalten aufgeteilt.
3. Wenn die Spaltenbreite nach den beiden obigen Schritten immer noch automatisch ist, wird ihre Größe automatisch bestimmt, um die Breite so gleichmäßig wie möglich zu gestalten. In diesem Fall wird die Tabellenbreite auf den Tabellenbreitenwert oder die Summe der Spaltenbreiten (je nachdem, welcher Wert größer ist) eingestellt. Wenn die Tabellenbreite größer ist als die Summe der Spaltenbreiten, dividieren Sie die Differenz durch die Anzahl der Spalten und addieren Sie diese Breite zu jeder Spalte.
Dieser Ansatz ist schnell, da alle Spaltenbreiten durch die erste Zeile der Tabelle definiert werden. Die Größe der Zellen in allen Zeilen nach der ersten Zeile wird gemäß der in der ersten Zeile definierten Spaltenbreite festgelegt. Die Spaltenbreiten der Zellen in den nachfolgenden Zeilen werden nicht geändert. Dies bedeutet, dass alle für diese Zellen angegebenen Breitenwerte ignoriert werden.

Wenn Sie komplexe HTML-Tabellen erstellen, werden Sie manchmal feststellen, dass sich die Spaltenbreite unerwartet ändert, egal wie Sie die Breite jeder Spalte in der ersten Zeile anpassen (wenn es beispielsweise eine lange Zeichenfolge englischen Textes ohne Leerzeichen in der Mitte gibt, möchten Sie die Breite dieser Spalte begrenzen, damit der lange Text umbrochen wird und die Tabelle nicht beschädigt wird. Dies führt jedoch häufig dazu, dass Sie die Breite nicht auf die entsprechende Breite anpassen können. In diesem Moment sind Sie hilflos und können table-layout:fixed verwenden.

Problem mit dem Zeilenumbruch in der Tabelle

Die Verwendung einer Tabelle zur Anzeige von Daten kann manchmal Probleme bereiten. Dies bedeutet, dass ein bestimmter Textabschnitt nicht in die nächste Zeile umgebrochen werden muss. Dies gilt insbesondere für die am häufigsten verwendete Tabellenüberschrift. Tatsächlich bereitet Ihnen nicht der Zeilenumbruch Kopfzerbrechen, sondern die dahinter stehende Browserkompatibilität, die den Zeilenumbruch deutlich erschwert. Hier können Sie sich von dem Artikel „Strategien für erzwungene Zeilenumbrüche und erzwungene Nicht-Zeilenumbrüche“ inspirieren lassen, in dem ausführlich auf die Handhabung von Zeilenumbrüchen in unterschiedlichen Situationen eingegangen wird.

Generell empfehle ich für Zeilenumbrüche in einer Tabelle folgende Vorgehensweise: Legen Sie zunächst table-layout:fixed für die Tabelle fest. Nach dem Festlegen dieser Eigenschaft können die grundlegenden Zeilenumbruchprobleme grundsätzlich gelöst werden und die Situation, dass td und th in der Tabelle die Breite anderer tds und ths einnehmen, tritt aufgrund der Menge des Inhalts darin nicht mehr auf. Wenn das Problem mit erzwungenen Zeilenumbrüchen derzeit immer noch besteht, fügen Sie innerhalb dieses td eine Div-Ebene hinzu und verwenden Sie dann die beiden CSS-Methoden „word-wrap:break-word“ und „word-break:break-all“, um das Zeilenumbruchproblem zu lösen.

Mehrere gängige und unbekannte Tabellen-Tags

thead, tfoot und tbody

Diese drei Tags sind Produkte des sogenannten XHTML und bieten Ihnen in erster Linie die Möglichkeit, Zeilen in einer Tabelle zu gruppieren. Wenn Sie eine Tabelle erstellen, möchten Sie wahrscheinlich eine Kopfzeile, einige Zeilen mit Daten und unten eine Gesamtsummenzeile haben. Durch diese Aufteilung sind Browser in der Lage, das Scrollen des Tabellenkörpers unabhängig von der Kopf- und Fußzeile der Tabelle zu unterstützen. Beim Drucken langer Formulare werden die Kopf- und Fußzeilen der Tabelle möglicherweise auf jeder Seite gedruckt, die die Tabellendaten enthält. Ich persönlich glaube, dass sein Hauptzweck darin besteht, die Anzeige sehr langer Tabellen zu optimieren.

Der Tag „thead“ stellt die HTML-Tabellenüberschrift dar
Die Kopfzeile der Tabelle, thead, kann mithilfe eines separaten Stils definiert werden und beim Drucken kann die Kopfzeile oben auf der Seite gedruckt werden.

thead-Tag repräsentiert den HTML-Fußzeilenbereich
Der Tabellenfuß tfoot kann einen separaten Stil zum Definieren des Fußes (Fußnote oder Tabellennotiz) verwenden und der Fuß beim Drucken am unteren Seitenrand gedruckt werden.

Der tbody-Tag repräsentiert den HTML-Tabellenkörper
Wenn ein Browser eine Tabelle anzeigt, lädt er die Tabelle normalerweise vollständig herunter, bevor er sie vollständig anzeigt. Wenn die Tabelle sehr lang ist, können Sie sie daher mit tbody in Abschnitten anzeigen.

Hinweis: Wenn Sie die Elemente „thead“, „tfoot“ und „tbody“ verwenden, müssen Sie alle verwenden. Sie werden in der Reihenfolge „thead“, „tfoot“ und „tbody“ angezeigt, sodass der Browser Kopf- und Fußzeile rendern kann, bevor er alle Daten empfängt. Sie müssen diese Tags innerhalb eines Tabellenelements verwenden und der Thread muss ein tr-Tag enthalten. Die üblichere Art, eine Tabelle zu schreiben, ist daher die folgende:

col und colgroup

Diese beiden Tags sind ebenfalls Produkte von XHTML. Sie sind leistungsstark, weisen jedoch eine schlechte Kompatibilität auf.

Der col-Tag definiert Attributwerte für eine oder mehrere Spalten in einer Tabelle.

Das Colgroup-Tag wird verwendet, um Spalten in einer Tabelle zu Formatierungszwecken zu gruppieren.

Ihre Hauptfunktion besteht darin, die Breite der Zelle zu steuern, wodurch die Mühe entfällt, jede Zelle separat zu definieren. In der Vergangenheit haben wir die Breite häufig in th oder td in der ersten Zeile definiert, um die Breite jeder Spalte anzugeben, während col nicht nur die Breite, sondern gleichzeitig auch andere Attribute definieren kann. Beispielsweise kann col verwendet werden, um die Summe der Breiten mehrerer Spalten und die Hintergrundfarbe der Spalte zu steuern. Aber Ideale sind umfassend und die Realität ist skelettartig. Wie bereits erwähnt, bedeuten mehr Funktionen nicht mehr Kompatibilität. Laut vorhandenen Tests gibt es nur zwei Anwendungen, bei denen col und colgroup eine Rolle spielen und Kompatibilität sicherstellen können: Breite und Hintergrund. Bezüglich der Breite bevorzuge ich die herkömmliche Methode, bei der ich die Breite in der ersten Zeile festlege, um die Spaltenbreite sicherzustellen. Was den Hintergrund betrifft, kommt es in der Praxis selten vor, dass große Bereiche einer Tabelle mit unterschiedlichen Hintergründen belegt werden. Daher bin ich persönlich der Meinung: Versuche, es möglichst nicht zu verwenden.

Wo wird die Tabelle verwendet?

Persönlich denke ich, dass es in einem Container mit sehr dichter und serialisierter Datenmenge richtig ist, eine Tabelle zu verwenden. Das bekannteste Beispiel ist unsere Seite zur Abwicklung allgemeiner Einkaufsbestellungen. Dort sind Ihre Bestelldetails aufgelistet: Produktname, Stückpreis, Kaufmenge, Zwischensumme, Versandkosten usw. Ganz unten wird schließlich der endgültige Bestellbetrag angezeigt. Die Tabelle ist hier wie ein Fisch im Wasser und erzielt die magische Wirkung eines Datenträgers.

Oben finden Sie einen Überblick über allgemeine Tabellenwissenspunkte sowie eine Analyse und Zusammenfassung mehrerer häufig verwendeter Stellen. Ich hoffe, dass Sie nach dem Lesen dieses Artikels Tabellen mit der richtigen Einstellung betrachten und verwenden. Ich hoffe, dieser Artikel kann Ihnen ein wenig Rettung bringen, mein Tisch. Danke.