CSS tableaux

Le regard d'un tableau HTML peut être grandement améliorée avec CSS:

Entreprise	Contacter	Pays
Alfreds Futterkiste	Anders Maria	Allemagne
Berglunds snabbköp	Christina Berglund	Suède
Centro Comercial Moctezuma	Francisco Chang	Mexique
Ernst Handel	Roland Mendel	Autriche
Island Trading	Helen Bennett	Royaume-Uni
Königlich Essen	Philippe Cramer	Allemagne
Rire Winecellars Bacchus	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italie
Nord / Sud	Simon Crowther	Royaume-Uni
Paris Spécialités	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Danemark

---

Des bordures de tableau

Pour spécifier les bordures du tableau en CSS, utilisez la propriété border.

L'exemple ci-dessous spécifie une bordure noire pour la table, e, et les éléments td:

Exemple

table, th, td
{
border: 1px solid black;
}

Essayez vous-même »

Notez que la table dans l'exemple ci-dessus a des frontières doubles. C'est parce que la table et les éléments th / td avoir des frontières distinctes.

Pour afficher une frontière unique pour la table, utilisez la propriété border-collapse.

Réduire les frontières

La propriété border-collapse définit si les bordures du tableau sont regroupées en une seule bordure ou séparés:

Exemple

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Essayez vous-même »

---

Largeur et Hauteur tableau

Largeur et hauteur d'une table est définie par la largeur et la hauteur des propriétés.

L'exemple ci-dessous définit la largeur de la table à 100%, et la hauteur des éléments th à 50px:

Exemple

table
{
width:100%;
}
th
{
height:50px;
}

Essayez vous-même »

---

Alignement du texte tableau

Le texte dans un tableau est aligné avec les propriétés text-align et vertical-align.

La propriété text-align définit l'alignement horizontal, comme à gauche, droite ou au centre:

Exemple

td
{
text-align:right;
}

Essayez vous-même »

La propriété vertical-align définit l'alignement vertical, comme en haut, en bas ou au milieu:

Exemple

td
{
height:50px;
vertical-align:bottom;
}

Essayez vous-même »

---

Rembourrage tableau

Pour contrôler l'espace entre la bordure et le contenu dans un tableau, utilisez la propriété padding sur td et les éléments th:

Exemple

td
{
padding:15px;
}

Essayez vous-même »

---

Table des couleurs

L'exemple ci-dessous précise la couleur des frontières, et la couleur du texte et d'arrière-plan des éléments e:

Exemple

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

Essayez vous-même »

---

Exemples

Faites un tableau de fantaisie
Cet exemple montre comment créer un tableau de fantaisie.

Réglez la position de la légende du tableau
Cet exemple montre comment positionner la légende du tableau.