Heim >Web-Frontend >HTML-Tutorial >Was kann ich tun, um Sie zu retten, meinen Tisch (Haiyu-Blog)_HTML/Xhtml_Webpage-Produktion
Was kann ich tun, um Sie zu retten, meinen Tisch (Haiyu-Blog)_HTML/Xhtml_Webpage-Produktion
WBOYOriginal
2016-05-16 16:37:161118Durchsuche
Table nahm einst eine wichtige Position in der Webentwicklung ein – das Layout. Auch im Web2.0 können wir sein Layout noch sehen. Die Technologie verbessert sich jedoch ständig und die Div-CSS-Kombinationsmethode hat endlich an die Tür des altmodischen Layouts geklopft und eine neue Layout-Welle ausgelöst. Was folgte, war neuer und alter Groll, egal ob sie eine Meinung zu Tabelle hatten oder nicht, begannen auch, Tabelle zu kritisieren – aufgeblähter Code, unsemantische Tags, komplizierte Schreibmethoden usw. . Denken Sie daran, dass Tabellen ursprünglich nicht für das Layout, sondern für die Anzeige von Daten erstellt wurden. Das Aufgeben des Tabellenlayouts bedeutet nicht, dass man die Tabelle selbst aufgibt. Was kann ich tun, um dich, meinen Tisch, zu retten?
Was ist eine Tabelle:
Tabelle ist auch eine HTML-Tabelle, der Datenträger.
Das Folgende ist eine relativ standardmäßige Methode zum Schreiben von Tabellencode:
Kopieren Sie den Code
Der Code ist wie folgt:
;th>Monat
Datum
18< /td>
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 das table-layout:fixed-Attribut erwähnen
Tabellenlayout: automatisch (Standard) |.
Parameter:
auto: Der standardmäßige automatische 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.
Zeilenumbrüche für schwierige Tabellenprobleme
Die Verwendung von Tabellen zur Anzeige von Daten bereitet manchmal Kopfschmerzen, d. h. die Anzeige eines bestimmten Textes ohne Zeilenumbrüche, insbesondere in der Kopfzeile, die am häufigsten verwendet wird. Tatsächlich ist das Problem, das Sie haben, nicht der Zeilenumbruch, aber die Browserkompatibilität dahinter macht den Zeilenumbruch viel schwieriger. Hier können Sie den Artikel Anleitung zum Erzwingen von Zeilenumbrüchen und zum Erzwingen von Zeilenumbrüchen lesen, um sich inspirieren zu lassen. Der Artikel beschreibt ausführlich, wie Zeilenumbrüche in verschiedenen Situationen gelöst werden können.
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.
Ein paar gängige, aber unbekannte Tabellen-Tags
Kopf, Fuß und Körper
Diese drei Tags sind ein Produkt des sogenannten xhtml und geben Ihnen hauptsächlich 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 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:
Kopieren Sie den Code
Der Code ist wie folgt:
;tr>
Monat
Monatslisten
🎜>
AUG
/tbody> < ;/table>
Ich persönlich finde, dass dieses Ding 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
Diese beiden Tags sind ebenfalls XHTML-Produkte mit leistungsstarken Funktionen und äußerst schlechter Kompatibilität.
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 wird die Tabelle verwendet?
Ich persönlich denke, dass in einem Container, in dem die Daten sehr dicht und sehr serialisiert sind, eine Tabelle die richtige Wahl ist. 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. Das Obige ist eine Überprüfung allgemeiner Tabellenwissenspunkte sowie eine Analyse und Sortierung mehrerer häufig verwendeter Orte. Ich hoffe, dass Sie nach dem Lesen dieses Artikels in der Lage sein werden, Tabellen mit der richtigen Einstellung anzuzeigen und zu verwenden. Ich hoffe, dieser Artikel kann Sie ein wenig retten, mein Tisch. Danke.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
