Heim Web-Frontend CSS-Tutorial Wie füge ich einer CSS-Tabelle einen Rahmenstil hinzu? Zusammenfassung der CSS-Tabellenrahmenstile (mit vollständigen Beispielen)

Wie füge ich einer CSS-Tabelle einen Rahmenstil hinzu? Zusammenfassung der CSS-Tabellenrahmenstile (mit vollständigen Beispielen)

Sep 07, 2018 pm 01:38 PM
border-style css

In diesem Artikel geht es hauptsächlich um das Hinzufügen von Rahmenstilen zu CSS-Tabellen. Außerdem gibt es eine Zusammenfassung der CSS-Tabellenrahmenstile und ein vollständiges Beispiel für CSS-Tabellenränder. Schauen wir uns als Nächstes gemeinsam diesen Artikel an

Werfen wir zunächst einen Blick darauf, wie man mithilfe von CSS Rahmen zu Tabellen hinzufügt:

Denken Sie daran, dass wir lernen HTML-Tabellen Ich habe auch gelernt, das Rahmenattribut zu verwenden, um Rahmen zu Tabellen hinzuzufügen. Schauen wir uns nun an, wie Rahmen in CSS-Stilen verwendet werden:

Nehmen wir an Sehen Sie sich das Hinzufügen von Randattributen an: Border-Style-Attribut . Schauen wir uns nun ein vollständiges Beispiel an:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
table,td{border-style:dotted}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
</html>

Kennen Sie die Wirkung des obigen Codes? Werfen wir einen Blick auf die Wirkung:

Wie füge ich einer CSS-Tabelle einen Rahmenstil hinzu? Zusammenfassung der CSS-Tabellenrahmenstile (mit vollständigen Beispielen)

Jeder sollte es nach dem Betrachten des Wirkungsbildes verstehen können. Hier müssen wir noch die Verwendung erklären Code:

border-style: Definiert den Tabellenrand (den Rand der Tabellentabelle, wenn Sie table{} verwenden, gibt es nicht so viele Zeilen, nur die Randlinien werden angezeigt, und Die Linien in der Mitte werden nicht angezeigt, daher habe ich hier das td-Tag hinzugefügt, damit auch Linien darin angezeigt werden)

  • dotted: Das dotted-Attribut definiert einen gepunkteten Rand, also es sieht so aus. Mehr Punkte. (Natürlich gibt es noch andere Attribute, die auch Ränder anzeigen, werfen wir einen Blick darauf)

  • solid: Das Solid-Attribut definiert einen soliden Rahmen

  • double: Das Attribut „double“ definiert einen Rahmen mit zwei Linien

  • dashed: Das Attribut „dashed“ definiert einen Rahmen mit gepunkteten Linien

Jeder sollte dazu in der Lage sein Um es nach dem Lesen zu verstehen, stelle ich nur eine Art von gepunkteten Rändern sowie doppelte und gepunktete Ränder vor. Sie können sie auch einzeln ausprobieren, und es wird offensichtlich sein.

Jetzt reden wir weiter über Randstile. Natürlich gibt es mehrere Stile, sonst wie soll man es zusammenfassen:

  • Grenze-. Attribut „spaced“ Legt den Abstand zwischen den Rändern benachbarter Zellen fest

  • caption-side-Attribut, um die Position des Tabellentitels festzulegen

Heute werden wir es tun Einführung von zwei Attributen und dem oben genannten Border-Style-Attribut. Es gibt genau drei Typen. (Empfohlene Spalte CSS-Lernhandbuch der PHP-chinesischen Website, um mehr über den CSS-Stil zu erfahren)

Schauen Sie sich zunächst das Attribut „border-spacing“ an:

border Das Attribut -spacing legt den Abstand zwischen den Rändern benachbarter Zellen fest (horizontaler Längenabstand/vertikaler Längenabstand).

<style>
table,td{border-spacing:length}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>

Es ist dasselbe wie das obige Bild, aber es legt den vertikalen Abstand fest, sodass das, was wir sehen, möglicherweise nicht stimmt nicht das Gleiche, daher gibt es hier kein Rendering. Schließlich gibt es ein Attribut auf der Beschriftungsseite. Dies ist die Position, an der der Tabellentitel festgelegt werden kann. Das ist in Ordnung.

Es ist also sehr praktisch, diese Attribute zu haben. Okay, wir werden das folgende Wissen später vorstellen.

Der heutige Artikel über die Zusammenfassung des Hinzufügens von Rahmenstilen zu CSS-Tabellen endet hier (wenn Sie mehr über CSS-Stile erfahren möchten, besuchen Sie die chinesische PHP-Website CSS-Lernhandbuch Spaltenstudie), Schüler, die Fragen haben, können unten eine Nachricht hinterlassen, um Fragen zu stellen

[Empfehlung des Herausgebers]

Wie verwende ich CSS, um die Hintergrundfarbe von Text festzulegen? Ausführliche Erklärung der CSS-Einstellung des Hintergrundfarbcodes

Wie lege ich eine ungeordnete Liste in CSS fest? Zusammenfassung der CSS-Listenstile

Das obige ist der detaillierte Inhalt vonWie füge ich einer CSS-Tabelle einen Rahmenstil hinzu? Zusammenfassung der CSS-Tabellenrahmenstile (mit vollständigen Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Integration von CSS und JavaScript effektiv in die HTML5 -Struktur. Integration von CSS und JavaScript effektiv in die HTML5 -Struktur. Jul 12, 2025 am 03:01 AM

HTML5, CSS und JavaScript sollten effizient mit semantischen Tags, angemessenen Ladereihenfolge und Entkopplungsdesign kombiniert werden. 1. Verwenden Sie HTML5-Semantik-Tags, wie z. B. die Verbesserung der strukturellen Klarheit und Wartbarkeit, was dem SEO und barrierefreien Zugang förderlich ist. 2. CSS sollte eingerichtet werden, externe Dateien verwenden und nach dem Modul aufgeteilt werden, um Inline -Stile und verzögerte Ladeprobleme zu vermeiden. 3. JavaScript wird empfohlen, voran vorzugehen, und verwenden Sie Defer oder Async, um asynchron zu laden, um das Blockieren des Renders zu vermeiden. 4. Reduzieren Sie die starke Abhängigkeit zwischen den drei, führen Sie das Verhalten durch Datenattribute und den Status der Klassennamen und verbessern Sie die Zusammenarbeit Effizienz durch einheitliche Benennungsspezifikationen. Diese Methoden können die Seitenleistung effektiv optimieren und mit Teams zusammenarbeiten.

Wie erstelle ich reaktionsschnelle Bilder mit CSS? Wie erstelle ich reaktionsschnelle Bilder mit CSS? Jul 15, 2025 am 01:10 AM

Um reaktionsschnelle Bilder mit CSS zu erstellen, kann es hauptsächlich durch die folgenden Methoden erreicht werden: 1. Verwenden Sie maximale Breite: 100% und Höhe: Auto, damit das Bild an die Containerbreite anpasst und gleichzeitig den Anteil beibehält. 2. Verwenden Sie die SRCSet- und Größenattribute von HTML, um die an verschiedenen Bildschirme angepassten Bildquellen intelligent zu laden. 3.. Verwenden Sie Objektfit und Objektposition, um die Bildaufbindung und Fokusanzeige zu steuern. Gemeinsam stellen diese Methoden sicher, dass die Bilder auf verschiedenen Geräten klar und wunderschön präsentiert werden.

Beschreiben Sie das Eigentum 'Opazität' Beschreiben Sie das Eigentum 'Opazität' Jul 15, 2025 am 01:23 AM

Opazität ist ein Attribut in CSS, das die Gesamttransparenz eines Elements steuert, wobei die Werte von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) reichen. 1. Es wird häufig für den Image -Schwebeverlusteffekt verwendet und verbessert die interaktive Erfahrung, indem der Übergang der Deckkraft festgelegt wird. 2.. Erstellen einer Hintergrundmaskenschicht, um die Textlesbarkeit zu verbessern; 3.. Visuelle Feedback von Steuertasten oder Symbolen im behinderten Zustand. Beachten Sie, dass es im Gegensatz zu RGBA, was nur den angegebenen Farbteil betrifft, alle Kinderelemente betrifft. Eine reibungslose Animation kann durch den Übergang erreicht werden, aber häufiger Gebrauch kann die Leistung beeinflussen. Es wird empfohlen, es in Kombination mit dem Willenswechsel oder der Transformation zu verwenden. Die rationale Anwendung der Opazität kann die Seitenhierarchie und die Interaktivität verbessern, sollte jedoch vermeiden, dass sie die Benutzer beeinträchtigen.

Erklären Sie die Vererbung des Eigentums in CSS Erklären Sie die Vererbung des Eigentums in CSS Jul 15, 2025 am 01:25 AM

INCSS, PropertyInheritanceCeffectshowStylesArepased von der Austriebungstochildren.

Beschreiben Sie das `: Has ()` Pseudoklasse (übergeordnete Selektor) Beschreiben Sie das `: Has ()` Pseudoklasse (übergeordnete Selektor) Jul 15, 2025 am 12:32 AM

Die: Has () Pseudo-ClassincsSallowStargetingaparentelementBasedonitschildelemente

Wie man die Auswahl hervorhebt (`:: selection`)? Wie man die Auswahl hervorhebt (`:: selection`)? Jul 16, 2025 am 12:50 AM

Verwenden Sie die :: Auswahlpseudoelement von CSS, um den Hervorhebungsstil anzupassen, wenn der Webseitentext ausgewählt wird, um die Ästhetik und Einheit der Seite zu verbessern. 1. Grundeinstellungen: Definieren Sie die Hintergrundfarbe und Farbe durch :: Auswahl, z. B. gelbe Hintergrund mit dunkelgrauen Schriftarten; Spezifische Elemente wie P :: Auswahl können ebenfalls begrenzt sein. 2. Kompatibilitätsverarbeitung: Fügen Sie das Präfix -Webkit hinzu, um mit Safari und mobilen Browsern kompatibel zu sein, und die Firefox- und Kantenstandards werden gut unterstützt. 3. Achten Sie auf die Lesbarkeit: Vermeiden Sie übermäßigen Farbkontrast oder zu ausgefallen und sollten mit dem Gesamtdesign koordiniert werden. Wählen Sie beispielsweise eine weiche blaue Basis im dunklen Modus, um den visuellen Komfort zu verbessern. Angemessene Verwendung kann die Textur der Schnittstelle verbessern, Details ignorieren

Beschreiben Sie die Eigenschaft im Listenstil Beschreiben Sie die Eigenschaft im Listenstil Jul 15, 2025 am 12:06 AM

Listenstil ist das Abkürzungsattribut in CSS zur Steuerung des Vormarkierstils von Listenelementen. 1. Sie können gleichzeitig den Typ-Typ-Typ und das Listen-Stil einstellen. 2. Standardmäßig verwenden ungeordnete Listen Disc -Stile und bestellte Listen verwenden numerische Nummern. 3. Support Einstelltypen, Positionen und Bilder und geben Sie Sicherungsstile an, um mit Image -Ladefehlern umzugehen. 4. In der tatsächlichen Entwicklung werden die Standardstile häufig gelöscht, um Konsistenz zu gewährleisten und auf Probleme mit dem Texteinschluss und den Problemen der Bildbelastung zu achten.

Beschreiben Sie die Eigenschaften von 'Wort-Break' und 'Word-Wrap' Beschreiben Sie die Eigenschaften von 'Wort-Break' und 'Word-Wrap' Jul 16, 2025 am 02:08 AM

Wortausbruch und Überlauf-Wrap (ehemals Word-Wrap), wenn es sich um lange Wörter oder unzerbrechlichen Inhalte handelt. 1. Wortbrech kontrolliert, wie man Wörterlinien in Blockelementen durchbricht, brechen alle langen Wörter auf, um zu brechen. 2. Überlaufschreiber trennen Sie lange Wörter, wenn nötig, um Überlauf zu verhindern, und das Break-Wort macht den Kontext intelligenter. 3. Verwenden Sie in den Nutzungsszenarien Word-Break: Break-All für Code und verwenden Sie Überlaufwerk: Break-Wort für Benutzerkommentare. 4. Achten Sie auf Unterschiede in der Browserkompatibilität und unterschiedlichen mobilen Verhaltens

See all articles