From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../css/building_blocks/styling_tables/index.html | 308 --------------------- .../css/building_blocks/styling_tables/index.md | 308 +++++++++++++++++++++ 2 files changed, 308 insertions(+), 308 deletions(-) delete mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.md (limited to 'files/fr/learn/css/building_blocks/styling_tables') diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 2543732c2a..0000000000 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: Mise en page de tableaux -slug: Learn/CSS/Building_blocks/Styling_tables -tags: - - Article - - CSS - - Codage - - Débutant - - Guide - - HTML - - Style - - Tableaux -translation_of: Learn/CSS/Building_blocks/Styling_tables -original_slug: Apprendre/CSS/Building_blocks/Styling_tables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
- -

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

- - - - - - - - - - - - -
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
- -

Un tableau HTML typique

- -

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

- -
<table>
-  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
-  <thead>
-    <tr>
-      <th scope="col">Groupe</th>
-      <th scope="col">Année de formation</th>
-      <th scope="col">Nombre d'albums</th>
-      <th scope="col">Morceau le plus célèbre</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Buzzcocks</th>
-      <td>1976</td>
-      <td>9</td>
-      <td>Ever fallen in love (with someone you shouldn't've)</td>
-    </tr>
-    <tr>
-      <th scope="row">The Clash</th>
-      <td>1976</td>
-      <td>6</td>
-      <td>London Calling</td>
-    </tr>
-
-      ... quelques lignes supprimées pour condenser le texte
-
-    <tr>
-      <th scope="row">The Stranglers</th>
-      <td>1974</td>
-      <td>17</td>
-      <td>No More Heroes</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <th scope="row" colspan="2">Total albums</th>
-      <td colspan="2">77</td>
-    </tr>
-  </tfoot>
-</table>
- -

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

- -

Liste des groupes punk du Royaume Uni

- -

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

- -

Mettre en forme notre tableau

- -

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

- -
    -
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. -
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. -
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : - 
    <link href="style.css" rel="stylesheet" type="text/css">
    -
    4. -
- -

Espacement et disposition

- -

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

- -
/* espacement */
-
-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  border: 3px solid purple;
-}
-
-thead th:nth-child(1) {
-  width: 30%;
-}
-
-thead th:nth-child(2) {
-  width: 20%;
-}
-
-thead th:nth-child(3) {
-  width: 15%;
-}
-
-thead th:nth-child(4) {
-  width: 35%;
-}
-
-th, td {
-  padding: 20px;
-}
- -

Voici les choses les plus importantes à noter :

- -

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

- - - -

À ce stade, le tableau a déjà meilleure mine :

- -

Première mise en forme du tableau

- -

Simple typographie

- -

Maintenant, différencions un peu nos polices de caractère.

- -

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

- -

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

- -
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
- -

Puis ajoutons le CSS suivant dans le fichier style.css :

- -
/* typographie */
-
-html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
-}
-
-th {
-  letter-spacing: 2px;
-}
-
-td {
-  letter-spacing: 1px;
-}
-
-tbody td {
-  text-align: center;
-}
-
-tfoot th {
-  text-align: right;
-}
- -

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

- - - -

Cela fait un peu plus propre :

- -

Deuxième mise en forme : modifications des polices de caractères.

- -

Graphisme et couleurs

- -

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

- -

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

- -
thead, tfoot {
-  background: url(leopardskin.jpg);
-  color: white;
-  text-shadow: 1px 1px 1px black;
-}
-
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
-  border: 3px solid purple;
-}
-
- -

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

- -

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

- -

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

- -

Zébrures

- -

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

- -
tbody tr:nth-child(odd) {
-  background-color: #ff33cc;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #e495e4;
-}
-
-tbody tr {
-  background-image: url(noise.png);
-}
-
-table {
-  background-color: #ff33cc;
-}
- - - -

Et voici l'explosion de couleurs résultante :

- -

Troisième mise en forme : coloriage agressif

- -

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

- -

Styliser l'intitulé

- -

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

- -
caption {
-  font-family: 'Rock Salt', cursive;
-  padding: 20px;
-  font-style: italic;
-  caption-side: bottom;
-  color: #666;
-  text-align: right;
-  letter-spacing: 1px;
-}
- -

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

- -

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

- -

Apprentissage actif : mettez en page votre propre tableau

- -

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

- -

Quelques conseils rapides

- -

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

- - - -

Résumé

- -

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md new file mode 100644 index 0000000000..2543732c2a --- /dev/null +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -0,0 +1,308 @@ +--- +title: Mise en page de tableaux +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - CSS + - Codage + - Débutant + - Guide + - HTML + - Style + - Tableaux +translation_of: Learn/CSS/Building_blocks/Styling_tables +original_slug: Apprendre/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

+ + + + + + + + + + + + +
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
+ +

Un tableau HTML typique

+ +

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

+ +
<table>
+  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
+  <thead>
+    <tr>
+      <th scope="col">Groupe</th>
+      <th scope="col">Année de formation</th>
+      <th scope="col">Nombre d'albums</th>
+      <th scope="col">Morceau le plus célèbre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+      ... quelques lignes supprimées pour condenser le texte
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

+ +

Liste des groupes punk du Royaume Uni

+ +

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

+ +

Mettre en forme notre tableau

+ +

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

+ +
    +
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. +
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. +
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Espacement et disposition

+ +

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

+ +
/* espacement */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Voici les choses les plus importantes à noter :

+ +

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

+ + + +

À ce stade, le tableau a déjà meilleure mine :

+ +

Première mise en forme du tableau

+ +

Simple typographie

+ +

Maintenant, différencions un peu nos polices de caractère.

+ +

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

+ +

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Puis ajoutons le CSS suivant dans le fichier style.css :

+ +
/* typographie */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

+ + + +

Cela fait un peu plus propre :

+ +

Deuxième mise en forme : modifications des polices de caractères.

+ +

Graphisme et couleurs

+ +

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

+ +

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

+ +

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

+ +

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

+ +

Zébrures

+ +

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

Et voici l'explosion de couleurs résultante :

+ +

Troisième mise en forme : coloriage agressif

+ +

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

+ +

Styliser l'intitulé

+ +

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

+ +

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

+ +

Apprentissage actif : mettez en page votre propre tableau

+ +

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

+ +

Quelques conseils rapides

+ +

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

+ + + +

Résumé

+ +

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ + + +

Dans ce module

+ + -- cgit v1.2.3-54-g00ecf