Tutorial zur HTML-Tabellenauszeichnung (48): CSS-modifizierte Tabelle
|
<br />Sehen wir uns nun an, wie Sie die CSS-Syntax geschickt einsetzen können, um Tabellen zu verschönern. Hinweis: Sofern nicht anders angegeben, betragen die Werte für Zellenabstand, Zellenpolster und Rahmen der in den Beispielen dieses Artikels eingefügten Tabellen alle 0. Beispiel 1: 1px-Tabelle Viele Leute legen Wert darauf, 1px-Tabellen zu erstellen, und haben sich daher verschiedene Methoden ausgedacht. Die Verwendung von CSS ist wesentlich flexibler. Wenn Sie eine 1x1 1px-Tabelle erstellen möchten, definieren Sie einfach den Rahmenwert. Wir verwenden zunächst Dreamweaver, um eine 1x1-Tabelle mit einer Breite von 50 einzufügen, und definieren dann border:1 solid teal in der Tabelle oder td der Tabelle. Die Auswirkung der Tabelle ist wie folgt: Das Erstellen einer anderen Tabelle als 1 x 1 (z. B. 2 x 2) ist jedoch etwas umständlicher, da der Anzeigeeffekt wie folgt ist, wenn Sie den TD-Stil „border:1 solid teal“ direkt definieren: Sie werden feststellen, dass der äußere Rahmen der Tabelle 1 Pixel groß ist, während der innere Rahmen 2 Pixel groß ist. Dies liegt an der Überlagerung. Um dieses Problem zu lösen, können wir Folgendes tun: Definieren Sie zunächst den Stil für td: border:#cc0000 solid;border-width:0 1 1 0 , so dass die Tabelle wie folgt aussieht Definieren Sie dann den Stil für die Tabelle: border:#cc0000 solid;border-width:1 0 0 1 , sodass Sie eine vollständige 1px-Tabelle erstellen können. Beispiel 2: 1px-Tabelle mit dickem Rand Das innere Raster dieser Tabelle ist 1 Pixel groß und der äußere Rand 3 Pixel. Basierend auf Beispiel 1 ist es nicht schwer, dies zu tun. Sie müssen lediglich den Wert für die Rahmenbreite ändern. Der für die Tabelle verwendete Stilcode lautet: border:blue solid;border-width:3 2 2 3 , und der für td verwendete Stilcode lautet: border:blue solid;border-width:0 1 1 0 Beispiel 3: Gestrichelte Boxtabelle Die Methode ist ähnlich wie in Beispiel 1, allerdings wird die Rahmenform von durchgezogen auf gestrichelt geändert. Der für die Tabelle verwendete Stilcode lautet: border:black dashed;border-width:1 0 0 1 , und der für td verwendete Stilcode lautet: border:black dashed;border-width:0 1 1 0 Beispiel 4: Tabelle mit gepunktetem Rahmen Beachten Sie, dass die Mindestpixelgröße für gepunktete Linien 2 beträgt. Der für die Tabelle verwendete Stilcode lautet: border:green dotted; border-width:2 0 0 2 , und der für td verwendete Stilcode lautet: border:green dotted; border-width:0 2 2 0 Beispiel 5: Tabelle mit zweizeiligem Rahmen Beachten Sie, dass die Mindestpixelgröße für eine Doppellinie 3 beträgt. Der für table verwendete Stilcode lautet: border:teal 4 double und der für td verwendete Stilcode lautet: border:teal 1 solid Beispiel 6: Outset table Der für table verwendete Stilcode ist: border: 3 outset , und der für td verwendete Stilcode ist: border: 1 solid Beispiel 7: Inset-Rahmentabelle Der für table verwendete Stilcode ist: border: 3 inset , und der für td verwendete Stilcode ist: border: 1 solid Beispiel 8: Ridge-Frame-Tabelle Der für die Tabelle verwendete Stilcode lautet: border:#ee0000 3 ridge Der für td verwendete Stilcode lautet: border: 1 solid Vorherige Seite 1 2 3 Nächste Seite Mehr lesen |
<<: Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells
>>: Detaillierte Erklärung der Truncate-Verwendung in MySQL
Artikel empfehlen
So generieren Sie PDFs und laden sie im Vue-Frontend herunter
Inhaltsverzeichnis 1. Installation und Einführung...
React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)
In diesem Artikel wird der spezifische Code von R...
Analyse der Anweisungsausführungsreihenfolge von SQL und MySQL
Ich bin heute auf ein Problem gestoßen: Kann ich ...
Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt
Bei der Replikation werden die DDL- und DML-Opera...
Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung
Vererbung von Prototypketten Die Prototypenvererb...
Lösen Sie das Problem des 8-Stunden-Unterschieds zwischen Docker-Container und Host-Computer
Bei der Verwendung von Docker-Compose für die Ber...
SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank
Datenbank für Online-Einkaufszentren - Produktkat...
50 superpraktische Tools für Webdesigner
Webdesigner zu sein ist nicht einfach. Sie müssen...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten
Vorwort: Die verteilte Master-Slave-Architektur v...
Erfahren Sie, wie Sie die neue Element-Traversal-Eigenschaft von JavaScript zum Durchlaufen von untergeordneten Elementen verwenden.
Inhaltsverzeichnis 1. ChildNodes-Attributdurchlau...
Natives JS zur Implementierung des Flugzeug-Kriegsspiels
In diesem Artikelbeispiel wird der spezifische JS...
Flammenanimation mit CSS3 umgesetzt
Ergebnisse erzielen Implementierungscode html <...
Webpack lädt CSS-Dateien und ihre Konfigurationsmethode
webpack lädt CSS-Dateien und deren Konfiguration ...
Verwenden von vue3 zum Implementieren eines Beispiels für die Kapselung von Zählfunktionskomponenten
Inhaltsverzeichnis Vorwort 1. Die Bedeutung der K...