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
Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container
Zuvor wurde unter https://www.jb51.net/article/20...
jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird
Schauen wir uns zunächst meinen Fehlercode an. ht...
Ein praktisches Tutorial zum schnellen Einfügen von zig Millionen Datensätzen in MySQL
1. Erstellen Sie eine Datenbank 2. Erstellen Sie ...
Detaillierte Erklärung der MySQL-Datengruppierung
Gruppe erstellen Die Gruppierung wird in der GROU...
Schritte zur Installation von MySQL 5.7.10 auf Windows Server 2008 R2
Installation mithilfe des MSI-Installationspakets...
Eine kurze Diskussion über den Linux-Signalmechanismus
Inhaltsverzeichnis 1. Signalliste 1.1. Echtzeitsi...
Die entsprechenden Attribute und Verwendung von XHTML-Tags in CSS
Als ich anfing, Webseiten mit XHTML CSS zu entwer...
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33
Problem: Die Partition, in der MySQL Datendateien...
Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers
Beim Konfigurieren unterschiedlicher Servlet-Pfad...
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
Inhaltsverzeichnis Vorwort: Was ist ein Wasserfal...
Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5
1. CSS3-Animation ☺CSS3-Animationen sind viel ein...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters
Die experimentelle Umgebung ist wie folgt Hier mü...
Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers
herunterladen http://nginx.org/en/download.html E...