From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../css/building_blocks/styling_tables/index.html | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'files/fr/learn/css/building_blocks/styling_tables/index.html') diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html index 0b8eb4bd14..2543732c2a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -17,13 +17,13 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables
{{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.

+

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.

- +
- + @@ -79,7 +79,7 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables

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

+

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.

@@ -136,14 +136,14 @@ th, td {
  • Définir pour le tableau la valeur fixed pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec table-layout: fixed, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur thead th:nth-child(n) ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans Fixed Table Layouts.

    Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).
    • -
  • La valeur collapse pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
    • +
  • La valeur collapse pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
  • Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons  plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.
  • Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.

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

    -

    Première mise en forme du tableau

    +

    Première mise en forme du tableau

    Simple typographie

    @@ -194,7 +194,7 @@ tfoot th {

    Cela fait un peu plus propre :

    -

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

    +

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

    Graphisme et couleurs

    @@ -248,7 +248,7 @@ table {

    Et voici l'explosion de couleurs résultante :

    -

    Troisième mise en forme : coloriage agressif

    +

    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.

    @@ -268,7 +268,7 @@ table {

    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

    +

    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

    @@ -303,6 +303,6 @@ table {
  • Encadrements
  • Mise en page des tableaux
  • Effets de boîte avancés
    • -
  • Création d'un en-tête de papier à lettre élégant
    • +
  • Création d'un en-tête de papier à lettre élégant
  • Une boîte d'aspect rafraîchissant
    • -- cgit v1.2.3-54-g00ecf
    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.)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 :