Detaillierte Analyse von HTML-Tabellen-Tags und damit verbundenen Zeilenumbruchproblemen

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:

Eine einfache HTML-Tabelle besteht aus einem Tabellenelement und einem oder mehreren tr-, th- oder td-Elementen. Das tr-Element definiert die Tabellenzeilen, das th-Element die Kopfzellen und das td-Element die Tabellenzellen. Das Border-Attribut gibt die Breite des Tabellenrahmens an, Cellpadding gibt den Abstand zwischen dem Zellrand und seinem Inhalt an und Cellspacing gibt den Abstand zwischen den Zellen an. Wir setzen diese drei Attribute im Allgemeinen manuell auf 0, um Browserunterschiede zu vermeiden. Das width-Attribut gibt die Breite der Tabelle an, da sich die Breite der Tabelle mit der Breite der internen Elemente ändert. Normalerweise hoffen wir, dass die Tabelle dieselbe Breite wie der externe Container hat, daher wird die Standardbreite häufig auf 100 % gesetzt, um den Container auszufüllen.

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.

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:

Ich persönlich finde, dass das Ding nutzlos ist, keinen Gebrauch macht und es schade ist, es wegzuwerfen. Kleine Projekte können etwas Semantik hinzufügen, aber da wir auf das Dilemma gestoßen sind, dass mehrere verschiedene Tabellenüberschriften in derselben Tabelle angezeigt werden, was die zukünftige Entwicklung einschränkt, sollten formelle Projekte diese Tags aus Sicht der Skalierbarkeit mit Vorsicht verwenden.

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.

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.
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.

Strategie für erzwungenen Zeilenumbruch und erzwungenen keinen Zeilenumbruch
Das Problem des erzwungenen Zeilenumbruchs und des erzwungenen Nicht-Zeilenumbruchs hat mich einmal gestört. Immer wenn ich auf das Problem des Zeilenumbruchs stieß, war dies der Beginn schmerzhafter Erinnerungen. Jetzt habe ich endlich aus meinen Fehlern gelernt und dieses langjährige hartnäckige Problem auf einmal gelöst.
Für erzwungene Zeilenumbrüche und erzwungene keine Zeilenumbrüche verwendete Attribute. Wir verwenden im Allgemeinen drei CSS-Attribute, um Zeilenumbrüche zu steuern: Zeilenumbruch, Wortumbruch und Leerzeichen. Man kann sagen, dass diese drei Attribute speziell für den Textzeilenumbruch erstellt wurden. Zunächst müssen wir wissen, wofür diese drei Attribute verwendet werden:

Zeilenumbruchsyntax
Zeilenumbruch: normal (Standard) | Wortumbruch
Alle Browser können die Parameter erkennen:
normal: Ermöglicht dem Inhalt, über die angegebenen Containergrenzen hinaus zu gelangen.
Wortumbruch: Der Inhalt wird innerhalb der Grenze umbrochen. Bei Bedarf wird ein Wortumbruch ausgelöst. (Hinweis: Bitte unterscheiden Sie deutlich, dass es sich bei Wortumbruch und Wortumbruch um zwei verschiedene Dinge handelt, das eine ist ein Attribut, das andere ein Parameter.)
veranschaulichen:
Der Zeilenumbruch steuert, ob die Zeile bei Wörtern umbrochen werden soll. Er legt fest oder ruft ab, ob die aktuelle Zeile umbrochen wird, wenn sie die Grenze des angegebenen Containers überschreitet. Es gibt kein Problem mit chinesischen und englischen Sätzen. Bei langen englischen Zeichenfolgen funktioniert es jedoch nicht.
Beispiel:
Das Wort „congratulation“ gehört zu einer langen Zeichenfolge englischer Wörter. word-wrap:break-word behandelt das gesamte Wort als Ganzes. Wenn die Breite am Zeilenende nicht ausreicht, um das gesamte Wort anzuzeigen, wird das gesamte Wort automatisch in die nächste Zeile gesetzt, anstatt es abzuschneiden. Dies ist die Erklärung dafür, warum es bei langen Textzeichenfolgen nicht funktioniert. word-wrap:normal ist die Standardeinstellung und englische Wörter werden nicht umbrochen.
abschließend:
Der Aktionsumfang gilt nur für Standardelemente auf Blockebene wie div. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (wenn bei td und th Zeilenumbrüche hinzugefügt werden, kann dies im IE wirksam sein, aber aus Sicht der vollständigen Kompatibilität und einfachen Speicherung sollte die vorherige Schlussfolgerung Vorrang haben).

Worttrennungssyntax
Wörtertrennung: normal (Standard) | alles trennen | alles behalten
Parameter:
normal: Befolgt die Textregeln für asiatische und nicht-asiatische Sprachen und erlaubt Zeilenumbrüche innerhalb von Wörtern.
break-all: Dieses Verhalten ist das gleiche wie normal für asiatische Sprachen. Ermöglicht auch beliebige Wortumbrüche in Textzeilen für nicht-asiatische Sprachen. Dieser Wert ist für asiatischen Text geeignet, der nicht-asiatischen Text enthält.
keep-all: Das Gleiche wie normal für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Worttrennungen nicht zulässig. Gut für nicht-asiatische Texte mit kleinen Mengen asiatischen Texts.
veranschaulichen:
word-break:break-all, was bedeutet, Wörter zu trennen. Wenn ein Wort eine Grenze erreicht, wird der nächste Buchstabe automatisch in die nächste Zeile verschoben. Es löst vor allem das Problem langer englischer Zeichenfolgen (und gleicht damit lediglich den Mangel aus, dass „word-wrap:break-word“ bei langen Textzeichenfolgen nicht funktioniert).
Beispiel:
Wenn wir mit dem Wort „congratulation“ weiter oben fortfahren, das zu einer langen Zeichenfolge im Englischen gehört, wird das Wort durch „word-break:break-all“ gekürzt, und das Zeilenende wird zu etwas wie „conra“ (der vordere Teil von „congratulation“), und die nächste Zeile ist der hintere Teil von „conguatulation“ (conguatulation).
word-break:keep-all, bezieht sich auf chinesische, japanische und koreanische „Keep-All“-Wörter. Das heißt, wenn Sie es nur zu diesem Zeitpunkt verwenden und keinen Zeilenumbruch nutzen, werden chinesische Schriftzeichen nicht umbrochen. (Englische Sätze sind normal.)
abschließend:
Der Aktionsumfang ist auf Standardelemente auf Blockebene wie div beschränkt. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (nach dem Testen ist word-break:break-all unter Chrome wirksam, aber aus Sicht der vollständigen Kompatibilität und des einfachen Speicherns sollte die vorherige Schlussfolgerung Vorrang haben). Firefox und Opera können Wortumbrüche nicht erkennen, ganz zu schweigen von den Auswirkungen der Verwendung von Wortumbrüchen in th und td unter Firefox.

Leerzeichensyntax
Leerzeichen: normal (Standard) | pre | nowrap
Parameter:
normal: Standard. Leerzeichen werden von Browsern ignoriert.
pre: Leerzeichen werden vom Browser beibehalten. Es verhält sich ähnlich wie das Pre-Tag in HTML.
nowrap: Der Text wird nicht umbrochen. Der Text wird in derselben Zeile fortgesetzt, bis ein br-Tag gefunden wird.
veranschaulichen:
Für das Pre-Attribut werden mehrere aufeinanderfolgende Leerzeichen in HTML zusammengeführt. Um das Zusammenführen zu verhindern (der häufigste Fall ist die Anzeige einer Codetexteinrückung), bleiben die Leerzeichen darin erhalten, ohne dass wir zusätzliche Stile und Tags hinzufügen müssen, um die Einrückung und Zeilenumbrüche zu steuern. Das Prinzip des Pre-Tags ist dasselbe, standardmäßig mit einem Whitespace:pre darin.
Was das Attribut nowrap betrifft, so ist dies der Kern des erzwungenen Zeilenumbruchs. Im Allgemeinen wird dieses Attribut verwendet, um keinen Zeilenumbruch zu erzwingen. Es gibt keine Probleme in div und td von Firefox oder in div von IE. Der einzige Fehler ist, dass es ein Problem mit td im Internet Explorer gibt. Wenn td keine Breite angibt, ist nowrap trotzdem gültig. Wenn td eine Breite hat und der Text keine Satzzeichen oder Leerzeichen enthält (wie z. B. eine lange Zeichenfolge chinesischen Textes), ist nowrap nicht mehr gültig. Die Lösung besteht darin, word-break:keep-all; hinzuzufügen, um dieses Problem zu lösen.

Zusammenfassung erzwungener Zeilenumbruch:
Wenn Sie einen Zeilenumbruch in einem Standard-Blockelement wie einem Div erzwingen müssen, ist die gebräuchlichste Lösung „word-wrap:break-word; word-break:break-all“. Der Nachteil dieser Methode besteht darin, dass, wenn das Zeilenende zufällig eine lange Folge englischer Wörter ist, das Wort auf umständliche Weise auseinandergerissen wird (und FF keinen Wortumbruch erkennt, sodass es das Wort nicht auseinanderreißt). Ich persönlich denke, dass diese Lösung eine sehr gute Wahl ist, wenn Sie eine lange URL in Ihr Div einfügen (Hinweis: Da FF keine Worttrennung erkennt, gibt es keine Garantie dafür, dass die URL-Wörter am Ende jeder Zeile sauber getrennt werden, aber dies ist auch eine hilflose Wahl). Wenn Sie keine lange englische Zeichenfolge einfügen, die umbrochen werden kann (z. B. eine URL), sondern einen englischen Satz, können Sie „word-wrap:break-word;“ verwenden. Was die im Internet gesehene Methode word-wrap:break-word; overflow:hidden; betrifft, so soll sie mit IE und FF kompatibel sein, nach persönlichen Tests scheint sie jedoch keinen besonderen Effekt zu haben.

Zusammenfassung: Kein Zeilenumbruch erzwungen:
Das Problem des erzwungenen Nicht-Umbruchs ist relativ einfach zu analysieren. Wie oben erläutert, gibt es bei Verwendung von white-space:nowrap in div und td von Firefox und in div von IE kein Problem. Der einzige Fehler ist, dass es ein Problem mit td im Internet Explorer gibt. Wenn td keine Breite angibt, ist nowrap trotzdem gültig. Wenn td eine Breite hat und der Text keine Satzzeichen oder Leerzeichen enthält (wie z. B. eine lange Zeichenfolge chinesischen Textes), ist nowrap nicht mehr gültig. Die Lösung besteht darin, word-break:keep-all; hinzuzufügen, um dieses Problem zu lösen. Zusammenfassend lässt sich sagen, dass es sicherer ist, ein weiteres Div zwischen Text und td einzufügen und dann Nowrap zu verwenden, wodurch kein Zeilenumbruch erzwungen wird. Beachten Sie, dass die Wahrscheinlichkeit hoch ist, dass zu viel Text vorhanden ist und der Container dadurch überläuft. Sie müssen daher „overflow:hidden“ hinzufügen, um ein Überlaufen des Containers zu verhindern, damit der Container mit allen Browsern kompatibel ist.
Nachdem ich so viel zusammengefasst hatte, stellte ich fest, dass es sich anscheinend nur um ein Gleichgewicht der Kompatibilität dieser wenigen Attribute im Browser handelt. Nun scheint es keine perfekte Lösung zu geben, die mit allen Browsern kompatibel ist. Das Beste, was wir tun können, ist, die Anzeige jedes Browsers so konsistent wie möglich zu halten. Wenn Sie immer noch der Meinung sind, dass Sie mit allen Browsern kompatibel sein müssen, besteht die endgültige Lösung darin, JS zu verwenden. In zukünftigen Artikeln werde ich erwägen, diese Anforderung mit den niedrigsten JS-Kosten zu erfüllen, dies liegt jedoch nicht im Rahmen dieses Artikels.