From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- files/fr/apprendre/html/tableaux/basics/index.html | 36 ++++++++++------------ 1 file changed, 17 insertions(+), 19 deletions(-) (limited to 'files/fr/apprendre') 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 -

Qu'est-ce qu'un tableau ?

+

Qu'est-ce qu'un tableau ?

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.

@@ -66,7 +66,7 @@ translation_of: Learn/HTML/Tables/Basics Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric). -   + Nom Masse (1024kg) Diamètre (km) @@ -103,7 +103,7 @@ translation_of: Learn/HTML/Tables/Basics 108.2 464 0 -   + Terre @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Tables/Basics 1433.5 -140 62 -   + Géantes glacées @@ -166,7 +166,7 @@ translation_of: Learn/HTML/Tables/Basics 2872.5 -195 27 -   + Neptune @@ -178,7 +178,7 @@ translation_of: Learn/HTML/Tables/Basics 4495.1 -200 14 -   + Planètes naines @@ -226,10 +226,10 @@ translation_of: Learn/HTML/Tables/Basics
  • Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
  • Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
  • Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - 
    <td>Bonjour, je suis votre première cellule.</td>
    + 
    <td>Bonjour, je suis votre première cellule.</td>
  • 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 : - 
    <td>Bonjour, je suis votre première cellule </td>
+  
    <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>
    
@@ -243,7 +243,7 @@ translation_of: Learn/HTML/Tables/Basics
 
      
  
    1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi :
 
-  
      <tr>
+  
      <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
 
 
      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 :
      
 
-
      <table>
+
      <table>
   <tr>
     <td>&nbsp;</td>
     <td>Knocky</td>
@@ -323,7 +323,7 @@ translation_of: Learn/HTML/Tables/Basics
 
-   
+   
@@ -368,7 +368,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
        
  
      1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
        2. 
- 
      2. Pour reconnaître les en-têtes de tableu en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <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> par des <th>.
        3. 
+ 
      3. 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> (« 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>.
        4. 
  
      4. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
        5. 
 
      
 
@@ -392,7 +392,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      Le code initial ressemble à cela :
      
 
-
      <table>
+
      <table>
   <tr>
     <th>Animaux</th>
   </tr>
@@ -472,7 +472,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      Observez l'exemple simple suivant :
      
 
-
      <table>
+
      <table>
   <tr>
     <th>Data 1</th>
     <th style="background-color: yellow">Data 2</th>
@@ -508,7 +508,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      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 :
      
 
-
       <table>
+
       <table>
    <colgroup>
     <col>
     <col style="background-color: yellow">
@@ -531,7 +531,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      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 :
      
 
-
      <colgroup>
+
      <colgroup>
   <col style="background-color: yellow" span="2">
 </colgroup>
      
 
@@ -566,7 +566,7 @@ translation_of: Learn/HTML/Tables/Basics
 
 
      {{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
      
 
-
       
      
+
 
 
      
 
      Dans ce module
      
@@ -577,5 +577,3 @@ translation_of: Learn/HTML/Tables/Basics
  
    2. Structuration de données sur les planètes
      3. 
 
 
      
-
-
       
      
-- 
cgit v1.2.3-54-g00ecf


      
  
   
       
    Knocky
    Flor
    Ella