La formattazione di elenchi e tabelle è una parte essenziale della visualizzazione delle informazioni sul tuo sito web. I CSS forniscono proprietà e classi per creare e personalizzare elenchi e tabelle a proprio piacimento. Ecco una guida dettagliata su come formattare liste e tabelle in CSS.
Liste di formattazione
Elenco non ordinato(ul)
Proprietà principale: list-style-type.
Valori: none, disc, circle, square.
Esempio:
ul {
list-style-type: disc;
}
Elenco ordinato(ol)
Proprietà principale: list-style-type.
Valori: nessuno(predefinito), decimale, minuscolo, maiuscolo, minuscolo, maiuscolo.
Esempio:
ol {
list-style-type: decimal;
}
Elenco delle definizioni(dl)
Proprietà principale: non esiste una proprietà CSS specifica per formattare gli elenchi di definizioni. Tuttavia, puoi applicare uno stile agli elementi all'interno dell'elenco utilizzando classi o altre proprietà come font-size, font-weight, margin, padding, etc.
Esempio:
<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;
}
Tabelle di formattazione
Formattazione della struttura della tabella
Proprietà principale: border-collapse.
Valori: separate(default), collaps e.
Esempio:
table {
border-collapse: collapse;
}
Formattazione del bordo della tabella
Proprietà principale: border.
Valori: un valore limite, ad esempio: 1px solid black.
Esempio:
table {
border: 1px solid black;
}
Formattazione del bordo della cella
Proprietà principale: border.
Valori: un valore limite, ad esempio: 1px solid black.
Esempio:
td, th {
border: 1px solid black;
}
Allineamento e spaziatura delle celle della tabella
Proprietà principali: text-align, padding.
- text-align: valori di allineamento, ad esempio:
left, right, center. - padding: valore di spaziatura all'interno delle celle, ad esempio: 10px.
Esempio:
th {
text-align: center;
padding: 10px;
}
Sfondo e colore del testo nelle tabelle
Proprietà principali: background-color, color
background-color: valore del colore di sfondo, ad esempio:lightgray.color: valore del colore del testo, ad esempio:white.
Esempio:
table {
background-color: lightgray;
color: white;
}
Dimensione colonne e righe nelle tabelle
Proprietà principali: width, height.
width: valore di larghezza, ad esempio: "100px", "20%".height: valore di altezza, ad esempio: "50px", "10%".
Esempio:
th {
width: 100px;
height: 50px;
}
Questa è una guida completa su come formattare elenchi e tabelle in CSS. Puoi personalizzare i valori e le proprietà per creare stili di elenchi e tabelle che soddisfino le tue esigenze di progettazione sul tuo sito web.