Nous allons voir ici les différentes possibilités de mise en forme des tableaux, éléments très courants en HTML. Comme pour tous les éléments d’une page HTML, le style des tableaux va permettre de leur apporter, grâce au CSS, une apparence plus travaillée.
modifie l’espacement des bordures (uniquement si les bordures sont séparées)
s’applique à la balise <table></table>
s’exprime en px
propriété héritée
Code : CSS
table
{
width: 300px;
border-collapse: separate;
table-layout: fixed;
border-spacing:10px; /*Les bordures de ce tableau seront espacées les unes des autres de 10 pixels*/
table
}
Les bordures de ce tableau sont espacées de 10 pixels grâce à la propriété border-spacing
s’applique non seulement aux textes mais aussi aux images et aux cellules des tableaux
top = en haut
bottom = en bas
middle = au milieu
baseline (valeur par défaut) = sur la base de la ligne
propriété non-héritée
Code : CSS
table
{
width: 400px;
height: 200px;
text-align: center;
}
td
{
vertical-align: top;/*Le texte est décalé en haut des cellules-Propriété non héritée donc à appliquer à chaque enfant*/
border: 2px solid red;
}
Grâce à vertical-align, le texte est décalé en haut des cellules
Le style des tableaux en CSS
Nous allons voir ici les différentes possibilités de mise en forme des tableaux, éléments très courants en HTML. Comme pour tous les éléments d’une page HTML, le style des tableaux va permettre de leur apporter, grâce au CSS, une apparence plus travaillée.
Table-layout
Chaque colonne a la même largeur, définie au préalable
Télécharger l’exemple
Border-collapse
Collapse : les bordures de ce tableau sont collées les unes aux autres
Télécharger l’exemple
Separate : les bordures du tableau sont séparées
Télécharger l’exemple
Border-spacing
Les bordures de ce tableau sont espacées de 10 pixels grâce à la propriété border-spacing
Télécharger l’exemple
Empty-cells
Les cellules vides de ce tableau sont montrées grâce à la propriété empty-cells
Télécharger l’exemple
Text-align
Grâce à la propriété text-align, on place le texte où l’on veut, ici au centre
Télécharger l’exemple
Vertical-align
Grâce à vertical-align, le texte est décalé en haut des cellules
Télécharger l’exemple
Caption-side
top
: titre au-dessus du tableau (valeur par défaut)bottom
: le titre sera placé en dessous du tableau.Le titre de ce tableau est placé en bas grâce à caption-side
Télécharger l’exemple
Les bordures sont dans un autre chapitre mais servent bien évidemment beaucoup pour les tableaux.