diff options
Diffstat (limited to 'files/fr/apprendre/html/tableaux/basics/index.html')
| -rw-r--r-- | files/fr/apprendre/html/tableaux/basics/index.html | 36 |
1 files changed, 17 insertions, 19 deletions
diff --git a/files/fr/apprendre/html/tableaux/basics/index.html b/files/fr/apprendre/html/tableaux/basics/index.html index d06b2f9bf1..b218a2b677 100644 --- a/files/fr/apprendre/html/tableaux/basics/index.html +++ b/files/fr/apprendre/html/tableaux/basics/index.html @@ -44,7 +44,7 @@ translation_of: Learn/HTML/Tables/Basics </tbody> </table> -<h2 id="Qu'est-ce_qu'un_tableau">Qu'est-ce qu'un tableau ?</h2> +<h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2> <p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. <span class="translation">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</span>.</p> @@ -66,7 +66,7 @@ translation_of: Learn/HTML/Tables/Basics <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> + <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> @@ -103,7 +103,7 @@ translation_of: Learn/HTML/Tables/Basics <td>108.2</td> <td>464</td> <td>0</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">Terre</th> @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Tables/Basics <td>1433.5</td> <td>-140</td> <td>62</td> - <td> </td> + <td></td> </tr> <tr> <th rowspan="2" scope="rowgroup">Géantes glacées</th> @@ -166,7 +166,7 @@ translation_of: Learn/HTML/Tables/Basics <td>2872.5</td> <td>-195</td> <td>27</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">Neptune</th> @@ -178,7 +178,7 @@ translation_of: Learn/HTML/Tables/Basics <td>4495.1</td> <td>-200</td> <td>14</td> - <td> </td> + <td></td> </tr> <tr> <th colspan="2" scope="rowgroup">Planètes naines</th> @@ -226,10 +226,10 @@ translation_of: Learn/HTML/Tables/Basics <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> + <pre class="brush: html notranslate"><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> + <pre class="brush: html notranslate"><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> @@ -243,7 +243,7 @@ translation_of: Learn/HTML/Tables/Basics <ol> <li>Placez les quatre cellules que vous avez créées entre deux balises <code><tr></code> ainsi : - <pre class="brush: html"><tr> + <pre class="brush: html notranslate"><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> @@ -280,7 +280,7 @@ translation_of: Learn/HTML/Tables/Basics <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> +<pre class="brush: html notranslate"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -323,7 +323,7 @@ translation_of: Learn/HTML/Tables/Basics <table> <tbody> <tr> - <td> </td> + <td></td> <td>Knocky</td> <td>Flor</td> <td>Ella</td> @@ -368,7 +368,7 @@ translation_of: Learn/HTML/Tables/Basics <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 tableu en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/en-US/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> par des <code><th></code>.</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="/en-US/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> @@ -392,7 +392,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Le code initial ressemble à cela :</p> -<pre class="brush: html"><table> +<pre class="brush: html notranslate"><table> <tr> <th>Animaux</th> </tr> @@ -472,7 +472,7 @@ translation_of: Learn/HTML/Tables/Basics <p>Observez l'exemple simple suivant :</p> -<pre class="brush: html"><table> +<pre class="brush: html notranslate"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -508,7 +508,7 @@ translation_of: Learn/HTML/Tables/Basics <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> -<pre class="brush: html"> <table> +<pre class="brush: html notranslate"> <table> <colgroup> <col> <col style="background-color: yellow"> @@ -531,7 +531,7 @@ translation_of: Learn/HTML/Tables/Basics <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> -<pre class="brush: html"><colgroup> +<pre class="brush: html notranslate"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> @@ -566,7 +566,7 @@ translation_of: Learn/HTML/Tables/Basics <div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> -<p> </p> + <div> <h2 id="Dans_ce_module">Dans ce module</h2> @@ -577,5 +577,3 @@ translation_of: Learn/HTML/Tables/Basics <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> </ul> </div> - -<p> </p> |