Eingehende Analyse von HTML-Tabellen-Tags und zugehörigen Zeilenumbrüchen

Was ist eine Tabelle:

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

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <th>Month</th>
    <th>Date</th>
  </tr>
  <tr>
    <td>AUG</td>
    <td>18</td>
  </tr>
</table>

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 Eigenschaften 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). 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 und unbekannte Tabellen-Tags
thead, tfoot und tbody
Diese drei Tags sind die Produkte des sogenannten xhtml, mit denen Sie hauptsächlich Tabellen bearbeiten können Zeilen in . 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
thead-Tag stellt den HTML-Tabellenkopf dar.
den 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.
thead-Tag stellt die HTML-Fußzeile dar
Die Fußzeile tfoot der Tabelle. Sie können einen separaten Stil verwenden, um die Fußzeile (Fußnote oder Tabellennotiz) zu definieren, und beim Drucken können Sie die ausdrucken Seite im unteren Teil des Seitenumbruchfußes.
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:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Month Lists</th>
      <th>Date Lists</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>AUG</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

Persönlich denke ich, dass dieses Ding nutzlos, nutzlos und schade ist, 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 Tag
colgroup 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 mit 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 man die Tabelle verwendet
Persönlich denke ich, dass es in einem Container, in dem die Daten sehr dicht und sehr serialisiert sind, richtig ist, die 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 Tabellenkompliziertheiten
Manchmal bereitet die Verwendung einer Tabelle zur Anzeige von Daten Kopfschmerzen, also die Anzeige eines bestimmten Textes ohne Zeilenumbruch, insbesondere in der Tabelle Header th Es wird am häufigsten in verwendet. 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 Ebene von p innerhalb des td hinzu und verwenden Sie dann die beiden CSS-Methoden word-break:break-all; Zeilenumbruchproblem.

Richtlinien zum erzwungenen Zeilenumbruch und zum erzwungenen Nicht-Zeilenumbruch
Das Problem des erzwungenen Zeilenumbruchs und des erzwungenen Nicht-Zeilenumbruchs machte mir einmal Sorgen, als ich auf das Problem des Zeilenumbruchs stieß. Es war der Beginn schmerzhafter Erinnerungen. Jetzt habe ich endlich aus meiner Erfahrung gelernt und hart daran gearbeitet, dieses seit langem bestehende und hartnäckige Problem zu lösen.
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:

Wortumbruchsyntax
Wortumbruch: normal (Standard) | Jeder Browser erkennt den Parameter
:
normal: Ermöglicht, dass Inhalte über die angegebenen Containergrenzen hinaus verschoben werden.
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 Folge englischer Wörter. Zeilenumbruch:umbruch-wort behandelt das gesamte Wort als Ganzes, wenn das Ende der Zeile nicht breit genug ist, um das gesamte Wort anzuzeigen , 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 p. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (wenn es sich um td handelt, kann der Zeilenumbruch mit th plus Breite funktionieren unter IE Effektiv, aber aus Sicht der vollständigen Kompatibilität und des praktischen Speichers 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 nur dieses Mal ohne Zeilenumbruch verwenden, werden die Chinesen nicht umbrechen. (Englische Sätze sind normal.)
Schlussfolgerung:
Der Aktionsumfang umfasst nur Standardelemente auf Blockebene wie p. Tabellenelemente wie th und td werden erkannt, haben aber keine Auswirkung (getestet unter Chrome-Wortumbruch). :break-all Es ist effektiv, aber aus Sicht 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.

Leerzeichen-Syntax
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 p und td sowie in IEs p. 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 p erzwingen müssen, ist Zeilenumbruch die häufigste Lösung: break-word; word-break:break-all; Der Nachteil dieser Methode besteht darin, dass das Wort auf umständliche Weise auseinandergerissen wird, wenn das Ende der Zeile zufällig auftritt (was bei FF nicht der Fall ist). erkennt Wortbrüche, reißt das Wort aber nicht auseinander). Ich persönlich denke, dass die Verwendung dieser Lösung eine sehr gute Wahl ist, wenn Sie eine lange Zeichenfolge ähnlich URLs in Ihr p 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 zum Erzwingen von Zeilenumbrüchen:

Das Problem, keine Zeilenumbrüche zu erzwingen, ist relativ einfach zu analysieren. Wie oben erläutert, verwenden Sie „white-space:nowrap“, „p“ und „There“ von Firefox ist in td und p im IE 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 p-Ebene zwischen Text und td zu legen 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 anscheinend nur an der Kompatibilität zwischen diesen wenigen Attributen im Browser liegt. Es scheint keine perfekte Lösung zu geben, die mit verschiedenen 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.

Für eine ausführlichere Analyse von HTML-Tabellen-Tags und damit verbundenen Zeilenumbruchproblemen schauen Sie sich bitte die chinesische PHP-Website an!