Tableaux

Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.

Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.

Information : d'autres sélecteurs

CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.

Voici un résumé des sélecteurs basés sur les relations :

Sélecteur	Sélectionne
`A E`	Tout élément E qui est un descendant d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, etc.)
`A > E`	Tout élément E qui est un enfant direct d'un élément A
`E:first-child`	Tout élément E qui est le premier enfant de son parent
`B + E`	Tout élément E qui est le frère d'un élément B (c'est-à-dire l'enfant suivant du même parent)

Vous pouvez combiner ceux-ci pour exprimer des relations complexes.

Vous pouvez également utiliser le symbole * (astérisque) pour désigner « n'importe quel élément. »

Un tableau HTML a un attribut id, mais ses lignes et cellules n'ont pas d'identifiants individuels :

<TABLE id="data-table-1">
...
<TR>
<TD>Préfixe</TD>
<TD>0001</TD>
<TD>par défaut</TD>
</TR>
...

Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :

#data-table-1 td:first-child {font-weight: bolder;} #data-table-1 td:first-child + td {font-family: monospace;}

Le résultat ressemble à ceci :

Préfixe 0001 par défaut

Plus de détails
Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité. Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs `class` ou `id` sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail. Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments. Pour plus de détails sur les sélecteurs, consultez Selectors dans la spécification CSS.

Information : les tableaux

Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.

Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.

N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (Mise en page) sont plus appropriées pour cela.

Structure d'un tableau

Dans un tableau, chaque élément d'information est affiché dans une cellule.

Une rangée horizontale de cellules forme une ligne.

Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un en-tête (header) de tableau. Un groupe spécial de lignes en fin de tableau est un pied (footer) de tableau. Les lignes principales sont le corps (body) du tableau, et peuvent également former des groupes.

Les cellules alignées verticalement forment une colonne, mais les colonnes ont une utilisation limitée en CSS.

Exemple
Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes. La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau. Il y a deux colonnes.

Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.

Bordures

Les cellules n'ont pas de marge extérieure (margin).

Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété border-spacing du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété border-collapse du tableau à collapse.

Voici trois tableaux.

Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec collapse :

Trèfle	Cœur
Carreau	Pique

Trèfle	Cœur
Carreau	Pique

Trèfle	Cœur
Carreau	Pique

Légendes

Une légende (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.

Pour la déplacer en bas, définissez sa propriété caption-side à bottom (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.

Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.

Exemple

Ce tableau a une légende placée en dessous :

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
  }

Suites

Trèfle	Cœur
Carreau	Pique

Cellules vides

Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant empty-cells: show; pour l'élément table.

Vous pouvez les masquer en spécifiant empty-cells: hide;. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.

Exemple

Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé.

Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :

	Cœur
Carreau	Pique

	Cœur
Carreau	Pique

Plus de détails
Pour des informations détaillées concernant les tableaux, consultez Tables dans la spécification CSS. Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.

Action : habillage d'un tableau

Créez un nouveau document HTML, doc3.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Document exemple 3</TITLE>
<LINK rel="stylesheet" type="text/css" href="style3.css">
</HEAD>
<BODY>

<TABLE id="demo-table">
<CAPTION>Les océans</CAPTION>

<THEAD>
<TR>
<TH></TH>
<TH>Surface</TH>
<TH>Profondeur moyenne</TH>
</TR>
<TR>
<TH></TH>
<TH>millions de km<SUP>2</SUP></TH>
<TH>m</TH>
</TR>
</THEAD>

<TBODY>
<TR>
<TH>Arctique</TH>
<TD>13 000</TD>
<TD>1 200</TD>
</TR>
<TR>
<TH>Atlantique</TH>
<TD>87 000</TD>
<TD>3 900</TD>
</TR>
<TR>
<TH>Pacifique</TH>
<TD>180 000</TD>
<TD>4 000</TD>
</TR>
<TR>
<TH>Indien</TH>
<TD>75 000</TD>
<TD>3 900</TD>
</TR>
<TR>
<TH>Antarctique</TH>
<TD>20 000</TD>
<TD>4 500</TD>
</TR>
</TBODY>

<TFOOT>
<TR>
<TH>Total</TH>
<TD>361 000</TD>
<TD></TD>
</TR>
<TR>
<TH>Moyenne</TH>
<TD>72 000</TD>
<TD>3 800</TD>
</TR>
</TFOOT>

</TABLE>
   
</BODY>
</HTML>

Créez une nouvelle feuille de style, style3.css. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

/*** Style pour doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
  }

#demo-table > caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
  }


/* règles de base partagées */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
  }

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
  }


/* en-tête */
#demo-table > thead > tr:first-child > th {
  text-align: center;
  color: blue;
  }

#demo-table > thead > tr + tr > th {
  font-style: italic;
  color: gray;
  }

/* taille des valeurs en exposant */
#demo-table sup {
  font-size: 75%;
  }

/* corps du tableau */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
  }

#demo-table tbody th:after {
  content: " :";
  }


/* pied du tableau */
#demo-table tfoot {
  font-weight: bold;
  }

#demo-table tfoot th {
  color: blue;
  }

#demo-table tfoot th:after {
  content: " :";
  }

#demo-table > tfoot td {
  background-color: #cee;
  }

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
  }

Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :

Les océans

	Surface	Profondeur moyenne
	millions de km²	m
Arctique :	13 000	1 200
Atlantique :	87 000	3 900
Pacifique :	180 000	4 000
Indien :	75 000	3 900
Antarctique :	20 000	4 500
Total :	361 000
Moyenne :	72 000	3 800

Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.

Voici quelques notes à propos de ce tableau :

La légende (caption) se trouve à l'extérieur de la bordure du tableau.
Si une taille minimale de police est définie dans les options, elle peut affecter l'exposant dans km².
Trois cellules sont vides. Deux d'entre-elles laissent le fond du tableau visible. La troisème a un fond et une bordure supérieure.
Les deux points sont ajoutés par la feuille de style.

Challenges

Modifiez la feuille de style afin que le tableau ressemble à ceci :

	Surface	Profondeur moyenne
	millions de km²	m
Arctique :	13 000	1 200
Atlantique :	87 000	3 900
Pacifique :	180 000	4 000
Indien :	75 000	3 900
Antarctique :	20 000	4 500
Total :	361 000
Moyenne :	72 000	3 800

Les océans

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez Full property table dans la spécification CSS.

La page suivante revient sur le but et la structure des feuilles de style CSS : Médias.