Wie man Table mit CSS stymt
| Name | Kurs | Markierungen |
|---|---|---|
| Wilhelm | Networking | 89 |
| Jack | Einführung in c++ | 97 |
| Joseph | Einführung in Java | 77 |
Um eine Tabelle in HTML zu erstellen, werden folgende HTML -Elemente verwendet:
- “
Element wird verwendet, um eine Tabelle in HTML zu erstellen.
- “Element wird verwendet, um der Tabelle eine Bildunterschrift hinzuzufügen.
- “”Wird verwendet, um den Header der Tabelle anzugeben, der normalerweise die Überschriften enthält.
- “
”Wird für die Hinzufügen von Zeile verwendet. - “
”Geben Sie den Übergangsinhalt an. - “Gibt den Körperteil der Tabelle an.
Die erstellte Tabelle sieht derzeit so aus:
Lassen Sie uns vorwärts gehen, um zu sehen, wie dieser Tisch stylen kann.
Schritt 2: Stil „Körper“ Element
Körper
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
Hintergrundfarbe: RGB (233, 233, 233);
Das Element wird mit den folgenden CSS -Styling -Eigenschaften angewendet:
- “Schriftfamilie”Eigenschaft mit dem Wert“Verdana, Genf, Tahoma, Sans-Serif”Wird verwendet, um die Schriftart anzuwenden, die vom Browser unterstützt wird. Wenn der Browser den ersten Schriftartenstil nicht unterstützt, wird der andere verwendet.
- “HintergrundfarbeDie Eigenschaft legt die Hintergrundfarbe des Elements fest.
Schritt 3: Stil „Bildunterschrift“ Element
Untertitel
Schriftgröße: 25px;
Text-Align: Mitte;
Hintergrundfarbe: #1C6758;
Farbe: Cornsilk;
Das Element wird wie folgt gestylt:
- “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße verwendet.
- “TextausrichtungEigenschaft gibt die Ausrichtung des Textes des Elements an.
- “FarbeEigenschaft bezieht sich auf die Schriftfarbe des Elements.
Hier ist die Ausgabe des oben bereitgestellten Codes:
Schritt 4: Rand zur Tabelle hinzufügen
Der "GrenzeImmobilien werden verwendet, um das Element um einen Rand hinzuzufügen. Es ist ein Kurzeigeneignis, das die Grenzbreite, den Grenzstil und die Grenzfarbe angibt.Wenden wir die Grenze zusammen mit der Polsterung und den Rand auf die Tabelle an:
Tabelle, th, td
Grenze: 2px Solid #1C6758;
Polsterung: 1PX 6PX;
Rand: Auto;
Hier:
- “GrenzeDas Eigentum passt den Rand um den Tisch an, indem Sie die Randbreite, den Grenzstil und die Grenzfarbe angeben.
- “PolsterungGibt den Platz um den Inhalt des Elements an, bei dem der erste Wert Platz am Top-Bottom definiert und der zweite Wert auf den rechts links den Inhalt Platz hinzufügt.
- “Rand”Eigenschaft mit dem Wert“Auto”Fügt den gleichen Raum um das Element um.
Ausgang
Notiz: Wenn wir die Räume zwischen den Tischgrenzen nicht wollen, verwenden Sie die Rand-Kollapse-Eigenschaft.
Schritt 5: Kollabieren Sie den Grenzabstand aus der Tabelle
Grenzkollapse: Zusammenbruch;
Die Räume zwischen den Tischgrenzen können durch die Verwendung der “entfernt werdenGrenzkollapse”Eigenschaft mit dem Wert„ Zusammenbruch “:Schritt 6: Passen Sie die Tabellengröße an
th
Lassen Sie uns sehen, wie Sie die Tischgröße anpassen:
Breite: 160px;
Die hinzugefügte “BreiteEigentum mit dem
Das Element wird die Tabellengröße automatisch danach anpassen :: Wir können auch Stile auf die spezifische Tabellenzelle anwenden. Lassen Sie uns sie diskutieren!
Schritt 7: Stilspezifische Tabellenzellen
Geben Sie den Klassennamen dieser bestimmten Zelle an, um die spezifische Tabellenzelle zu stylen. Zum Beispiel stellt der folgende Code dar, dass der dritten Zelle der zweiten Zeile ein Klassenname zugewiesen wird “Markieren”:99 Greifen Sie nun mit dem Klassennamen in der CSS -Datei auf die Zelle zu:
.Markieren
Hintergrundfarbe: #0F90D5;
Der ".Markieren”Bezieht sich auf das Klassenhighlight der
Element. Dieses Element wird mit dem angewendetHintergrundfarbeEigenschaft, um die Farbe auf dem Hintergrund anzugeben. Wie wir sehen können, wird die angegebene Tabellenzelle erfolgreich gestaltet:
Schritt 8: Stellen Sie die Schriftfamilie und die Größe der Tabelle fest
Tisch
Schriftfamilie: Kursiv;
Schriftgröße: 18px;
Text-Align: Mitte;
Die folgenden CSS -Eigenschaften werden auf das Tabellenelement angewendet:
- “SchriftfamilieEigenschaft legt den Schriftstil des Elements fest.
- “SchriftgrößeEigenschaft wird für die Einstellung der Schriftart des Elements verwendet.
- “TextausrichtungEigenschaft wird zur Anpassung der Textausrichtung verwendet.
Hier ist die Ausgabe:
Schritt 9: Farbreihen nacheinander
\
Es darf auch Stile auf bestimmte Zeilen oder Spalten anwenden. Zum Beispiel werden die gerade Zeilen durch Befolgen des folgenden Formats gestylt:
tbody tr: n-Kind (gleich)
Hintergrundfarbe: #ffb200;
Hier:
- Der ": n-Kind (sogar)Pseudo -Selektor wird verwendet, um ein Argument anzunehmen, das das Muster angibt, auf das das Styling angewendet werden soll.
- “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe des Elements festzulegen.
Es kann beobachtet werden, dass die Hintergrundfarbe erfolgreich auf die geraden Zeilen angewendet wird:
Das drehte sich nur um Styling -Tische mit CSS
Abschluss
Tabellen sind ein wichtiges Instrument, um die Daten organisiert zu halten. Die Tabelle kann mithilfe der HTML erstellt werden
,
, , und mehr Elemente. Mehrere CSS-Eigenschaften werden verwendet, um die Tabelle zu stylieren, z. Für ein besseres Verständnis hat diese Beschreibung eine schrittweise Prozedur erläutert, um eine Tabelle mit CSS zu stylen. - « Wie man einen älteren Verpflichtung in Git markiert?
- So beheben Sie -quash wird nur für Docker-Daemon mit experimentellen Funktionen unterstützt. Docker-Fehler »