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
Vue verwendet el-table, um Spalten und Zeilen dynamisch zusammenzuführen
In diesem Artikelbeispiel wird der spezifische Co...
Eine Zeile CSS-Code zur Integration von Avatar und Nationalflagge
Es ist Nationalfeiertag und jeder kann es kaum er...
Detaillierte Erläuterung der Umleitungskonfiguration und -praxis von Rewrite in Nginx
1: Verstehen Sie die Bedeutung von Adressumschrei...
Detaillierte Erläuterung der Lösung, um den Inhalt im Container im Flex-Layout zu halten
Auf der mobilen Seite ist das Flex-Layout sehr nü...
Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
Analyse der Protokolldateien im Tomcat-Protokollverzeichnis (Zusammenfassung)
Bei jedem Start von Tomcat werden die folgenden P...
Natives JS zum Erzielen digitaler Tisch-Spezialeffekte
Dieser Artikel beschreibt einen Digitaluhreffekt,...
Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration
Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...
Hinweise zum erweiterten Zeichengerätetreiber des Linux-Kernel-Gerätetreibers
/****************** * Erweiterter Zeichengerätetr...
Detailliertes Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.19 auf Windows Server 2016
Das Installations-Tutorial für die dekomprimierte...
Einführung in die Verwendung von MySQL-Quellbefehlen
Inhaltsverzeichnis Gedanken, die durch eine Onlin...
Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers
Verwenden Sie CSS, um den Stil der Bildlaufleiste...
Vier völlig unterschiedliche Erfahrungen im Interaktionsdesign der Apple Watch enthüllt
Heute geht es noch immer um das Design von Watch-...
Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO
Inhaltsverzeichnis 1.Bereitstellung der serversei...
Analyse der Prinzipien von Docker-Containern
Inhaltsverzeichnis 01 Was ist das Wesen eines Con...