Eingehende Analyse von HTML-Tabellen-Tags und zugehörigen Zeilenumbrüchen_HTML/Xhtml_Webseitenproduktion

Was ist eine Tabelle:
Tabelle ist eine HTML-Tabelle, der Datenträger.
Das Folgende ist eine relativ Standardmethode zum Schreiben von Tabellencode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Tabelle Rahmen="0" Zellenabstand="0" Zellenabstand="0" Breite="100%">
2. <tr>
3.  <.>Monatth> 
4.  <.>Datumth> 
5. tr>
6. <tr>
7.  <td>AUGtd>
8.  <td>18td>
9. tr>
10. Tabelle>

Eine einfache HTML-Tabelle besteht aus dem Tabellenelement und einem oder mehreren tr-, th- oder td-Elementen. Das tr-Element definiert die Tabellenzeile, das th-Element definiert die Kopfzelle und das td-Element definiert die Tabellenzelle. Das Attribut „border“ gibt die Breite des Tabellenrands 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. In häufigen Situationen möchten wir, dass die Tabelle dieselbe Breite wie der externe Container hat, daher wird häufig die Standardbreite festgelegt auf 100 %, um den Behälter zu füllen.

Ich muss sagen, das Tabellenlayout: festes Attribut
Tabellenlayout: automatisch (Standard) |.
Parameter:
auto: Standardmäßiger automatischer Algorithmus. Das Layout basiert auf dem Inhalt jeder Zelle. Die Tabelle wird erst angezeigt, wenn jede Zelle gelesen und berechnet wurde, was sehr langsam ist.
fixed: fester Layout-Algorithmus. Bei diesem Algorithmus basiert das horizontale Layout nur auf der Breite der Tabelle, der Breite des Tabellenrandes, dem Zellenabstand und der Breite der Spalten und hat nichts mit dem Tabelleninhalt zu tun. Die Parsing-Geschwindigkeit ist hoch.
Arbeitsschritte des festen Layoutmodells:
1. Alle Spaltenelemente, deren Breitenattributwert nicht automatisch ist, legen die Breite der Spalte entsprechend dem Breitenwert fest.
2. Die Zellenbreite dieser Spalte in der ersten Zeile der Tabelle, legen Sie die Breite dieser Spalte entsprechend der Zellenbreite fest. Wenn sich die Zelle über mehrere Spalten erstreckt, wird die Breite gleichmäßig auf die Spalten verteilt.
3. Wenn die Breite der Spalte nach den beiden oben genannten Schritten immer noch automatisch ist, wird ihre Größe automatisch bestimmt, um ihre Breite so gleich wie möglich zu machen. Zu diesem Zeitpunkt wird die Breite der Tabelle auf den Breitenwert der Tabelle oder die Summe der Spaltenbreiten (je nachdem, welcher Wert größer ist) festgelegt. Wenn die Tabellenbreite größer als die Summe ihrer Spaltenbreiten ist, dividieren Sie die Differenz durch die Anzahl der Spalten und addieren Sie die resultierende Breite zu jeder Spalte.
Diese Methode 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 entspricht der durch die erste Zeile definierten Spaltenbreite. Zellen in diesen späteren Zeilen ändern die Spaltenbreite nicht. Das bedeutet, dass alle für diese Zellen angegebenen Breitenwerte ignoriert werden.
Im Allgemeinen werden Sie beim Erstellen komplexer Tabellen-HTML manchmal feststellen, dass sich die Spaltenbreite unabhängig davon, wie Sie die Breite jeder Spalte in der ersten Zeile anpassen, immer noch unerwartet ändert (z. B. bei einer langen Zeichenfolge mit englischem Text, und wenn ja). Wenn sich in der Mitte kein Leerzeichen befindet, möchten Sie die Breite dieser Spalte begrenzen, damit der lange Text umgebrochen werden muss, ohne dass die Tabelle beschädigt wird. Dies führt häufig dazu, dass die entsprechende Breite nicht angepasst werden kann, egal wie Sie es versuchen.) . Zu diesem Zeitpunkt können Sie in Ihrer Verzweiflung table-layout:fixed verwenden.

Gemeinsame, aber unbekannte Tabellen-Tags
thead, tfoot und tbody
Diese drei Tags sind die Produkte des sogenannten xhtml, die es Ihnen hauptsächlich ermöglichen, die Zeilen in der Tabelle zu bearbeiten. Bilden Sie Gruppen. Wenn Sie eine Tabelle erstellen, möchten Sie wahrscheinlich eine Kopfzeile, einige Zeilen mit Daten und eine Gesamtzeile am Ende haben. Diese Unterteilung gibt dem Browser die Möglichkeit, das Scrollen des Tabellenkörpers unabhängig von Tabellenkopf- und -fußzeilen zu unterstützen. Beim Drucken langer Tabellen können die Tabellenkopf- und -fußzeilen auf jeder Seite gedruckt werden, die die Tabellendaten enthält. Persönlich denke ich, dass sein Hauptzweck darin besteht, die Anzeige sehr langer Tabellen zu optimieren. Das Tag
thead stellt den HTML-Tabellenkopf dar.
ist der Kopf der Tabelle. Sie können einen separaten Stil verwenden, um den Tabellenkopf zu definieren, und Sie können den Tabellenkopf oben drucken die Seite beim Drucken. Das Tag
thead stellt die HTML-Fußzeile dar.
Die Fußzeile (Fußnote) der Tabelle kann mit einem separaten Stil definiert und die Seite gedruckt werden unteren Teil der Seite beim Drucken.
tbody-Tag stellt den HTML-Tabellenkörper dar.
Wenn der Browser die Tabelle anzeigt, lädt er sie normalerweise vollständig herunter und zeigt sie dann vollständig an Verwenden Sie tbody, um es in Segmenten anzuzeigen.
Hinweis: Wenn Sie die Elemente thead, tfoot und tbody verwenden, müssen Sie alle verwenden. Die Reihenfolge, in der sie angezeigt werden, ist: thead, tfoot, tbody, damit der Browser die Kopf- und Fußzeile rendern kann, bevor er alle Daten empfängt. Sie müssen diese Tags innerhalb des Tabellenelements verwenden und thead muss das tr-Tag darin enthalten. Daher ist die Standardmethode zum Schreiben einer Tabelle der folgende Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <Tabelle Rahmen="0"  Zellenabstand="0" Zellenabstand="0" Breite="100%">  
2.   <thead>  
3.     <tr>  
4.       <.>Monatth>  
5.       <.>Datumth>  
6.     tr>  
7.   thead>  
8.   <tfoot>  
9.     <tr>  
10.       <.>Monatslistenth>  
11.       <.>Datumslistenth>  
12.     tr>  
13.   tfoot>  
14.   <tbody>  
15.     <tr>  
16.       <td>AUGtd>  
17.       <td>18td>  
18.     tr>  
19.   tbody>  
20. Tabelle>  

Ich persönlich finde dieses Ding nutzlos, nutzlos und schade, es wegzuwerfen. Kleine Projekte können etwas Semantik hinzufügen, aber da sie auf das Dilemma stoßen, dass mehrere verschiedene Header in derselben Tabelle angezeigt werden, was die zukünftige Entwicklung einschränkt, verwenden formale Projekte diese Tags aus Sicht der Skalierbarkeit mit Vorsicht.

col und colgroup
sind ebenfalls Produkte von xhtml. Sie sind leistungsstark und kompatibel. Das
col-Tag definiert Attributwerte für eine oder mehrere Spalten in der Tabelle. Das
colgroup-Tag wird verwendet, um Spalten in der Tabelle zur Formatierung zu gruppieren.
Ihre Hauptfunktion besteht darin, die Breite der Zellen zu steuern, was die Mühe erspart, jede Zelle einzeln zu definieren. In der Vergangenheit haben wir oft die Breite auf th oder td in der ersten Zeile definiert, um die Breite jeder Spalte anzugeben. und col können nicht nur die Breite definieren, sondern gleichzeitig auch andere Attribute definieren. Beispielsweise können Sie mit col die Summe der Breiten mehrerer Spalten steuern und auch die Hintergrundfarbe dieser Spalte steuern. Aber das Ideal ist voll und die Realität ist Rückgrat. Je größer die Funktion, desto größer die Kompatibilität. Laut bestehenden Tests können nur zwei Anwendungen eine Rolle spielen und die Kompatibilität zwischen Col und Colgroup gewährleisten. Breite und Hintergrund. Für die Breite verwende ich persönlich lieber die herkömmliche Methode, stelle die Breite in der ersten Zeile ein und stelle die Spaltenbreite sicher. Was den Hintergrund betrifft, kommt es in der Praxis selten vor, dass Tabellen in großen Bereichen unterschiedliche Hintergründe verwenden. Deshalb denke ich persönlich: Benutze es nicht so oft wie möglich.

Wo soll die Tabelle verwendet werden?
Persönlich denke ich, dass es in einem Container, in dem die Daten sehr dicht und sehr serialisiert sind, richtig ist, eine Tabelle zu verwenden. Das häufigste Beispiel ist unsere allgemeine Einkaufsabwicklungsseite, auf der die Details Ihrer Bestellung aufgeführt sind: Produktname, Stückpreis, Kaufmenge, Zwischensumme des Betrags, Versandkosten usw. Schließlich gibt es noch ein Ergebnis mit dem endgültigen Bestellbetrag unten, Tabelle Man kann sagen, dass es hier wie ein Fisch im Wasser ist und die magische Wirkung eines Datenträgers erreicht hat.

Zeilenumbruch bei Tabellenkomplikationen
Manchmal bereitet die Anzeige von Daten in einer Tabelle Kopfschmerzen, d. h. die Anzeige eines bestimmten Textes ohne Zeilenumbruch, insbesondere bei Verwendung in Tabellenüberschriften die meisten Orte. Tatsächlich ist das Problem, das Sie haben, nicht der Zeilenumbruch, aber die Browserkompatibilität dahinter macht den Zeilenumbruch viel schwieriger.
Im Allgemeinen lautet die empfohlene Methode zum Umbrechen von Zeilen in einer Tabelle: Legen Sie zuerst das Tabellenlayout fest: Nach dem Festlegen dieses Attributs kann das grundlegende Problem des Zeilenumbruchs ohne td in der Tabelle gelöst werden. Aufgrund der Menge jedes darin enthaltenen Inhalts besteht die Situation, dass um die Breite anderer td und th konkurriert. Wenn Sie zu diesem Zeitpunkt immer noch das Problem der erzwungenen Zeilenumbrüche haben, fügen Sie eine div-Ebene innerhalb des td hinzu und verwenden Sie dann die beiden CSS-Methoden word-break:break-all; Zeilenumbruchproblem.

Richtlinien zu erzwungenen Zeilenumbrüchen und erzwungenen Nicht-Zeilenumbrüchen
Das Problem der erzwungenen Zeilenumbrüche und erzwungenen Nicht-Zeilenumbrüche hat mich einmal gestört, wenn ich auf das Problem mit den Zeilenumbrüchen gestoßen bin Beginn schmerzhafter Erinnerungen. Jetzt lerne ich endlich aus dem Schmerz. Lasst uns gemeinsam an der Lösung dieses seit langem bestehenden und hartnäckigen Problems arbeiten.
Attribute, die verwendet werden, um Zeilenumbrüche zu erzwingen und keine Zeilenumbrüche zu erzwingen
Wir verwenden im Allgemeinen drei CSS-Attribute, um Zeilenumbrüche zu steuern: Zeilenumbruch; Man kann sagen, dass diese drei Attribute speziell für den Zeilenumbruch im Text erstellt wurden. Zuerst müssen wir wissen, wofür diese drei Attribute verwendet werden:

Wortumbruch-Syntax
Wortumbruch: normal (Standard) | Umbruchwort
Jeder Browser kann es erkennen
Parameter:
normal: Erlaubt Der Inhalt soll über die angegebenen Containergrenzen hinausgehen.
Break-Wort: Inhalte werden innerhalb von Grenzen gebrochen. Bei Bedarf wird ein Wortumbruch ausgelöst (Hinweis: Bitte unterscheiden Sie deutlich, dass Wortumbruch und Wortumbruch unterschiedliche Dinge sind, eines ist ein Attribut und das andere ein Parameter).
Beschreibung:
Wortumbruch steuert, ob „Zeilen für Wörter umgebrochen“ werden sollen, und legt fest oder ruft ab, ob Zeilen umgebrochen werden sollen, wenn die aktuelle Zeile die Grenze des angegebenen Containers überschreitet. Es gibt kein Problem mit chinesischen Sätzen und es gibt kein Problem mit englischen Sätzen. Aber für lange Englischzeilen funktioniert es nicht.
Beispiel:
Das Wort congratulation gehört zu einer langen Zeichenfolge englischer Wörter. Wenn das Zeilenende nicht breit genug ist, wird das gesamte Wort als Ganzes angezeigt , wird automatisch das gesamte Wort in die nächste Zeile eingefügt, ohne die Wörter abzuschneiden, weshalb es bei langen Textzeichenfolgen nicht funktioniert. word-wrap:normal ist die Standardeinstellung und englische Wörter werden nicht geteilt.
Fazit:
Der Aktionsbereich umfasst nur Standardelemente auf Blockebene wie div. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (wenn td, th plus Zeilenumbruch unter IE funktionieren können). Effektiv, aber im Hinblick auf vollständige Kompatibilität und praktischen Speicher hat die vorherige Schlussfolgerung Vorrang.

Wortumbruchsyntax
Wortumbruch: normal (Standard) | Parameter:
normal: entsprechend asiatischen Sprachen ​​und Nicht-Textregeln für asiatische Sprachen, die Zeilenumbrüche innerhalb von Wörtern zulassen.
Break-All: Dieses Verhalten ist das gleiche wie in asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält.
keep-all: Dasselbe wie üblich für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Geeignet für nicht-asiatischen Text, der eine kleine Menge asiatischen Text enthält.
Erklärung:
word-break:break-all, ist ein Break-Wort. Wenn ein Wort eine Grenze erreicht, wird der nächste Buchstabe automatisch in die nächste Zeile verschoben. Es löst hauptsächlich das Problem langer englischer Zeichenfolgen (es gleicht lediglich den oben genannten Fehler aus, dass word-wrap:break-word bei langen Textzeichenfolgen nicht funktioniert).
Beispiel:
Wenn wir mit dem oben Gesagten fortfahren, gehört das Wort congratulation zu einer langen Reihe englischer Wörter. Word-break:break-all kürzt das Wort ab und das Ende der Zeile wird so etwas wie conra (the vorderer Teil der Glückwünsche. Weiter Der hintere Teil der Verhaltens-Tulation (Conguatulation).
word-break:keep-all bezieht sich auf fortlaufende Wörter in Chinesisch, Japanisch und Koreanisch. Das heißt, wenn Sie dieses Mal nur ohne Zeilenumbruch verwenden, werden die Chinesen nicht umbrechen. (Englische Sätze sind normal.)
Fazit:
funktioniert nur bei Standardelementen auf Blockebene wie div. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (getestet unter Chrome word-break:break-). alle Es ist effektiv, aber aus der Perspektive der vollständigen Kompatibilität und des praktischen Speichers hat die vorherige Schlussfolgerung Vorrang. Firefox und Opera können Wortumbrüche nicht erkennen, geschweige denn die Auswirkung der Verwendung von Wortumbrüchen in th und td unter Firefox.

Leerzeichensyntax
Leerzeichen: normal (Standard) |. Parameter: normal: Standard. Leerzeichen werden vom Browser ignoriert.
pre: Leerzeichen werden vom Browser beibehalten. Es verhält sich wie das pre-Tag in HTML.
nowrap: Der Text wird nicht umgebrochen. Der Text wird in derselben Zeile fortgesetzt, bis das br-Tag gefunden wird.
Hinweis:
Für das pre-Attribut werden mehrere aufeinanderfolgende Leerzeichen in HTML zusammengeführt. Um zu verhindern, dass sie zusammengeführt werden (der häufigste Anlass besteht darin, die Einrückung von Codetext anzuzeigen), werden Leerzeichen hinzugefügt Zeichen werden fortgesetzt, ohne dass wir zusätzliche Stile und Tags hinzufügen müssen, um die Einrückung und den Zeilenumbruch zu steuern. Das Prinzip des pre-Tags ist dasselbe. Standardmäßig gibt es ein Leerzeichen: pre.
Für das Nowrap-Attribut ist dies der Kern des Erzwingens von Zeilenumbrüchen. Im Allgemeinen wird dieses Attribut verwendet, um keine Zeilenumbrüche zu erzwingen. Es gibt kein Problem in Firefoxs div und td sowie in IEs div. Der einzige Fehler besteht darin, dass es ein Problem im td gibt. Wenn der td keine Breite angibt, ist nowrap immer noch gültig, wenn der td keine Satzzeichen oder Leerzeichen im Text enthält (z. B. eine lange Zeichenfolge). Chinesischer Text), funktioniert Nowrap nicht mehr effizient. Die Lösung besteht darin, word-break:keep-all; hinzuzufügen, um dieses Problem zu lösen.

Zusammenfassung der erzwungenen Zeilenumbrüche:

Wenn Sie Zeilenumbrüche in Standardelementen auf Blockebene wie div erzwingen müssen, ist die häufigste Lösung word-wrap:break-word; break:break- all; Der Nachteil dieser Methode besteht darin, dass, wenn das Ende der Zeile zufällig eine lange Folge englischer Wörter ist, das Wort auf umständliche Weise auseinandergerissen wird (und FF Wortumbrüche nicht erkennt, aber wird das Wort nicht auseinanderreißen). Ich persönlich bin der Meinung, dass die Verwendung dieser Lösung eine sehr gute Wahl ist, wenn Sie in diesem Div eine lange Zeichenfolge mit URLs ähnlichen Adressen einfügen (Hinweis: Da FF Wortumbrüche nicht erkennt, gibt es keine Garantie dafür, dass die URL-Wörter korrekt sind ordentlich unterbrochen am Ende jeder Zeile, aber auch das ist eine hilflose Wahl. Wenn Sie keine lange Zeichenfolge in englischer Sprache einfügen, die umgebrochen werden kann, z. B. eine URL, sondern einen englischen Satz, verwenden Sie „word-wrap:break-word;“. Was den Zeilenumbruch:break-word; betrifft, den ich im Internet gesehen habe, soll er mit IE und FF kompatibel sein, aber nach persönlichen Tests scheint er keine besondere Wirkung zu haben.

Zusammenfassung des erzwungenen Nicht-Zeilenumbruchs:

Das Problem des erzwungenen Nicht-Zeilenumbruchs ist relativ einfach zu analysieren. Wie oben erläutert, verwenden Sie White-Space: Nowrap, Firefox's div und td. Ebenso wie im Div des IE gibt es kein Problem. Der einzige Fehler besteht darin, dass es ein Problem im td gibt. Wenn der td keine Breite angibt, ist nowrap immer noch gültig, wenn der td keine Satzzeichen oder Leerzeichen im Text enthält (z. B. eine lange Zeichenfolge). Chinesischer Text), funktioniert Nowrap nicht mehr effizient. 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, eine weitere div-Ebene zwischen Text und td zu platzieren und dann nowrap zu verwenden, wodurch keine Zeilenumbrüche erzwungen werden. Beachten Sie, dass es zu diesem Zeitpunkt sehr wahrscheinlich ist, dass zu viel Text den Container überläuft. Sie müssen daher einen Überlauf hinzufügen: versteckt, um zu verhindern, dass der Container überläuft, damit er mit verschiedenen Browsern kompatibel ist.
Nachdem ich so viel zusammengefasst habe, habe ich festgestellt, dass es nur ein paar Attribute sind, die die verschiedenen Kompatibilitäten im Browser ausgleichen. Es scheint keine perfekte Lösung zu geben, die mit allen Browsern vollständig kompatibel ist Versuchen Sie einfach, die Browseranzeige 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 geringsten JS-Kosten zu erfüllen, aber dies liegt nicht im Rahmen dieses Artikels.