From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../css/building_blocks/styling_tables/index.html | 602 +++++++++++++++++++++ 1 file changed, 602 insertions(+) create mode 100644 files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html (limited to 'files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html') diff --git a/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9fcc9dbd2d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,602 @@ +--- +title: Tableaux +slug: CSS/Premiers_pas/Tableaux +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

 

+

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électeurSélectionne
A ETout é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 > ETout élément E qui est un enfant direct d'un élément A
E:first-childTout élément E qui est le premier enfant de son parent
B + ETout é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. »

+ + + + + + + +
+ Exemple
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éfixe0001par 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.

+ + + + + + + +
+ Exemple
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èfleCœur
CarreauPique
+ 		+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+ 		+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+
+
+

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èfleCœur
CarreauPique
+
+
+
+

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
CarreauPique
+ 		+ + + + + + + + + + + +
 Cœur
CarreauPique
+
+
+

 

+ + + + + + + +
+ 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

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 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 :

+ +

 

+ + + + + + + +
+ Challenges
Modifiez la feuille de style afin que le tableau ressemble à ceci : + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 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.

-- cgit v1.2.3-54-g00ecf