Einführung in den Stil von HTML5-Tabellen-Tags (im Anhang finden Sie ein Beispiel für die CSS-Zentrierung von HTML5-Tabellen)
寻∝梦
Freigeben: 2018-08-21 14:19:47
Original
12703 Leute haben es durchsucht
Einführung in den Stil des HTML-Tabellen-Tags (ein Beispiel für die CSS-Zentrierung von HTML5-Tabellen ist beigefügt). In diesem Artikel erfahren Sie hauptsächlich die Definition des HTML5-Tabellen-Tags und die Einführung verschiedener Stile.
HTML 5
-Tag-Definition und Verwendung:
Innerhalb des
-Tags können Sie Tabellentitel, Tabellenzeilen, Tabellenspalten, Tabellenzellen und andere Tabellen platzieren.
align: horizontale Anordnung des Zelleninhalts : rechts links zentriert
valign: vertikale Anordnung des Zellinhalts: oben unten mittlere Grundlinie
colspan: die Anzahl der Spalten, die die Zelle umfassen kann
rowspan: die Anzahl der Spalten dass die Zelle Anzahl der Zeilen umfassen kann
rowspan=3 tr
nowrap: Gibt an, ob der Inhalt in der Zelle gefaltet werden soll
Eindeutige Stilattribute der Tabelle:
1. Randzusammenführung
Attribut: border-collapse
Wert:
1. Separat
Standardwert, separater Randmodus
2. Reduzieren
Randzusammenführungsmodus
2. Randrand
1. Funktion
Abstand zwischen benachbarten Zellrändern festlegen (ähnlich dem Zellabstand)
Attribute
Randabstand
Wert:
1. Nehmen Sie 1 Wert
bedeutet, dass der horizontale und vertikale Abstand gleich sind
2. Nehmen Sie 2 Werte
Der horizontaler Abstand, dargestellt durch einen Wert
Der vertikale Abstand, dargestellt durch den zweiten Wert
Die beiden Werte werden durch Leerzeichen getrennt
3 Anforderungen
Rahmenkollaps muss separat sein
muss im separaten Rahmenmodus gültig sein
3. Titelposition
Funktion: Ändern Sie die Titelposition von der Standardposition unter die Tabelle
Attribut: caption-side
Wert:
1. oben
Standard
2. unten
Der Titel befindet sich unter der Tabelle
Verwenden Sie div, um die Tabelle in CSS zu zentrieren:
Da ich sehe, dass mit display: table-cell ein Div in eine Zelle gerendert werden kann und der Inhalt in der Tabelle td vollständig zentriert ist, dachte ich an ein Div, das ein Div enthält, und das Div darin ist vermutlich vertikal zentriert Dies ist möglich. Verwenden Sie:
Stellen Sie das äußere Div auf display:table-cell ein, dann wird das Div im Inneren automatisch vertikal zentriert.
Nach dem Testen habe ich festgestellt, dass das Div im Inneren so ist nicht zentriert, also verwenden Sie Vertical-Align, um es zu zentrieren. Denn:
Nur wenn ein Element zur Inline- oder Inline-Block-Ebene (Tabellenzelle kann auch als Inline-Block-Ebene verstanden werden) gehört, wird die Vertical-Alignment-Ebene verwendet. Attribut darauf ausrichten wird funktionieren.
Zum Beispiel HTML-Steuerelemente wie Bilder, Schaltflächen, einzelne Kontrollkästchen, einzeilige/mehrzeilige Textfelder usw. Nur diese Elemente werden standardmäßig auf das Vertical-Alignment-Attribut wirksam.
Jetzt können Sie Vertical-Align:Middle in der Tabellenzelle verwenden, um den Inhalt vertikal zu zentrieren. text-algin: center, geeignet für Inline-Elemente, dann muss ich nur noch das div im Inneren auf line-block setzen
Das obige ist der detaillierte Inhalt vonEinführung in den Stil von HTML5-Tabellen-Tags (im Anhang finden Sie ein Beispiel für die CSS-Zentrierung von HTML5-Tabellen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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