La mise en forme des listes et des tableaux est une partie essentielle de l'affichage des informations sur votre site Web. CSS fournit des propriétés et des classes pour créer et personnaliser des listes et des tableaux à votre guise. Voici un guide détaillé sur la façon de formater des listes et des tableaux en CSS.
Formatage des listes
Liste non ordonnée(ul)
Propriété principale: list-style-type.
Valeurs: none, disc, circle, square.
Exemple:
ul {
list-style-type: disc;
}
Liste ordonnée(ol)
Propriété principale: list-style-type.
Valeurs : aucune(par défaut), décimal, alpha inférieur, alpha supérieur, romain inférieur, romain supérieur.
Exemple:
ol {
list-style-type: decimal;
}
Liste de définition(dl)
Propriété principale: Il n'y a pas de propriété CSS spécifique pour formater les listes de définitions. Cependant, vous pouvez styliser les éléments de la liste à l'aide de classes ou d'autres propriétés telles que font-size, font-weight, margin, padding, etc.
Exemple:
<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;
}
Tableaux de mise en forme
Formatage de la structure du tableau
Propriété principale: border-collapse.
Valeurs : separate(default), collaps e.
Exemple:
table {
border-collapse: collapse;
}
Formatage des bordures de tableau
Propriété principale: border.
Valeurs : une valeur de bordure, par exemple : 1px solid black.
Exemple:
table {
border: 1px solid black;
}
Formatage des bordures de cellule
Propriété principale: border.
Valeurs : une valeur de bordure, par exemple : 1px solid black.
Exemple:
td, th {
border: 1px solid black;
}
Alignement et espacement des cellules du tableau
Propriétés principales: text-align, padding.
- text-align: valeurs d'alignement, par exemple:
left, right, center. - padding : valeur d'espacement dans les cellules, par exemple : 10px.
Exemple:
th {
text-align: center;
padding: 10px;
}
Couleur d'arrière-plan et de texte dans les tableaux
Propriétés principales : background-color, color
background-color: Valeur de la couleur de fond, par exemple:lightgray.color: Valeur de la couleur du texte, par exemple:white.
Exemple:
table {
background-color: lightgray;
color: white;
}
Taille des colonnes et des lignes dans les tableaux
Propriétés principales: width, height.
width: valeur de largeur, par exemple: "100px", "20%".height: valeur de hauteur, par exemple: "50px", "10%".
Exemple:
th {
width: 100px;
height: 50px;
}
Il s'agit d'un guide complet sur la façon de formater des listes et des tableaux en CSS. Vous pouvez personnaliser les valeurs et les propriétés pour créer des styles de liste et de tableau adaptés à vos besoins de conception sur votre site Web.