CSS-Set-Tabelle

CSS ist eine Stylesheet-Sprache, die HTML-Dokumenten Stil und Layout hinzufügen kann. In HTML sind Tabellen ein sehr häufiges Element, das zur Darstellung von Daten und Informationen verwendet werden kann. Verwenden Sie CSS für Stil, Layout und andere Aspekte von Tabellen. In diesem Artikel werden die Methoden und Techniken zum Festlegen von Tabellen mit CSS vorgestellt, um Ihnen bei der Verbesserung Ihres Webdesigns zu helfen.

Grundlegende Syntax der CSS-Einstellungstabelle

Die von CSS zum Festlegen einer Tabelle verwendeten Eigenschaften umfassen hauptsächlich Folgendes:

1. border: used Legen Sie den Rand der Tabelle fest. Sie können die Dicke, Farbe, Linienart und andere Eigenschaften des Rahmens festlegen. Zum Beispiel: Rahmen: 1 Pixel einfarbig schwarz;
2. Breite: Wird zum Festlegen der Breite der Tabelle verwendet. Sie können Einheiten wie Pixel (px) und Prozentsätze (%) verwenden. Zum Beispiel: width: 100%;
3. height: wird verwendet, um die Höhe der Tabelle festzulegen. Wie bei der Breite können Sie Einheiten wie Pixel und Prozentsätze verwenden. Zum Beispiel: height: 300px;
4. background-color: wird verwendet, um die Hintergrundfarbe der Tabelle festzulegen. Farben können über Farbnamen, hexadezimale Farbwerte, RGB-Farbwerte usw. angegeben werden. Zum Beispiel: Hintergrundfarbe: Weiß;
5. Farbe: Wird verwendet, um die Farbe des Textes in der Tabelle festzulegen. Farben können mithilfe von Farbnamen, hexadezimalen Farbwerten usw. angegeben werden. Zum Beispiel: Farbe: Schwarz;
6. text-align: wird verwendet, um die Ausrichtung des Textes in der Tabelle festzulegen. Sie können Attribute wie linke Ausrichtung (links), mittlere Ausrichtung (Mitte) und rechte Ausrichtung (rechts) festlegen. Zum Beispiel: text-align: center;
7. font-size: wird verwendet, um die Größe des Textes in der Tabelle festzulegen. Es können Einheiten wie Pixel und Prozentsätze verwendet werden. Beispiel: Schriftgröße: 12px;

Wenn Sie eine Tabelle mit CSS einrichten, müssen Sie nur den Stil der Tabelle und der Zellen im Stylesheet definieren und dann Klasse oder verwenden id im HTML-Dokument Verweisen Sie einfach auf den Stil. Hier sind einige gängige Tabellenlayout- und Stileinstellungsmethoden.

CSS-Einstellung des Tabellenrandstils

Der Rand der Tabelle ist die Grenze zwischen dem Inhaltsbereich und dem externen Bereich der Tabelle, daher kann das Festlegen des Randes dazu führen, dass Tisch übersichtlicher und ordentlicher. CSS bietet eine Vielzahl von Rahmenstilen, darunter durchgezogene Linien, gepunktete Linien, gepunktete Linien usw. So gestalten Sie einen Tischrand.

1. solider Rand

table {
border: 1px solid black;
}

#🎜 🎜 #Verwenden Sie den obigen Stilcode, um den Rand der Tabelle auf einen festen Rand festzulegen. Die Randbreite beträgt 1 Pixel. Wenn Sie einen oder mehrere der oberen, unteren, linken und rechten Ränder festlegen möchten, können Sie die Eigenschaften „border-top“, „border-bottom“, „border-left“ und „border-right“ verwenden, um die Position des Rahmens festzulegen.

gestrichelter Rand

Tabelle {

Rand: 1px gestrichelt schwarz;
}
#🎜🎜 #Verwenden Sie den obigen Stilcode, um den Rand der Tabelle auf einen gepunkteten Rand festzulegen. Die Randbreite beträgt 1 Pixel. Wenn Sie einen anderen gepunkteten Linientyp festlegen möchten, können Sie Attribute wie gepunktet oder doppelt verwenden.

gepunkteter Rand

3. Tabelle {

Rand: 1px gepunktet schwarz;

}
#🎜 🎜 #Verwenden Sie den obigen Stilcode, um den Rand der Tabelle auf einen gepunkteten Rand festzulegen. Die Randbreite beträgt 1 Pixel. Wenn Sie unterschiedliche Punkt- und Linientypen festlegen möchten, können Sie ebenfalls Attribute wie „gestrichelt“ oder „doppelt“ verwenden.

CSS-Einstellung der Tabellenbreite und -höhe

Beim Festlegen der Tabellenbreite und -höhe müssen wir die Anzahl und Länge des Inhalts in der Tabelle berücksichtigen. Wenn die Tabelle viel Inhalt enthält, müssen Sie die Breite und Höhe der Tabelle entsprechend vergrößern, um zu verhindern, dass sich der Inhalt überlappt oder überläuft. Hier finden Sie einige Möglichkeiten, die Tischbreite und -höhe festzulegen.

Prozent breite Verwenden Sie den obigen Stilcode, um die Breite der Tabelle auf 100 % festzulegen. Dadurch passt sich die Tabelle der Größe des Browserfensters an und nimmt die gesamte Bildschirmbreite ein. Wenn Sie eine feste Tabellenbreite wünschen, können Sie diese in Pixel festlegen.

1. Feste Breite und Höhe

Tabelle {
Breite: 500px;
Höhe: 300px;

}

Mit dem oben genannten Stilcode kann die Breite der Tabelle auf 500 Pixel und die Höhe auf 300 Pixel festgelegt werden. Auf diese Weise werden das Layout und der Stil der Tabelle nicht beeinträchtigt, selbst wenn die Tabelle viel Inhalt enthält. Wenn der Inhalt der Tabelle die eingestellte Breite oder Höhe überschreitet, fügt der Browser automatisch Bildlaufleisten hinzu, um die Anzeige des Inhalts sicherzustellen.

2. CSS zum Festlegen des Tabellenhintergrunds und des Textstils

Der Hintergrund und der Textstil der Tabelle können über CSS festgelegt werden, um ein besseres visuelles Erlebnis zu erzielen. Hier finden Sie einige Möglichkeiten, den Tabellenhintergrund und den Text zu gestalten.

Hintergrundfarbe festlegen

Tabelle {

Hintergrundfarbe: weiß;

}

#🎜 🎜#Verwenden Sie den obigen Stilcode, um die Hintergrundfarbe der Tabelle auf Weiß festzulegen. Wenn Sie andere Farben verwenden möchten, können Sie diese über Farbnamen, hexadezimale Farbwerte oder RGB-Farbwerte einstellen.

Textfarbe und -größe festlegen

Tabelle {

Farbe: schwarz;
Schriftgröße: 12px;# 🎜🎜#}

Verwenden Sie den obigen Stilcode, um die Textfarbe in der Tabelle auf Schwarz und die Schriftgröße auf 12 Pixel festzulegen. Wenn Sie eine andere Schriftart verwenden möchten, können Sie diese mithilfe der Eigenschaft „font-family“ festlegen.

Zusammenfassung

Mit der oben genannten Methode können Sie CSS verwenden, um den Stil, das Layout und das Format der Tabelle festzulegen. Diese Tipps und Methoden können Ihnen dabei helfen, attraktive und lesbare Tabellen zu erstellen und Ihr Webdesign ausgefeilter und professioneller zu gestalten. Probieren Sie diese Tipps aus, um Ihr Webdesign attraktiver zu gestalten!

Das obige ist der detaillierte Inhalt vonCSS-Set-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!