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
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Vue3.0 implementiert die Kapselung des Dropdown-Menüs
Vue3.0 ist bereits seit einiger Zeit auf dem Mark...
Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern
In diesem Artikel wird ein Nachrichtenfeld mit Sp...
Docker erstellt Python Flask+ Nginx+Uwsgi-Container
Installieren Sie Nginx Ziehen Sie zuerst das Cent...
Beispiel zum Überprüfen der Kapazität einer MySQL-Datenbanktabelle
Dieser Artikel stellt die Befehlsanweisungen zum ...
Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels
In tatsächlichen Projekten gibt es Beziehungen zw...
Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers
Wenn Sie Ihr MySQL-Anmeldekennwort vergessen, ist...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel für die Bereitstellung eines Django-Projekts mit Docker
Es ist auch sehr einfach, Django-Projekte mit Doc...
Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen
Einführung Kennen Sie wirklich den Unterschied zw...
Details zur Verwendung des JSON-Typs in MySQL 5.7
JSON ist ein leichtes Datenaustauschformat, das e...
Natives JS zum Erstellen einer Drag-Fotowand
Dieser Artikel zeigt Ihnen eine verschiebbare Fot...
Detaillierte Erklärung der Lösung für CSS-Opazität untergeordneter Elemente, um die Transparenz übergeordneter Elemente zu übernehmen
Beim Schreiben der Projektseite stieß ich auf das...
Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue
1. Zuerst erstellen wir eine JSON-Datei zur inter...
Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen
1. Manchmal verwenden wir ES Aufgrund begrenzter ...