Welche Eigenschaften hat die CSS-Einstellungstabelle?

CSS legt die Attribute der Tabelle fest: 1. Attribut „Rahmen ausblenden“, 2. Attribut „Rahmenabstand“; 5. Attribut „Leere Zellen“; -Layout-Eigenschaft.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Tabelle:

Eigenschaften	Beschreibung
border-collapse	Legen Sie fest, ob Tabellenränder zusammengeführt werden sollen Einzelner Rand.
border-spacing	Legen Sie den Abstand des Rahmens fest, der die Zellen trennt.
caption-side	Legen Sie die Position des Tabellentitels fest.
empty-cells	Legen Sie fest, ob leere Zellen in der Tabelle angezeigt werden sollen.
table-layout	Legen Sie den Algorithmus für die Anzeige von Zellen, Zeilen und Spalten fest.

1. Tabellenrand einklappen: border-collapse-Attribut

(1) Funktion: Legen Sie fest, ob der Rand der Tabelle zu einem einzigen Rahmen zusammengeführt wird oder wie in der Standard-HTML-Anzeige sie separat so;

(2) Zusätzlicher Wissenspunkt: Die Tabelle hat einen doppelten Linienrand. Dies liegt daran, dass die Elemente table, th und td unabhängige Ränder haben.

(3) Mögliche Werte:

Wert	Beschreibung
getrennt	Standardwert. Die Grenzen werden getrennt. Die Eigenschaften border-spacing und empty-cells werden nicht ignoriert.
collapse	Ränder werden nach Möglichkeit zu einem einzigen Rand zusammengeführt. Die Eigenschaften border-spacing und empty-cells werden ignoriert.
inherit	gibt an, dass der Wert des border-collapse-Attributs vom übergeordneten Element geerbt werden soll.

(4) Browser-Unterstützung: Alle gängigen Browser unterstützen das Border-Collapse-Attribut.

Ps: Muss !DOCTYPE angeben, sonst kann die Randreduzierung zu unerwarteten Ergebnissen führen.

2. Innenrand der Tabelle: Auffüllattribut

#Funktion: Legen Sie das Auffüllattribut für die Elemente td und th fest

3. Randtrennung: Randabstandsattribut

(1) Funktion: Dieses Attribut gibt den Abstand zwischen Zellgrenzen im getrennten Randmodell an. Diese Eigenschaft wird ignoriert, es sei denn, border-collapse ist auf „separat“ eingestellt. Obwohl diese Eigenschaft nur für Tabellen gilt, wird sie von allen Elementen in der Tabelle geerbt.

(2) Mögliche Werte:

Vorschriften Die Abstand zwischen den Rändern benachbarter Zellen. Verwenden Sie Einheiten wie px, cm usw. Negative Werte sind nicht zulässig. inherit gibt an, dass der Wert des border-spacing-Attributs vom übergeordneten Element geerbt werden soll. (3) Browserkompatibilität: Alle gängigen Browser außer IE unterstützen das Border-Spacing-Attribut. Internet Explorer 8 (und höher) unterstützt die Eigenschaft border-spacing, wenn !DOCTYPE angegeben ist.

Wert	Beschreibung
Länge Länge	Wenn Sie einen Längenparameter definieren, wird der horizontale und vertikale Abstand definiert. Wenn Sie zwei Länge -Parameter definieren, legt der erste den horizontalen Abstand fest, während der zweite den vertikalen Abstand festlegt.

4. Tabellentitel: caption-side-Attribut

(1) Funktion: Legt die Position des Tabellentitels relativ zum Tabellenrahmen fest. Der Tabellentitel wird angezeigt, als wäre er ein Element auf Blockebene vor (oder nach) der Tabelle.

(2) Mögliche Werte:

topStandardwert. Positionieren Sie den Tabellentitel über der Tabelle. bottom Positionieren Sie den Tabellentitel unterhalb der Tabelle. inherit gibt an, dass der Wert des titelseitigen Attributs vom übergeordneten Element geerbt werden soll.

(3) Browserkompatibilität: Alle gängigen Browser außer IE unterstützen das caption-side-Attribut. Internet Explorer 8 (und höher) unterstützt das caption-side-Attribut, wenn !DOCTYPE angegeben ist.

5. Behandlung leerer Zellen: empty-cells-Attribut

(1) Funktion: Dieses Attribut definiert, wie Tabellenzellen dargestellt werden, die keinen Inhalt enthalten. Falls angezeigt, werden die Ränder und der Hintergrund der Zelle gezeichnet. Diese Eigenschaft wird ignoriert, es sei denn, border-collapse ist auf „separat“ eingestellt.

(2) Mögliche Werte:

Wert	Beschreibung

Wert	Beschreibung
verstecken	ist nicht leer Zelle Zeichnen Sie einen Rahmen darum.
show	Zeichnen Sie einen Rahmen um leere Zellen. Standard.
inherit	gibt an, dass der Wert des Attributs „leere Zellen“ vom übergeordneten Element geerbt werden soll.

(3) Browserkompatibilität: Alle Browser außer IE unterstützen das Leerzellen-Attribut. Internet Explorer 8 (und höher) unterstützt das Attribut empty-cells, wenn !DOCTYPE angegeben ist.

6. Tabellenlayout-Algorithmus: Tabellenlayout-Attribut

(1) Funktion: Zur Anzeige der Algorithmusregeln für Tabellenzellen, -zeilen und -spalten . .

(2) Zwei Algorithmen:

<1>Festes Tabellenlayout: fest

#Vorteile: Ermöglichen Sie dem Browser, die Tabelle schneller zu gestalten (im festen Tabellenlayout das horizontale Layout). hängt nur von der Tabellenbreite, Spaltenbreite, Tabellenrandbreite und dem Zellenabstand ab und hat nichts mit dem Inhalt der Zelle zu tun. Durch die Verwendung eines festen Tabellenlayouts kann der Benutzeragent die Tabelle nach dem Empfang der ersten Zeile anzeigen. ;

      #Nachteile: Nicht sehr flexibel. 2 & lt; 2 & gt; Automatisches Tabellenlayout:

#Vorteile: Reflektiert eher das traditionelle HTML (im automatischen Tabellenlayout ist die Spaltenbreite am stärksten reduziert). Inhaltseinstellung. );

​​ #Nachteile: Der automatische Algorithmus ist langsamer, da er auf den gesamten Inhalt der Tabelle zugreifen muss, bevor er das endgültige Layout bestimmt.

(3) Mögliche Werte:

WertautomatischfestinheritCSS-Video-Tutorial)

Beschreibung
Standard. Die Spaltenbreite wird durch den Zelleninhalt festgelegt.
Die Spaltenbreite wird durch die Tabellenbreite und Spaltenbreite festgelegt.
gibt an, dass der Wert des Tabellenlayoutattributs vom übergeordneten Element geerbt werden soll.	(Lernvideo-Sharing:

Das obige ist der detaillierte Inhalt vonWelche Eigenschaften hat die CSS-Einstellungstabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!