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
Detaillierte Erläuterung der Konfigurationsstrategie für Linux-Umgebungsvariablen
Beim Anpassen der Softwareinstallation müssen Sie...
Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux
Problembeschreibung Im aktuellen Hintergrunddiens...
So entwickeln Sie Java 8 Spring Boot-Anwendungen in Docker
In diesem Artikel zeige ich Ihnen, wie Sie mit Ja...
So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver
Generieren einer Zertifikatskette Verwenden Sie d...
Die Scroll-Ansicht des WeChat-Applets realisiert einen Links-Rechts-Verknüpfungseffekt
Das WeChat-Applet verwendet die Scroll-Ansicht, u...
CSS3 verwendet var()- und calc()-Funktionen, um Animationseffekte zu erzielen
Wissenspunkte in der Vorschau anzeigen. Animation...
JavaScript, um einen einheitlichen Animationseffekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)
Ich habe mein Blog seit mehreren Tagen nicht aktu...
CSS zum Erzielen des klebrigen Effekts von zwei sich kreuzenden Bällen – Beispielcode
Dies ist ein Effekt, der ausschließlich mit CSS e...
Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs
Wie unten dargestellt: Ersetzen Sie es einfach, w...
JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode
Mit der Array-Deduplizierung wird man häufig bei ...
Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker
Text 1) Laden Sie das Ubuntu-Image herunter Docke...
Node+Socket realisiert einfache Chatroom-Funktion
In diesem Artikel wird der spezifische Code von N...
Verwenden Sie CSS, um ein Datei-Upload-Muster zu zeichnen
Wenn Sie es wären, wie würden Sie es erreichen, w...
Online-Webtools und -anwendungen, auf die Webentwickler und -designer nicht verzichten können
Sie erinnern sich vielleicht, dass wir in den ver...