CSS, tableaux et listes à puces

Les tableaux

Nous avons vu comment faire un tableau en xhtml. Un tableau des plus rudimentaire qui va être grandement amélioré grâce au CSS.
Tout d'abord occupons nous du titre en travaillant sur la balise <caption>
Nous pouvons le centrer margin: auto
Nous pouvons le mettre au dessus en dessous a gauche a droite du tableau caption-side: top, ou bottom left ou encore right. Il est aussi nécessaire de décaler le bas du titre afin qu'il ne touche pas les bordures du tableau : margin: bottom.

Votre texte à l'intérieur de chaque cellule pourra être modifié avec font (comme vu précédemment), centré dans la cellule, en haut de la cellule nous ne reviendrons pas dessus.

Nous avons aussi vu comment créer des bordures.
Ce qui va changer pour les bordures d'un tableau est qu'elles devront être collés (si vous le désirez, naturellement.)
Il faudra alors renseigner la balise <table> l'attribut border-collapse: collapse.
Notez que par défaut, la valeur de border-collapse est border-collapse: separate.
vertical-align: top, middle ou bottom sert a placer le contenu d'une cellule respectivement en haut de la cellule, au centre ou en bas de la cellule.
Lorsque votre texte touche une cellule, pensez au margin (cf cours sur les positions d'éléments.

Les listes à puces

Les listes à puces permettent de classer les éléments, en renseignant la balise <ul> en css vous pourrez accéder à de nouvelles options.

On peut aussi changer la puce par une image que l'on peut trouver sur Internet ou en la faisant vous même (pour les listes non ordonnées).

Il existe aussi une liste de puces pré enregistrées, on y accède avec list-style-type.

page suivante sommaire