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

• permet de fixer ou non la largeur des colonnes d’un tableau
• s’applique à la balise <table></table>
• auto (valeur par défaut) = la largeur se règle automatiquement
• fixed = les colonnes ont la même largeur
• propriété héritée
• si aucune largeur (width) n’est donnée au tableau, avec la valeur fixed, ce dernier prend toute la largeur de son conteneur

table
{
    width: 300px; 
    table-layout: fixed; 
}
td
{
    width: 300px;
    border: 2px solid red;
}

Chaque colonne a la même largeur, définie au préalable

Border-collapse

• indique si les bordures des différents éléments du tableau doivent ou non fusionner
• s’applique aux balises <table></table> et <td></td>
• collapse = fusion des bordures
• separate = séparation des bordures
• dans le cas de la valeur separate, il est possible de définir l’espace entre les bordures avec la propriété border-spacing
• propriété héritée

table

{
    border-collapse: collapse; 
}
td
{
    border: 2px solid grey;
}

Collapse : les bordures de ce tableau sont collées les unes aux autres

table
{
    border-collapse: separate; 
}
td
{
    border: 2px solid grey;
}

Separate : les bordures du tableau sont séparées

Border-spacing

• 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

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

Empty-cells

• affiche ou masque le contour des cellules vides (uniquement si les bordures sont séparées)
• s’applique à la balise <table></table>
• show = visible
• hide = invisible
• propriété héritée

table 
{
    width: 300px;
    border-collapse: separate; 
    empty-cells:show;/*Les cellules vides de ce tableau sont montrées*/	
}

Les cellules vides de ce tableau sont montrées grâce à la propriété empty-cells

Text-align

• alignement horizontal d’un texte
• s’applique à la balise <td></td>
• dans le cas particulier des tableaux, cela permet d’aligner des textes contenus sur un caractère comme par exemple la virgule décimale « , »
• left = à gauche
• right = à droite
• center = centré
• justify = justifié
• propriété héritée

table 
{
    width: 300px;
    border-collapse: separate; 
    text-align: center;/*Le texte est centré*/

}

Grâce à la propriété text-align, on place le texte où l’on veut, ici au centre

Vertical-align

• décalage vers le haut ou vers le bas
• 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

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

Caption-side

• top : titre au-dessus du tableau (valeur par défaut)
• bottom : le titre sera placé en dessous du tableau.

table 
{    
    width:  400px; 
    height: 200px;    
    text-align: center;	
    caption-side: bottom;/*Le titre du tableau est placé en bas*/

}

Le titre de ce tableau est placé en bas grâce à caption-side