Das Formatieren von Listen und Tabellen ist ein wesentlicher Bestandteil der Anzeige von Informationen auf Ihrer Website. CSS bietet Eigenschaften und Klassen zum Erstellen und Anpassen von Listen und Tabellen nach Ihren Wünschen. Hier finden Sie eine detaillierte Anleitung zum Formatieren von Listen und Tabellen in CSS.
Listen formatieren
Ungeordnete Liste(ul)
Haupteigenschaft: list-style-type.
Werte: none, disc, circle, square.
Beispiel:
ul {
list-style-type: disc;
}
Geordnete Liste(ol)
Haupteigenschaft: list-style-type.
Werte: keine(Standard), dezimal, unteres Alpha, oberes Alpha, unteres Roman, oberes Roman.
Beispiel:
ol {
list-style-type: decimal;
}
Definitionsliste(dl)
Haupteigenschaft: Es gibt keine spezifische CSS-Eigenschaft zum Formatieren von Definitionslisten. Sie können die Elemente in der Liste jedoch mithilfe von Klassen oder anderen Eigenschaften formatieren, z font-size, font-weight, margin, padding, etc.
Beispiel:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages</dd>
<dt>CSS</dt>
<dd>A styling language for web pages</dd>
</dl>
dt {
font-weight: bold;
}
Tabellen formatieren
Formatierung der Tabellenstruktur
Haupteigentum: border-collapse.
Werte: separate(default), collaps z.B.
Beispiel:
table {
border-collapse: collapse;
}
Formatierung des Tabellenrahmens
Haupteigentum: border.
Werte: Ein Randwert, zum Beispiel: 1px solid black.
Beispiel:
table {
border: 1px solid black;
}
Formatierung der Zellränder
Haupteigentum: border.
Werte: Ein Randwert, zum Beispiel: 1px solid black.
Beispiel:
td, th {
border: 1px solid black;
}
Ausrichtung und Abstand von Tabellenzellen
Haupteigenschaften: text-align, padding.
- text-align: Ausrichtungswerte, zum Beispiel:
left, right, center. - padding: Abstandswert innerhalb der Zellen, zum Beispiel: 10px.
Beispiel:
th {
text-align: center;
padding: 10px;
}
Hintergrund- und Textfarbe in Tabellen
Haupteigenschaften: background-color, color
background-color: Hintergrundfarbwert, zum Beispiel:lightgray.color: Textfarbwert, zum Beispiel:white.
Beispiel:
table {
background-color: lightgray;
color: white;
}
Spalten- und Zeilengröße in Tabellen
Haupteigenschaften: width, height.
width: Breitenwert, zum Beispiel: „100px“, „20 %“.height: Höhenwert, zum Beispiel: „50px“, „10 %“.
Beispiel:
th {
width: 100px;
height: 50px;
}
Dies ist eine umfassende Anleitung zum Formatieren von Listen und Tabellen in CSS. Sie können die Werte und Eigenschaften anpassen, um Listen- und Tabellenstile zu erstellen, die Ihren Designanforderungen auf Ihrer Website entsprechen.