Tabellenformatierung

HTML-Tabelle: eingehendes Verständnis von Komplexität und Stilen

In diesem Artikel wird die Komplexität von HTML -Tabellen und deren Anwendung von CSS -Stilen eingehend erörtert. HTML -Tabellen enthalten Elemente wie Titel, Zeilengruppe und Spaltengruppe, und die Rendernreihenfolge lautet: Tabelle, Spaltengruppe, Spalte, Zeilengruppe, Zeilengruppe und Zellen. Das HTML -Tabellenmodell ist im Verhalten zentriert und in den Zeilen der Zellstruktur enthalten.

Tabellenformatierungsobjekt

CSS liefert zehn Tabellen-bezogene display -attributwerte für die Steuerung von Tabellenstilen. Diese Werte können auch auf andere Elemente angewendet werden, aber anonyme tabelbezogene Elemente müssen möglicherweise generiert werden, um korrekt zu rendern.

Die Breite der Tabelle und ihrer Spalten wird durch zwei Algorithmen bestimmt: den Layout -Algorithmus für feste Tabellen und den automatischen Tabellenlayoutalgorithmus. Ersteres ist nicht vom Inhalt der Tabellenzelle beeinflusst, während letzteres jede Zelle in der Tabelle überprüfen muss, was für große Tabellen sehr zeitaufwändig sein kann.

CSS2 definiert zwei Modelle, die interne Tabellenobjektbordnungen rendern: separate Randmodelle und gefaltete Randmodelle. Das getrennte Grenzmodell ermöglicht es nur die Zellen und Tabellen, Grenzen zu haben, während das Kollaps -Randmodell die Grenzen von Zeilen, Zeilengruppen, Spalten, Säulengruppen und Tabellen selbst ermöglicht, sich auf komplexe Weise zu überlappen.

separate Render -Rendering

gefaltete Renderwiedergabe

Eigenschaften von Spalten und Spaltengruppenelementen

Nur wenige Eigenschaften können auf Elemente mit display Attributwert table-column oder table-column-group: Grenzattribut (nur im zusammengesetzten Grenzmodell), Hintergrundattribut (Zellen und Zeilen haben transparente Hintergrund) angewendet werden und Sichtbarkeitsattributwert collapse (andere Sichtbarkeitswerte werden ignoriert).

Tabellenbreite Algorithmus

Im Gegensatz zu anderen Block-Level-Boxen werden Tabellen mit einer Breite auf auto und horizontalen Rändern von Null ihre enthaltenden Blöcke nicht gefüllt. Die Tabellengröße wird durch ihren Inhalt bestimmt. Sie können margin-left und margin-right verwenden, um die Tabelle horizontal zu zentrieren. auto

Es gibt zwei Algorithmen zur Bestimmung der Breite der Tabellenspalte: den Layout -Algorithmus mit fester Tabellen und den durch das

-attribut angegebenen automatischen Tabellenlayoutalgorithmus (die Werte sind table-layout bzw. fixed, bzw. auto, und der Anfangswert ist auto). Wenn die Tabellenbreite als auto angegeben ist, wird normalerweise ein automatischer Tabellenlayoutalgorithmus verwendet. Für Block-Ebenen-Tabellen (display auf table festgelegt) kann der Benutzeragent jedoch keinen Layout-Algorithmus für feste Tabellen verwenden.

Im Layout -Algorithmus mit festen Tabellen wird die Breite der Spalten und Tabellen nicht durch den Gehalt der Tabellenzellen beeinflusst. Die Breite jeder Spalte wird wie folgt bestimmt:

Die Breite des Spaltenobjekts mit
• wird nicht auf die Breite der Spalte eingestellt. auto Die Breite der ersten Zellzelle mit einer Breite, nicht
, legt die Breite der Spalte fest, zu der sie gehört. Wenn die Zellen mehrere Säulen umfassen, ist die Breite gleichmäßig auf diese Säulen verteilt.
• auto verbleibende Spalten wenden gleichmäßig den verbleibenden horizontalen Raum (abzüglich eines Rand- oder Zellabstands).
Tabellenbreite ist der größere Wert im Attributwert der Tabellenbreite und der Summe der Spaltenbreiten (plus Rand- oder Zellabstand). Wenn die Tabelle breiter als die Spalte ist, wird der Spalte zusätzlicher Speicherplatz zugewiesen.

weglassen keine Zellen!

Da die erste Zeilenzelle verwendet wird, um die Säulenbreite zu bestimmen, sollten ein fester Tabellenlayoutalgorithmus verwendet werden, sondern keine Zellen aus der ersten Zeile weggelassen werden. Das Verhalten in diesem Fall ist in der CSS2.1 -Spezifikation nicht definiert.

automatische Tabellenlayoutalgorithmen erfordern normalerweise mehrere Travers. Die CSS2.1 -Spezifikation deutet auf einen Algorithmus zur Bestimmung der Spaltenbreiten hin, die Benutzeragenten müssen ihn jedoch nicht verwenden. Der Algorithmus prüft jede Zelle in der gesamten Tabelle und berechnet die minimalen und maximalen Breiten, die erforderlich sind, um jede Zelle zu rendern. Diese Werte werden dann verwendet, um die Breite jeder Spalte zu bestimmen, die wiederum die Breite der Tabelle selbst bestimmen kann.

Da jede Zelle überprüft werden muss, kann der automatische Tabellenlayoutalgorithmus für Tabellen mit einer großen Anzahl von Zeilen und/oder Spalten sehr zeitaufwändig sein.

Tabellenhöhe Algorithmus

Wenn der Wert des Attributs der Tabellenhöhe nicht

ist und die angegebene Höhe von der Zeilenhöhesumme (plus Rand- oder Zellabstand) unterscheidet, ist das Verhalten undefiniert. Der prozentuale Wert des Höhenattributs von Zeilen, Reihengruppen und Zellen ist nicht definiert. Die

Eigenschaft jeder Zelle bestimmt, wie sie innerhalb der Zeile ausgerichtet ist. Nur auto, vertical-align, baseline und top sind zulässig. Für jeden anderen Wert wird bottom verwendet. middle baseline

Grenze des Tabellenobjekts

Es gibt zwei Modelle, die interne Tabellenobjekte in CSS2: das Trennungsgrenzemodell und das Kollaps -Randmodell rendern. Sie können das Attribut

verwenden, um seinen Wert auf

(Anfangswert) oder border-collapse festzulegen, um das bevorzugte Modell auszuwählen. separate collapse Im entkoppelten Grenzmodell können nur Zellen (und Tabelle selbst) Grenzen haben; Die Grenzen werden um die Zellen gezogen, getrennt durch die vertikalen und horizontalen Abstände, die durch das

-attribut angegeben sind. Im Raum zwischen Zellgrenzen sind die Hintergründe von Zeilen, Zeilengruppen, Spalten und Säulengruppen nicht sichtbar. Nur der Tischhintergrund ist im Zellabstand sichtbar.

Wenn die Eigenschaft border-spacing

auf

eingestellt ist, werden die Zellen nicht getrennt, und ihre Grenzen (und die Grenzen von Zeilen, Zeilengruppen, Spalten, Spaltengruppen und Tabelle selbst) werden in einem ziemlich komplizierten Zusammenbruch zusammengebrochen Weg (oder Überlappung). border-collapse Die Eigenschaften collapse

und

werden bei Verwendung des zusammengebrochenen Grenzmodells ignoriert. border-spacing empty-cells

(Folgendes ist der FAQ -Teil. Aufgrund von Platzbeschränkungen wird nur der Titel hier beibehalten. Bitte beachten Sie den Originaltext für den vollständigen Inhalt)

• grundlegende Formatierungsschritte für Tabellen
• wie man eine Tabelle reagiert
• wie man Tabellenzellen
verschmelzen
• So fügen Sie Grenzen zur Tabelle
hinzu
• So ändern Sie die Hintergrundfarbe einer Tabelle
• wie man Text in Tabelle
ausrichtet
• So fügen Sie einer Tabelle
einen Titel hinzu
• wie man die erste Zeile oder Spalte einer Tabelle auf unterschiedliche Weise stylen
• So fügen Sie einer Tabelle einen Schwebeeffekt hinzu
• wie man ein Formular zugänglicher macht

Das obige ist der detaillierte Inhalt vonTabellenformatierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!