diff options
Diffstat (limited to 'files/fr/learn/css/building_blocks/styling_tables')
| -rw-r--r-- | files/fr/learn/css/building_blocks/styling_tables/index.md | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index bfebc37bc0..28a5018e0a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -32,7 +32,7 @@ Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> </tr> </tbody> @@ -89,7 +89,7 @@ Le tableau est bien balisé, facile à disposer et accessible, remercions les fo  -Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. +Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. ## Mettre en forme notre tableau @@ -97,7 +97,7 @@ Dans cette section d'apprentissage actif, nous allons travailler le style de l'e 1. Pour débuter, faites une copie locale de l'[exemple de balisage](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), téléchargez les images ([noise.png](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) et [leopardskin.jpg](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur. 2. Ensuite, créez un nouveau fichier nommé `style.css` et enregistrez‑le dans le même répertoire que les autres fichiers. -3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : +3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : ```html <link href="style.css" rel="stylesheet" type="text/css"> @@ -147,7 +147,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc 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 :  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 : -- 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 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 : @@ -156,7 +156,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc ### Simple typographie -Maintenant, différencions un peu nos polices de caractère. +Maintenant, différencions un peu nos polices de caractère. Tout d'abord, nous avons trouvé une police sur [Google Fonts](https://www.google.com/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. @@ -166,7 +166,7 @@ D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément H <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` : +Puis ajoutons le CSS suivant dans le fichier `style.css` : ```css /* typographie */ @@ -200,7 +200,7 @@ Rien de propre aux tableaux ici ; nous modifions simplement le style de la polic - Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ». - Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif. -- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. +- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. - Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données. Cela fait un peu plus propre : @@ -211,7 +211,7 @@ Cela fait un peu plus propre : 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` : +Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : thead, tfoot { background: url(leopardskin.jpg); @@ -226,13 +226,13 @@ Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : 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 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` : +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` : ```css tbody tr:nth-child(odd) { @@ -264,7 +264,7 @@ Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce ### 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` : +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` : ```css caption { @@ -293,7 +293,7 @@ Avant de poursuivre, voici une liste rapide des points les plus utiles illustré - Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable. - Utilisez {{cssxref("table-layout")}}`: fixed` pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}). - Utilisez {{cssxref("border-collapse")}}`: collapse` pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler. -- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. +- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. - Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture. - Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre. @@ -305,7 +305,7 @@ Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes de ## Dans ce module -- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) |