diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-14 14:30:47 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-15 07:48:59 +0100 |
| commit | faa96e657621455284245018b8a3b5050b613e6b (patch) | |
| tree | a307a407e4b101b688fee89af9959001a9aae187 /files/fr/learn/html/tables | |
| parent | e26d24940b2234a1a5e63b19d19d298bf36354e2 (diff) | |
| download | translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.gz translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.bz2 translated-content-faa96e657621455284245018b8a3b5050b613e6b.zip | |
convert content to md
Diffstat (limited to 'files/fr/learn/html/tables')
| -rw-r--r-- | files/fr/learn/html/tables/advanced/index.md | 645 | ||||
| -rw-r--r-- | files/fr/learn/html/tables/basics/index.md | 853 | ||||
| -rw-r--r-- | files/fr/learn/html/tables/index.md | 34 | ||||
| -rw-r--r-- | files/fr/learn/html/tables/structuring_planet_data/index.md | 89 |
4 files changed, 794 insertions, 827 deletions
diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md index 7a6f46a012..08a424fa99 100644 --- a/files/fr/learn/html/tables/advanced/index.md +++ b/files/fr/learn/html/tables/advanced/index.md @@ -21,111 +21,108 @@ tags: translation_of: Learn/HTML/Tables/Advanced original_slug: Apprendre/HTML/Tableaux/Advanced --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> - -<p>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.</p> +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. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases de HTML (voir + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + En apprendre plus sur les fonctionnalités HTML plus avancées et + l'accessibilité aux tableaux. + </td> + </tr> + </tbody> </table> -<h2 id="Ajouter_un_titre_aux_tableaux_avec_<caption>">Ajouter un titre aux tableaux avec <caption></h2> +## Ajouter un titre aux tableaux avec \<caption> -<p>Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <code><table></code>.</p> +Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante `<table>`. -<pre class="brush: html"><table> - <caption>Dinosaures dans le Jurassique</caption> +```html +<table> + <caption>Dinosaures dans le Jurassique</caption> ... -</table></pre> +</table> +``` + +Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail. -<p>Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.</p> +Le titre est placé directement sous la balise `<table>`. -<p>Le titre est placé directement sous la balise <code><table></code>.</p> +> **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). -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code><table></code> 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 <code><caption></code>, car <code>summary</code> 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).</p> -</div> +### Apprentissage actif : Ajouter un titre -<h3 id="Apprentissage_actif_Ajouter_un_titre">Apprentissage actif : Ajouter un titre</h3> +Essayons en revisitant un exemple rencontré dans l'article précédent. -<p>Essayons en revisitant un exemple rencontré dans l'article précédent.</p> +1. Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html). +2. Ajoutez un titre approprié pour le tableau. +3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble. -<ol> - <li>Ouvrez le planning du professeur de langue de la fin de <a href="/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">Tableaux HTML : notions de base</a> ou faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li> - <li>Ajoutez un titre approprié pour le tableau.</li> - <li>Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.</li> -</ol> +> **Note :** Vous pouvez trouver notre version sur GitHub — voir [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)). -<div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p> -</div> +## Ajout d'une structure avec \<thead>, \<tfoot>, et \<tbody> -<h2 id="Ajout_d'une_structure_avec_<thead>_<tfoot>_et_<tbody>">Ajout d'une structure avec <thead>, <tfoot>, et <tbody></h2> +Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau. -<p>Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.</p> +Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas. -<p>Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.</p> +Pour les utiliser : -<p>Pour les utiliser :</p> +- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci. +- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau). +- L'élément `<tbody>` doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus). -<ul> - <li>L'élément <code><thead></code> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.</li> - <li>L'élément <code><tfoot></code> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément <tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément <thead> (le navigateur l'affichera toujours en pied de tableau).</li> - <li>L'élément <code><tbody></code> doit couvrir toutes les parties du tableau non contenues dans un <thead> ou un <tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).</li> -</ul> +> **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](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — 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. -<div class="note"> -<p><strong>Note :</strong> <code><tbody></code> 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 <code><tbody></code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — 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.</p> -</div> +### Apprentissage actif : Ajout d'une structure au tableau -<h3 id="Apprentissage_actif_Ajout_d'une_structure_au_tableau">Apprentissage actif : Ajout d'une structure au tableau</h3> +Mettons en œuvre ces nouveaux éléments. -<p>Mettons en œuvre ces nouveaux éléments.</p> +1. D'abord, faites une copie locale des fichiers [spending-record.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) dans un nouveau dossier. +2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code. +3. Mettez la ligne d'en-têtes en évidence avec l'élément `<thead>` , la ligne des totaux ("SUM") dans un `<tfoot>`, et le reste du contenu dans un `<tbody>`. +4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément `<tfoot>` a renvoyé la ligne "SUM" en bas du tableau. +5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ». +6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le \<head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : -<ol> - <li>D'abord, faites une copie locale des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> dans un nouveau dossier.</li> - <li>Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.</li> - <li>Mettez la ligne d'en-têtes en évidence avec l'élément <code><thead></code> , la ligne des totaux ("SUM") dans un <code><tfoot></code>, et le reste du contenu dans un <code><tbody></code>.</li> - <li>Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <code><tfoot></code> a renvoyé la ligne "SUM" en bas du tableau.</li> - <li>Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».</li> - <li>Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : - <pre class="brush: css">tbody { - font-size: 90%; - font-style: italic; -} + ```css + tbody { + font-size: 90%; + font-style: italic; + } -tfoot { - font-weight: bold; -} -</pre> - </li> - <li>Enregistrez, actualisez et regardez le résultat. Si <code><tbody></code> et <code><tfoot></code> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.</li> -</ol> + tfoot { + font-weight: bold; + } + ``` -<div class="note"> -<p><strong>Note :</strong> Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p> -</div> +7. Enregistrez, actualisez et regardez le résultat. Si `<tbody>` et `<tfoot>` n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles. -<p>Le code de votre tableau fini devrait ressembler à quelque chose comme :</p> +> **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](/fr/docs/Learn/CSS/Introduction_to_CSS) est un bon moyen de commencer ; il y a aussi un article spécifique sur [l'esthétique des tables](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables)). -<pre class="brush: html hidden"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Enregistrer mes dépenses</title> - <style> +Le code de votre tableau fini devrait ressembler à quelque chose comme : + +```html hidden +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Enregistrer mes dépenses</title> + <style> html { font-family: sans-serif; @@ -171,306 +168,284 @@ tfoot { tfoot { font-weight: bold; } - </style> - </head> - <body> - <table> - <caption>Comment j'ai choisi de dépenser mon argent</caption> - <thead> - <tr> - <th>Achats</th> - <th>Où ?</th> - <th>Date</th> - <th>Avis</th> - <th>Coût (€)</th> - </tr> - </thead> - <tfoot> - <tr> - <td colspan="4">SUM</td> - <td>118</td> - </tr> - </tfoot> - <tbody> - <tr> - <td>Coupe de cheveux</td> - <td>Coiffeur</td> - <td>12/09</td> - <td>Bonne idée</td> - <td>30</td> - </tr> - <tr> - <td>Lasagnes</td> - <td>Restaurant</td> - <td>12/09</td> - <td>Regrets</td> - <td>18</td> - </tr> - <tr> - <td>Souliers</td> - <td>Chaussures</td> - <td>13/09</td> - <td>Gros regrets</td> - <td>65</td> - </tr> - <tr> - <td>Dentifrice</td> - <td>Supermarché</td> - <td>13/09</td> - <td>Bien</td> - <td>5</td> - </tr> - </tbody> - </table> - - </body> -</html></pre> - -<p>{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi le trouver sur Github <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p> -</div> - -<h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2> - -<p>Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <code><table></code>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.</p> - -<p>Le balisage suivant montre un tableau simple imbriqué :</p> - -<pre class="brush: html"><table id="table1"> - <tr> - <th>title1</th> - <th>title2</th> - <th>title3</th> - </tr> - <tr> - <td id="nested"> - <table id="table2"> - <tr> - <td>cell1</td> - <td>cell2</td> - <td>cell3</td> - </tr> - </table> - </td> - <td>cell2</td> - <td>cell3</td> - </tr> - <tr> - <td>cell4</td> - <td>cell5</td> - <td>cell6</td> - </tr> -</table></pre> - -<p>Voici la sortie qui en résulte :</p> + </style> + </head> + <body> + <table> + <caption>Comment j'ai choisi de dépenser mon argent</caption> + <thead> + <tr> + <th>Achats</th> + <th>Où ?</th> + <th>Date</th> + <th>Avis</th> + <th>Coût (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Coupe de cheveux</td> + <td>Coiffeur</td> + <td>12/09</td> + <td>Bonne idée</td> + <td>30</td> + </tr> + <tr> + <td>Lasagnes</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Souliers</td> + <td>Chaussures</td> + <td>13/09</td> + <td>Gros regrets</td> + <td>65</td> + </tr> + <tr> + <td>Dentifrice</td> + <td>Supermarché</td> + <td>13/09</td> + <td>Bien</td> + <td>5</td> + </tr> + </tbody> + </table> -<table> - <tbody> + </body> +</html> +``` + +{{ 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](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement). + +## Tableaux imbriqués + +Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément `<table>`. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources. + +Le balisage suivant montre un tableau simple imbriqué : + +```html +<table id="table1"> <tr> - <th>title1</th> - <th>title2</th> - <th>title3</th> + <th>title1</th> + <th>title2</th> + <th>title3</th> </tr> <tr> - <td> - <table> - <tbody> - <tr> - <td>cell1</td> - <td>cell2</td> - <td>cell3</td> - </tr> - </tbody> - </table> - </td> - <td>cell2</td> - <td>cell3</td> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> </tr> <tr> - <td>cell4</td> - <td>cell5</td> - <td>cell6</td> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> </tr> - </tbody> </table> +``` + +Voici la sortie qui en résulte : + +| title1 | title2 | title3 | +| ------ | ------ | ------ | -<h2 id="Tableaux_pour_utilisateurs_malvoyants">Tableaux pour utilisateurs malvoyants</h2> +| <table> -<p>Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.</p> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> +</table> | cell2 | cell3 | +| cell4 | cell5 | cell6 | + +## Tableaux pour utilisateurs malvoyants + +Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes. <table> - <caption>Articles vendus Août 2016</caption> - <tbody> - <tr> - <td> </td> - <td> </td> - <th colspan="3" scope="colgroup">Vêtements</th> - <th colspan="2" scope="colgroup">Accessoires</th> - </tr> - <tr> - <td> </td> - <td> </td> - <th scope="col">Pantalons</th> - <th scope="col">Jupes</th> - <th scope="col">Robes</th> - <th scope="col">Bracelets</th> - <th scope="col">Bagues</th> - </tr> - <tr> - <th rowspan="3" scope="rowgroup">Belgique</th> - <th scope="row">Anvers</th> - <td>56</td> - <td>22</td> - <td>43</td> - <td>72</td> - <td>23</td> - </tr> - <tr> - <th scope="row">Gand</th> - <td>46</td> - <td>18</td> - <td>50</td> - <td>61</td> - <td>15</td> - </tr> - <tr> - <th scope="row">Bruxelles</th> - <td>51</td> - <td>27</td> - <td>38</td> - <td>69</td> - <td>28</td> - </tr> - <tr> - <th rowspan="2" scope="rowgroup">Pays-bas</th> - <th scope="row">Amsterdam</th> - <td>89</td> - <td>34</td> - <td>69</td> - <td>85</td> - <td>38</td> - </tr> - <tr> - <th scope="row">Utrecht</th> - <td>80</td> - <td>12</td> - <td>43</td> - <td>36</td> - <td>19</td> - </tr> - </tbody> + <caption> + Articles vendus Août 2016 + </caption> + <tbody> + <tr> + <td> </td> + <td> </td> + <th colspan="3" scope="colgroup">Vêtements</th> + <th colspan="2" scope="colgroup">Accessoires</th> + </tr> + <tr> + <td> </td> + <td> </td> + <th scope="col">Pantalons</th> + <th scope="col">Jupes</th> + <th scope="col">Robes</th> + <th scope="col">Bracelets</th> + <th scope="col">Bagues</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgique</th> + <th scope="row">Anvers</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gand</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Bruxelles</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Pays-bas</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> </table> -<p>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.</p> +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. -<div class="note"> -<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p> -</div> +> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data"). -<p>Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.</p> +Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible. -<h3 id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> +### Utilisation des en-têtes de colonnes et de lignes -<p>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.</p> +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. -<p>Nous avons déjà traité des en-têtes dans notre article précédent — voir <a href="/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Ajouter des en-têtes avec <th></a> .</p> +Nous avons déjà traité des en-têtes dans notre article précédent — voir [Ajouter des en-têtes avec \<th>](/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements) . -<h3 id="L'attribut_scope">L'attribut <code>scope</code></h3> +### L'attribut `scope` -<p>Aux balises <code><th></code>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <code><th></code> 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 :</p> +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 : -<pre class="brush: html"><thead> - <tr> - <th scope="col">Achats</th> - <th scope="col">Ou ?</th> - <th scope="col">Date</th> - <th scope="col">Avis</th> - <th scope="col">Coût (€)</th> - </tr> -</thead></pre> +```html +<thead> + <tr> + <th scope="col">Achats</th> + <th scope="col">Ou ?</th> + <th scope="col">Date</th> + <th scope="col">Avis</th> + <th scope="col">Coût (€)</th> + </tr> +</thead> +``` -<p>Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):</p> +Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes): -<pre class="brush: html"><tr> - <th scope="row">Coupe de cheveux</th> - <td>Coiffeur</td> - <td>12/09</td> - <td>Bonne idée</td> - <td>30</td> -</tr></pre> +```html +<tr> + <th scope="row">Coupe de cheveux</th> + <td>Coiffeur</td> + <td>12/09</td> + <td>Bonne idée</td> + <td>30</td> +</tr> +``` -<p>Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.</p> +Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple. -<p><code>scope</code> a deux autres valeurs possibles — <code>colgroup</code> et <code>rowgroup</code>. 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 (<code><th></code>), 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 <code>scope="colgroup"</code>, alors que les autres doivent recevront un attribut <code>scope="col"</code>.</p> +`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"`. -<h3 id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> +### Les attributs `id` et `headers` -<p>Une alternative à l'usage de l'attribut <code>scope</code> 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 :</p> +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 : -<ol> - <li>Vous ajoutez un identifiant unique <code>id</code> à chaque élément <code><th></code>.</li> - <li>Vous ajoutez un attribut <code>headers</code> à chaque élément <code><td></code> . Chaque attribut <code>headers</code> doit contenir une liste des <code>id</code> de tous les éléments <th> qu'il contient, séparés par des espaces.</li> -</ol> +1. Vous ajoutez un identifiant unique `id` à chaque élément `<th>`. +2. Vous ajoutez un attribut `headers` à chaque élément `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces. -<p>Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.</p> +Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes. -<p>En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :</p> +En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi : -<pre class="brush: html"><thead> - <tr> - <th id="purchase">Achats</th> - <th id="location">Où ?</th> - <th id="date">Date</th> - <th id="evaluation">Avis</th> - <th id="cost">Coût (€)</th> - </tr> -</thead> -<tbody> -<tr> - <th id="haircut">Coupe de cheveux</th> - <td headers="location haircut">Coiffeur</td> - <td headers="date haircut">12/09</td> - <td headers="evaluation haircut">Bonne idée</td> - <td headers="cost haircut">30</td> -</tr> +```html +<thead> + <tr> + <th id="purchase">Achats</th> + <th id="location">Où ?</th> + <th id="date">Date</th> + <th id="evaluation">Avis</th> + <th id="cost">Coût (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Coupe de cheveux</th> + <td headers="location haircut">Coiffeur</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Bonne idée</td> + <td headers="cost haircut">30</td> +</tr> ... -</tbody></pre> +</tbody> +``` -<div class="note"> -<p><strong>Note :</strong> Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur. L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p> -</div> +> **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. -<h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3> +### Apprentissage actif : jouer avec `scope` et `headers` -<ol> - <li>Pour cet exercice final, nous aimerions que vous fassiez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items‑sold.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, dans un nouveau répertoire.</li> - <li>Maintenant essayez d'ajouter un attribut <code>scope</code> approprié pour améliorer ce tableau.</li> - <li>Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs <code>id</code> et <code>headers</code>.</li> -</ol> +1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de [items‑sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css), dans un nouveau répertoire. +2. Maintenant essayez d'ajouter un attribut `scope` approprié pour améliorer ce tableau. +3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs `id` et `headers`. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br> - et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">voir aussi directement</a>).</p> -</div> +> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) +> et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Décor des tableaux</a>.</p> +Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors [Décor des tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables). -<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> +{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -<div> -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Tableaux HTML : notions de base</a></li> - <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a></li> - <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> -</ul> -</div> -</div> +- [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics) +- [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md index fe9ef9ef91..5d8b0ecc45 100644 --- a/files/fr/learn/html/tables/basics/index.md +++ b/files/fr/learn/html/tables/basics/index.md @@ -19,539 +19,542 @@ tags: translation_of: Learn/HTML/Tables/Basics original_slug: Apprendre/HTML/Tableaux/Basics --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<p>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</p> +Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases de HTML (voir <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec les tableaux HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases de HTML (voir + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Se familiariser avec les tableaux HTML.</td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2> +## Qu'est-ce qu'un tableau ? -<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.</p> +Un tableau est un ensemble structuré de données (**table de données**) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier. -<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="numbers-table.png"></p> + -<p><img alt="A swimming timetable showing a sample data table" src="swimming-timetable.png"></p> + -<p>Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :</p> +Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 : -<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="1800-census.jpg"></p> + -<p>Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .</p> +Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web . -<h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3> +### Comment fonctionne un tableau ? -<p>L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.</p> +L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents. <table> - <caption>Données sur les planètes du système solaire (repris de <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption> - <thead> - <tr> - <td colspan="2"></td> - <th scope="col">Nom</th> - <th scope="col">Masse (10<sup>24</sup>kg)</th> - <th scope="col">Diamètre (km)</th> - <th scope="col">Densité (kg/m<sup>3</sup>)</th> - <th scope="col">Gravité (m/s<sup>2</sup>)</th> - <th scope="col">Durée du jour (hours)</th> - <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th> - <th scope="col">Température moyenne (°C)</th> - <th scope="col">Nombre de lunes</th> - <th scope="col">Notes</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th> - <th scope="row">Mercure</th> - <td>0.330</td> - <td>4,879</td> - <td>5427</td> - <td>3.7</td> - <td>4222.6</td> - <td>57.9</td> - <td>167</td> - <td>0</td> - <td>La plus proche du Soleil</td> - </tr> - <tr> - <th scope="row">Venus</th> - <td>4.87</td> - <td>12,104</td> - <td>5243</td> - <td>8.9</td> - <td>2802.0</td> - <td>108.2</td> - <td>464</td> - <td>0</td> - <td></td> - </tr> - <tr> - <th scope="row">Terre</th> - <td>5.97</td> - <td>12,756</td> - <td>5514</td> - <td>9.8</td> - <td>24.0</td> - <td>149.6</td> - <td>15</td> - <td>1</td> - <td>Notre monde</td> - </tr> - <tr> - <th scope="row">Mars</th> - <td>0.642</td> - <td>6,792</td> - <td>3933</td> - <td>3.7</td> - <td>24.7</td> - <td>227.9</td> - <td>-65</td> - <td>2</td> - <td>La planète rouge</td> - </tr> - <tr> - <th rowspan="4" scope="rowgroup">Planètes joviennes</th> - <th rowspan="2" scope="rowgroup">Géantes gazeuses</th> - <th scope="row">Jupiter</th> - <td>1898</td> - <td>142,984</td> - <td>1326</td> - <td>23.1</td> - <td>9.9</td> - <td>778.6</td> - <td>-110</td> - <td>67</td> - <td>La plus grosse planète</td> - </tr> - <tr> - <th scope="row">Saturne</th> - <td>568</td> - <td>120,536</td> - <td>687</td> - <td>9.0</td> - <td>10.7</td> - <td>1433.5</td> - <td>-140</td> - <td>62</td> - <td></td> - </tr> - <tr> - <th rowspan="2" scope="rowgroup">Géantes glacées</th> - <th scope="row">Uranus</th> - <td>86.8</td> - <td>51,118</td> - <td>1271</td> - <td>8.7</td> - <td>17.2</td> - <td>2872.5</td> - <td>-195</td> - <td>27</td> - <td></td> - </tr> - <tr> - <th scope="row">Neptune</th> - <td>102</td> - <td>49,528</td> - <td>1638</td> - <td>11.0</td> - <td>16.1</td> - <td>4495.1</td> - <td>-200</td> - <td>14</td> - <td></td> - </tr> - <tr> - <th colspan="2" scope="rowgroup">Planètes naines</th> - <th scope="row">Pluton</th> - <td>0.0146</td> - <td>2,370</td> - <td>2095</td> - <td>0.7</td> - <td>153.3</td> - <td>5906.4</td> - <td>-225</td> - <td>5</td> - <td>Déclassée en tant que planète en 2006 mais décision controverséee.</td> - </tr> - </tbody> + <caption> + Données sur les planètes du système solaire (repris de + <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/" + >Nasa's Planetary Fact Sheet - Metric</a + >). + </caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nom</th> + <th scope="col">Masse (10<sup>24</sup>kg)</th> + <th scope="col">Diamètre (km)</th> + <th scope="col">Densité (kg/m<sup>3</sup>)</th> + <th scope="col">Gravité (m/s<sup>2</sup>)</th> + <th scope="col">Durée du jour (hours)</th> + <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th> + <th scope="col">Température moyenne (°C)</th> + <th scope="col">Nombre de lunes</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th> + <th scope="row">Mercure</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>La plus proche du Soleil</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">Terre</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>Notre monde</td> + </tr> + <tr> + <th scope="row">Mars</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>La planète rouge</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Planètes joviennes</th> + <th rowspan="2" scope="rowgroup">Géantes gazeuses</th> + <th scope="row">Jupiter</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>La plus grosse planète</td> + </tr> + <tr> + <th scope="row">Saturne</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Géantes glacées</th> + <th scope="row">Uranus</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptune</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Planètes naines</th> + <th scope="row">Pluton</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td> + Déclassée en tant que planète en 2006 mais décision controverséee. + </td> + </tr> + </tbody> </table> -<p>Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</p> +Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants. + +### Style de tableau + +Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant. + +Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec [CSS](/fr/docs/Learn/CSS), ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article [Style et tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) quand vous aurez fini ici. -<h3 id="Style_de_tableau">Style de tableau</h3> +Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette [feuille de style ici](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css), et également [un exemple HTML d'application de cette feuille de style là](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML. -<p>Vous pouvez également <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder sur l'exemple réel</a> sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant.</p> +### Quand NE PAS utiliser de tableaux en HTML ? -<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/fr/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p> +Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec [Mises en page](/fr/docs/Learn/Accessibility/HTML#Page_layouts) dans notre [Module d'apprentissage à l'Accessibilité](/fr/docs/Learn/Accessibility). Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web. -<p>Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">feuille de style ici</a>, et également <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">un exemple HTML d'application de cette feuille de style là</a> — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.</p> +Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons : -<h3 id="Quand_NE_PAS_utiliser_de_tableaux_en_HTML">Quand NE PAS utiliser de tableaux en HTML ?</h3> +1. **Les tableaux de mise en page diminuent l'accessibilité aux malvoyants** : les [lecteurs d'écran](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders), utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs. +2. **Les tables produisent de la bouillie :** Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer. +3. **Les tableaux ne s'adaptent pas automatiquement** : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran. -<p>Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec <a href="/fr/docs/Learn/Accessibility/HTML#Page_layouts">Mises en page</a> dans notre <a href="/fr/docs/Learn/Accessibility">Module d'apprentissage à l'Accessibilité</a>. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.</p> +## Apprentissage actif : créer votre premier tableau -<p>Bref, utiliser les tableaux pour la mise en page <a href="/fr/docs/Learn/CSS/CSS_layout">au lieu des techniques des CSS</a> est une mauvaise idée. En voici les principales raisons :</p> +Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple. -<ol> - <li><strong>Les tableaux de mise en page diminuent l'accessibilité aux malvoyants </strong>: les <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lecteurs d'écran</a>, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.</li> - <li><strong>Les tables produisent de la bouillie :</strong> Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.</li> - <li><strong>Les tableaux ne s'adaptent pas automatiquement </strong>: Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.</li> -</ol> +1. Avant tout, faites une copie locale de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire de votre ordinateur. +2. Le contenu de chaque tableau est encadré par ces deux balises : **[`<table></table>`](/fr/docs/Web/HTML/Element/table)**. Ajoutez‑les dans le corps de votre HTML. +3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément **[`<td>`](/fr/docs/Web/HTML/Element/td)** (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : -<h2 id="Apprentissage_actif_créer_votre_premier_tableau">Apprentissage actif : créer votre premier tableau</h2> + ```html + <td>Bonjour, je suis votre première cellule.</td> + ``` -<p>Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.</p> +4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : -<ol> - <li>Avant tout, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire de votre ordinateur.</li> - <li>Le contenu de chaque tableau est encadré par ces deux balises : <strong><code><a href="/fr/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Ajoutez‑les dans le corps de votre HTML.</li> - <li>Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément <strong><code><a href="/fr/docs/Web/HTML/Element/td"><td></a></code></strong> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - <pre class="brush: html"><td>Bonjour, je suis votre première cellule.</td></pre> - </li> - <li>Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - <pre class="brush: html"><td>Bonjour, je suis votre première cellule </td> -<td>je suis votre deuxième cellule</td> -<td>je suis votre troisième cellule</td> -<td>je suis votre quatrième cellule</td></pre> - </li> -</ol> + ```html + <td>Bonjour, je suis votre première cellule </td> + <td>je suis votre deuxième cellule</td> + <td>je suis votre troisième cellule</td> + <td>je suis votre quatrième cellule</td> + ``` -<p>Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <code><td></code> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.</p> +Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément `<td>` crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne. -<p>Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/tr"><tr></a></code></strong> (« tr » comme « table rangée »). Étudions cela maintenant.</p> +Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** (« tr » comme « table rangée »). Étudions cela maintenant. -<ol> - <li>Placez les quatre cellules que vous avez créées entre deux balises <code><tr></code> ainsi : +1. Placez les quatre cellules que vous avez créées entre deux balises `<tr>` ainsi : - <pre class="brush: html"><tr> - <td>Bonjour, je suis votre première cellule </td> - <td>je suis votre deuxième cellule </td> - <td>je suis votre troisième cellule </td> - <td>je suis votre quatrième cellule </td> -</tr></pre> - </li> - <li>Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <code><tr></code>, et comprend chaque cellule encadrée par <code><td></code>.</li> -</ol> + ```html + <tr> + <td>Bonjour, je suis votre première cellule </td> + <td>je suis votre deuxième cellule </td> + <td>je suis votre troisième cellule </td> + <td>je suis votre quatrième cellule </td> + </tr> + ``` -<p>Il devrait en résulter un tableau qui ressemble à :</p> +2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de `<tr>`, et comprend chaque cellule encadrée par `<td>`. + +Il devrait en résulter un tableau qui ressemble à : <table> - <tbody> - <tr> - <td>Bonjour, je suis votre première cellule.</td> - <td>je suis votre deuxième cellule.</td> - <td>je suis votre troisième cellule</td> - <td>je suis votre quatrième cellule</td> - </tr> - <tr> - <td>Deuxième ligne, première cellule.</td> - <td>Cellule 2.</td> - <td>Cellule 3.</td> - <td>Cellule 4.</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Bonjour, je suis votre première cellule.</td> + <td>je suis votre deuxième cellule.</td> + <td>je suis votre troisième cellule</td> + <td>je suis votre quatrième cellule</td> + </tr> + <tr> + <td>Deuxième ligne, première cellule.</td> + <td>Cellule 2.</td> + <td>Cellule 3.</td> + <td>Cellule 4.</td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p> -</div> - -<h2 id="Ajouter_des_en-têtes_avec_<th>">Ajouter des en-têtes avec <th></h2> - -<p>Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :</p> - -<pre class="brush: html"><table> - <tr> - <td>&nbsp;</td> - <td>Knocky</td> - <td>Flor</td> - <td>Ella</td> - <td>Juan</td> - </tr> - <tr> - <td>Race</td> - <td>Jack Russell</td> - <td>Poodle</td> - <td>Streetdog</td> - <td>Cocker Spaniel</td> - </tr> - <tr> - <td>Age</td> - <td>16</td> - <td>9</td> - <td>10</td> - <td>5</td> - </tr> - <tr> - <td>Propriétaire</td> - <td>Belle-mère</td> - <td>Moi</td> - <td>Moi</td> - <td>Belle-soeur</td> - </tr> - <tr> - <td>Habitudes alimentaires</td> - <td>Mange tous les restes</td> - <td>Grignotte la nourriture</td> - <td>Mange copieusement</td> - <td>Mange jusqu'à ce qu'il éclate</td> - </tr> -</table></pre> - -<p>Maintenant, le rendu du tableau réel :</p> +> **Note :** Vous pouvez également trouver cela sur GitHub [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/simple-table.html)). + +## Ajouter des en-têtes avec \<th> + +Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source : +```html <table> - <tbody> <tr> - <td></td> - <td>Knocky</td> - <td>Flor</td> - <td>Ella</td> - <td>Juan</td> + <td> </td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> </tr> <tr> - <td>Race</td> - <td>Jack Russell</td> - <td>Poodle</td> - <td>Streetdog</td> - <td>Cocker Spaniel</td> + <td>Race</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> </tr> <tr> - <td>Age</td> - <td>16</td> - <td>9</td> - <td>10</td> - <td>5</td> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> </tr> <tr> - <td>Propriétaire</td> - <td>Belle-mère</td> - <td>Moi</td> - <td>Moi</td> - <td>Belle-soeur</td> + <td>Propriétaire</td> + <td>Belle-mère</td> + <td>Moi</td> + <td>Moi</td> + <td>Belle-soeur</td> </tr> <tr> - <td>Habitudes alimentaires</td> - <td>Mange tous les restes</td> - <td>Grignotte la nourriture</td> - <td>Mange copieusement</td> - <td>Mange jusqu'à ce qu'il éclate</td> + <td>Habitudes alimentaires</td> + <td>Mange tous les restes</td> + <td>Grignotte la nourriture</td> + <td>Mange copieusement</td> + <td>Mange jusqu'à ce qu'il éclate</td> </tr> - </tbody> </table> +``` -<p>Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.</p> +Maintenant, le rendu du tableau réel : -<h3 id="Apprentissage_actif_en-tête_de_tableau">Apprentissage actif : en-tête de tableau</h3> +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Race</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Propriétaire</td> + <td>Belle-mère</td> + <td>Moi</td> + <td>Moi</td> + <td>Belle-soeur</td> + </tr> + <tr> + <td>Habitudes alimentaires</td> + <td>Mange tous les restes</td> + <td>Grignotte la nourriture</td> + <td>Mange copieusement</td> + <td>Mange jusqu'à ce qu'il éclate</td> + </tr> + </tbody> +</table> -<p>Améliorons ce tableau.</p> +Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux. -<ol> - <li>En premier lieu, faites une copie des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.</li> - <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/th"><th></a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code><td></code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code><td></code> des cellules entourant le tableau par des <code><th></code>.</li> - <li>Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.</li> -</ol> +### Apprentissage actif : en-tête de tableau -<div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p> -</div> +Améliorons ce tableau. -<h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3> +1. En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus. +2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`. +3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes. -<p>Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.</p> +> **Note :** Vous pouvez trouver notre exemple achevé [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)). -<div class="note"> -<p><strong>Note :</strong> Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p> -</div> +### Pourquoi les en-têtes sont-ils utiles ? -<p>Les en-têtes de tableau ont un autre avantage — avec l'attribut <code>scope</code> (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.</p> +Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure. -<h2 id="Étendre_des_cellules_sur_plusieurs_lignes_ou_colonnes">Étendre des cellules sur plusieurs lignes ou colonnes</h2> +> **Note :** Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer. -<p>Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.</p> +Les en-têtes de tableau ont un autre avantage — avec l'attribut `scope` (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile. -<p>Le code initial ressemble à cela :</p> +## Étendre des cellules sur plusieurs lignes ou colonnes -<pre class="brush: html"><table> - <tr> - <th>Animaux</th> - </tr> - <tr> - <th>Hippopotame</th> - </tr> - <tr> - <th>Cheval</th> - <td>Jument</td> - </tr> - <tr> - <td>Étalon</td> - </tr> - <tr> - <th>Crocodile</th> - </tr> - <tr> - <th>Poulet</th> - <td>Coq</td> - </tr> - <tr> - <td>Coq</td> - </tr> -</table></pre> +Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau. -<p>Mais le résultat ne nous donne pas ce que nous voulions :</p> +Le code initial ressemble à cela : +```html <table> - <tbody> <tr> - <th>Animaux</th> + <th>Animaux</th> </tr> <tr> - <th>Hippopotame</th> + <th>Hippopotame</th> </tr> <tr> - <th>Cheval</th> - <td>Jument</td> + <th>Cheval</th> + <td>Jument</td> </tr> <tr> - <td>Étalon</td> + <td>Étalon</td> </tr> <tr> - <th>Crocodile</th> + <th>Crocodile</th> </tr> <tr> - <th>Poulet</th> - <td>Coq</td> + <th>Poulet</th> + <td>Coq</td> </tr> <tr> - <td>Coq</td> + <td>Coq</td> </tr> - </tbody> </table> +``` -<p>Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs <code>colspan</code> et <code>rowspan</code>, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, <code>colspan="2"</code> génère une cellule sur deux colonnes.</p> +Mais le résultat ne nous donne pas ce que nous voulions : -<p>Utilisons <code>colspan</code> et <code>rowspan</code> pour améliorer ce tableau.</p> +<table> + <tbody> + <tr> + <th>Animaux</th> + </tr> + <tr> + <th>Hippopotame</th> + </tr> + <tr> + <th>Cheval</th> + <td>Jument</td> + </tr> + <tr> + <td>Étalon</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Poulet</th> + <td>Coq</td> + </tr> + <tr> + <td>Coq</td> + </tr> + </tbody> +</table> -<ol> - <li>Tout d'abord, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.</li> - <li>Ensuite, utilisez <code>colspan</code> pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.</li> - <li>Enfin, utilisez <code>rowspan</code> pour mettre « Cheval » and « Poulet » sur deux lignes.</li> - <li>Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.</li> -</ol> +Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs `colspan` et `rowspan`, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, `colspan="2"` génère une cellule sur deux colonnes. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p> -</div> +Utilisons `colspan` et `rowspan` pour améliorer ce tableau. -<h2 id="Attribuer_un_style_commun_aux_colonnes">Attribuer un style commun aux colonnes</h2> +1. Tout d'abord, faites une copie locale de nos fichiers [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus. +2. Ensuite, utilisez `colspan` pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes. +3. Enfin, utilisez `rowspan` pour mettre « Cheval » and « Poulet » sur deux lignes. +4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration. -<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/fr/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/fr/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque <code><td></code> ou <code><th></code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p> +> **Note :** Vous pouvez trouver l'exemple achevé dans [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)). -<h3>Premier exemple</h3> -<p>Observez l'exemple simple suivant :</p> +## Attribuer un style commun aux colonnes -<pre class="brush: html"><table> - <tr> - <th>Data 1</th> - <th style="background-color: yellow">Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td style="background-color: yellow">Orange</td> - </tr> - <tr> - <td>Robots</td> - <td style="background-color: yellow">Jazz</td> - </tr> -</table></pre> +Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}. -<p>Ce qui nous donne comme résultat :</p> -<p>{{EmbedLiveSample("Premier_exemple")}}</p> +### Premier exemple + +Observez l'exemple simple suivant : + +```html +<table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table> +``` -<p>Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une <code>classe</code> dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <code><col></code>. Les éléments <code><col></code> sont utilisés dans un conteneur <code><colgroup></code> juste en-dessous de la balise <code><table></code>. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit :</p> +Ce qui nous donne comme résultat : -<h3>Autres exemples</h3> +{{EmbedLiveSample("Premier_exemple")}} -<pre class="brush: html"> <table> - <colgroup> - <col> - <col style="background-color: yellow"> - </colgroup> - <tr> - <th>Data 1</th> - <th>Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td>Orange</td> - </tr> - <tr> - <td>Robots</td> - <td>Jazz</td> - </tr> -</table></pre> +Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une `classe` dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit : -<p>En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <code><col></code> vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.</p> +### Autres exemples -<p>Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <code><col></code> avec un attribut span, comme ceci :</p> +```html + <table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table> +``` -<pre class="brush: html"><colgroup> - <col style="background-color: yellow" span="2"> -</colgroup></pre> +En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>` vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne. -<p>Comme <code>colspan</code> et <code>rowspan</code>, <code>span</code> reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.</p> +Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément `<col>` avec un attribut span, comme ceci : -<h3 id="Apprentissage_actif_colgroup_et_col">Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> +```html +<colgroup> + <col style="background-color: yellow" span="2"> +</colgroup> +``` -<p>Maintenant, il est temps de vous y mettre vous-même.</p> +Comme `colspan` et `rowspan`, `span` reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique. -<p>Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.</p> +### Apprentissage actif : `colgroup` et `col` -<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> +Maintenant, il est temps de vous y mettre vous-même. -<p>Recréez le tableau en suivant les étapes ci-dessous.</p> +Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne. -<ol> - <li>Tout d'abord, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.</li> - <li>Ajoutez un élément <code><colgroup></code> au début du tableau, juste en dessous de la balise <code><table></code>,dans lequel vous pouvez ajouter vos éléments <code><col></code> (voir les étapes restantes ci-dessous).</li> - <li>Les deux premières colonnes doivent rester sans style.</li> - <li>Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut <code>style</code> est <code>background-color:#97DB9A;</code></li> - <li>Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li> - <li>Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut <code>style</code> est <code>background-color: #97DB9A;</code></li> - <li>Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut <code>style</code> sont <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> - <li>Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li> -</ol> +{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}} -<p>Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) sur GitHub .</p> +Recréez le tableau en suivant les étapes ci-dessous. -<h2 id="Résumé">Résumé</h2> +1. Tout d'abord, faites une copie locale du fichier [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes. +2. Ajoutez un élément `<colgroup>` au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous). +3. Les deux premières colonnes doivent rester sans style. +4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut `style` est `background-color:#97DB9A;` +5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut `style` est `width: 42px;` +6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut `style` est `background-color: #97DB9A;` +7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut `style` sont `background-color:#DCC48E; border:4px solid #C1437A;` +8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut `style` est `width: 42px;` -<p>Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.</p> +Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à[ voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub . -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> +## Résumé +Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants. +{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases des tableaux en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des tableaux en HTML et accessibilité</a></li> - <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> -</ul> -</div> +- [Bases des tableaux en HTML](/fr/docs/Learn/HTML/Tables/Basics) +- [Caractéristiques avancées des tableaux en HTML et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md index e29779b351..6e5436c43b 100644 --- a/files/fr/learn/html/tables/index.md +++ b/files/fr/learn/html/tables/index.md @@ -13,32 +13,26 @@ tags: translation_of: Learn/HTML/Tables original_slug: Apprendre/HTML/Tableaux --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/fr/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p> +Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de [CSS](/fr/docs/Learn/CSS) pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>.</p> +Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML). -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> +> **Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants :</p> +Ce module contient les articles suivants : -<dl> - <dt><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases à propos des Tableaux en HTML</a></dt> - <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</dd> - <dt><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des Tableaux HTML et accessibilité</a></dt> - <dd>Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.</dd> -</dl> +- [Bases à propos des Tableaux en HTML](/fr/docs/Learn/HTML/Tables/Basics) + - : Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style. +- [Caractéristiques avancées des Tableaux HTML et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) + - : Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels. -<h2 id="Évaluation_des_connaissances">Évaluation des connaissances</h2> +## Évaluation des connaissances -<dl> - <dt><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></dt> - <dd>Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.</dd> -</dl> +- [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) + - : Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML. diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md index 303bf2fdf9..c99f0c9cc5 100644 --- a/files/fr/learn/html/tables/structuring_planet_data/index.md +++ b/files/fr/learn/html/tables/structuring_planet_data/index.md @@ -4,70 +4,65 @@ slug: Learn/HTML/Tables/Structuring_planet_data translation_of: Learn/HTML/Tables/Structuring_planet_data original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} -<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<p>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</p> +Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous + les articles de ce module. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Vérifier la compréhension des tableaux HTML et des fonctionnalités + associées. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> - -<p>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</p> +## Point de départ -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code><script></code>/<code><style></code> dans la page HTML.</p> -</div> +Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur. -<h2 id="Résumé_du_projet">Résumé du projet</h2> +> **Note :** Vous pouvez aussi utiliser un site comme[JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne `<script>`/`<style>` dans la page HTML. -<p>Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.</p> +## Résumé du projet -<p>Le tableau terminé devrait ressembler à celui-ci :</p> +Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous. -<p><img alt="" src="assessment-table.png"></p> +Le tableau terminé devrait ressembler à celui-ci : -<p>Vous pouvez aussi <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder l'exemple ici</a> (sans regarder le code source — ne trichez pas !)</p> + -<ul> -</ul> +Vous pouvez aussi [regarder l'exemple ici](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) (sans regarder le code source — ne trichez pas !) -<h2 id="Étapes_à_suivre">Étapes à suivre</h2> +## Étapes à suivre -<p>Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier <code>planets-data.txt</code>. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.</p> +Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier `planets-data.txt`. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme. -<ol> - <li>Ouvrez votre copie de <code>blank-template.html</code>, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.</li> - <li>Ajoutez la légende fournie à votre tableau.</li> - <li>Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.</li> - <li>Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.</li> - <li>Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.</li> - <li>Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.</li> - <li>Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).</li> -</ol> +1. Ouvrez votre copie de `blank-template.html`, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple. +2. Ajoutez la légende fournie à votre tableau. +3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes. +4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes. +5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée. +6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes. +7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes). -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Conseils et astuces -<ul> - <li>La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.</li> - <li>Les en-têtes regrouppant des lignes (<em>exemple : les planètes joviennes</em>) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : <em>Saturne</em>) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.</li> - <li>une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.</li> -</ul> +- La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes. +- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes. +- une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre. -<h2 id="Correction">Correction</h2> +## Correction -<p>Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, ou dans le <a href="irc://irc.mozilla.org/mdn">#mdn</a> canal IRC sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !</p> +Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294), ou dans le [#mdn](irc://irc.mozilla.org/mdn) canal IRC sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice — il n'y a rien à gagner en trichant ! -<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> +{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}} |