Web-Infos
  • Criar um site
  • Checkout
  • Le HTML5
  • CSS 3
  • Propriétés CSS
  • Balises HTML5
  • Faire son site internet
  • Téléchargement
Accueil » Le style des tableaux en CSS
  • Introduction : un exemple de style CSS appliqué à une page HTML
  • Structurer une page en CSS
  • Structure de page : le DIV et le SPAN en CSS
  • Une feuille de style CSS pour structurer une page HTML
  • Améliorer le style des textes en CSS
  • Petit cours de syntaxe CSS : les bases
  • Positionnement et alignement des éléments en CSS
  • Améliorer le design de votre site grâce au CSS
  • Comment utiliser le background
  • L’apparence et le style des liens en CSS
  • Le positionnement multi-colonnes
  • Les sélecteurs avancés
  • Comment modifier le style des listes en CSS
  • Comment utiliser les marges en CSS
  • Le style des tableaux en CSS
  • Les effets de texte : ombre portée et police
  • Les media queries
  • Utiliser le style des bordures en CSS
  • La transparence avec RGBA et opacity
  • Utilisation des animations et transitions en CSS
  • Glossaire de tous les styles CSS

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
  • Border-collapse
  • Border-spacing
  • Empty-cells
  • Text-align
  • Vertical-align
  • Caption-side

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
Code : CSS

table
{
    width: 300px; 
    table-layout: fixed; 
}
td
{
    width: 300px;
    border: 2px solid red;
}
Utilisation de la propriété CSS table-layout pour améliorer le style des tableaux

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

Télécharger l’exemple

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
Code : CSS

table

{
    border-collapse: collapse; 
}
td
{
    border: 2px solid grey;
}
Utilisation de la propriété collapse en CSS

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

Télécharger l’exemple


Code : CSS

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

Utilisation de la propriété border-collpase separate en CSS

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

Télécharger l’exemple

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
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 
}
Utilisation de la propriété border-spacing en CSS

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

  • 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
Code : CSS

 

table 
{
    width: 300px;
    border-collapse: separate; 
    empty-cells:show;/*Les cellules vides de ce tableau sont montrées*/	
}
Utilisation de la propriété empty-cells pour montrer ou cacher les cellules vides

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

Télécharger l’exemple

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
Code : CSS

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

}
Utilisation de la propriété text-align pour centrer/aligner le texte afin d'améliorer le style des tableaux

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

  • 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
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;
}
Utilisation de la propriété CSS 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.
Code : CSS

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

}
Utilisation de la propriété CSS pour placer le titre du tableau en haut ou en bas

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.

  • Balises HTML5
  • Propriétés CSS
  • Livre d’or
  • Conditions générales
  • Contact