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 --- files/fr/learn/html/tables/advanced/index.html | 42 ++++++++++++-------------- 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'files/fr/learn/html/tables/advanced') diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html index 11669b25e7..7a6f46a012 100644 --- a/files/fr/learn/html/tables/advanced/index.html +++ b/files/fr/learn/html/tables/advanced/index.html @@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
-

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

+

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

- +
@@ -55,7 +55,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced

Le titre est placé directement sous la balise <table>.

-

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

+

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

Apprentissage actif : Ajouter un titre

@@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
-

Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

+

Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

@@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
-

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

+

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

Apprentissage actif : Ajout d'une structure au tableau

@@ -115,15 +115,12 @@ tfoot {
-

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

+

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

Le code de votre tableau fini devrait ressembler à quelque chose comme :

- -

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+

{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}

-

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

+

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

Tableaux imbriqués

@@ -270,7 +266,7 @@ tfoot {

Voici la sortie qui en résulte :

-
Prérequis :
+
@@ -278,8 +274,8 @@ tfoot { -
title1title3
- +
+ @@ -370,18 +366,18 @@ tfoot {

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

-

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

+

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

-

Utilisation des en-têtes de colonnes et de lignes

+

Utilisation des en-têtes de colonnes et de lignes

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

-

L'attribut scope

+

L'attribut scope

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

@@ -409,7 +405,7 @@ tfoot {

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

-

Les attributs id et headers

+

Les attributs id et headers

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

@@ -445,7 +441,7 @@ tfoot { </tbody>
-

Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

+

Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

Apprentissage actif : jouer avec scope et headers

@@ -457,7 +453,7 @@ tfoot {
-

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
+

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
         et items-sold-headers.html (voir aussi directement).

@@ -474,7 +470,7 @@ tfoot { -- cgit v1.2.3-54-g00ecf
cell1