path: root/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html

---
title: Tableaux
slug: conflicting/Learn/CSS/Building_blocks/Styling_tables
tags:
  - CSS
  - CSS:Premiers_pas
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
original_slug: CSS/Premiers_pas/Tableaux
---
<p> </p>
<p>Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.</p>
<p>Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.</p>
<h3 id="Information_:_d.27autres_s.C3.A9lecteurs" name="Information_:_d.27autres_s.C3.A9lecteurs">Information : d'autres sélecteurs</h3>
<p>CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.</p>
<p>Voici un résumé des sélecteurs basés sur les relations :</p>
<table style="margin-left: 2em;">
  <tbody>
    <tr>
      <td style="width: 10em;"><strong>Sélecteur</strong></td>
      <td><strong>Sélectionne</strong></td>
    </tr>
    <tr>
      <td><code>A E</code></td>
      <td>Tout élément E qui est un <em>descendant</em> d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, <em>etc</em>.)</td>
    </tr>
    <tr>
      <td><code>A &gt; E</code></td>
      <td>Tout élément E qui est un enfant direct d'un élément A</td>
    </tr>
    <tr>
      <td><code>E:first-child</code></td>
      <td>Tout élément E qui est le premier enfant de son parent</td>
    </tr>
    <tr>
      <td><code>B + E</code></td>
      <td>Tout élément E qui est le <em>frère</em> d'un élément B (c'est-à-dire l'enfant suivant du même parent)</td>
    </tr>
  </tbody>
</table>
<p>Vous pouvez combiner ceux-ci pour exprimer des relations complexes.</p>
<p>Vous pouvez également utiliser le symbole <code>*</code> (astérisque) pour désigner « n'importe quel élément. »</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Un tableau HTML a un attribut <code>id</code>, mais ses lignes et cellules n'ont pas d'identifiants individuels :
        <div style="width: 30em;">
          <pre class="eval">
&lt;TABLE id="data-table-1"&gt;
...
&lt;TR&gt;
&lt;TD&gt;Préfixe&lt;/TD&gt;
&lt;TD&gt;0001&lt;/TD&gt;
&lt;TD&gt;par défaut&lt;/TD&gt;
&lt;/TR&gt;
...
</pre>
        </div>
        <p>Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :</p>
        <div style="width: 45em;">
          <p><code>#data-table-1 td:first-child {font-weight: bolder;}</code> <code>#data-table-1 td:first-child + td {font-family: monospace;}</code></p>
        </div>
        <p>Le résultat ressemble à ceci :</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <table style="width: 18em; margin-right: 2em;">
                  <tbody>
                    <tr>
                      <td><strong>Préfixe</strong></td>
                      <td><code>0001</code></td>
                      <td>par défaut</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Plus de détails</caption>
  <tbody>
    <tr>
      <td>Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité.
        <p>Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs <code>class</code> ou <code>id</code> sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail.</p>
        <p>Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments.</p>
        <p>Pour plus de détails sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Information_:_les_tableaux" name="Information_:_les_tableaux">Information : les tableaux</h3>
<p>Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.</p>
<p>Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.</p>
<p>N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (<a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a>) sont plus appropriées pour cela.</p>
<h4 id="Structure_d.27un_tableau" name="Structure_d.27un_tableau">Structure d'un tableau</h4>
<p>Dans un tableau, chaque élément d'information est affiché dans une <em>cellule</em>.</p>
<p>Une rangée horizontale de cellules forme une <em>ligne</em>.</p>
<p>Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un <em>en-tête</em> (header) de tableau. Un groupe spécial de lignes en fin de tableau est un <em>pied</em> (footer) de tableau. Les lignes principales sont le <em>corps</em> (body) du tableau, et peuvent également former des groupes.</p>
<p>Les cellules alignées verticalement forment une <em>colonne</em>, mais les colonnes ont une utilisation limitée en CSS.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes.
        <p>La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau.</p>
        <p>Il y a deux colonnes.</p>
      </td>
    </tr>
  </tbody>
</table>
<p><br>
  Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.</p>
<h4 id="Bordures" name="Bordures">Bordures</h4>
<p>Les cellules n'ont pas de marge extérieure (margin).</p>
<p>Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété <code>border-spacing</code> du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété <code>border-collapse</code> du tableau à <code>collapse</code>.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Voici trois tableaux.
        <p>Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec <code>collapse</code> :</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td style="padding-right: 2em;">
                <table style="">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Trèfle</td>
                      <td style="border: 1px solid #c00; text-align: center;">Cœur</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Carreau</td>
                      <td style="border: 1px solid #c00; text-align: center;">Pique</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 2em;">
                <table style="">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Trèfle</td>
                      <td style="border: 1px solid #c00; text-align: center;">Cœur</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Carreau</td>
                      <td style="border: 1px solid #c00; text-align: center;">Pique</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 6em;">
                <table style="border-collapse: collapse;">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Trèfle</td>
                      <td style="border: 1px solid #c00; text-align: center;">Cœur</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #c00; text-align: center;">Carreau</td>
                      <td style="border: 1px solid #c00; text-align: center;">Pique</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="L.C3.A9gendes" name="L.C3.A9gendes">Légendes</h4>
<p>Une <em>légende</em> (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.</p>
<p>Pour la déplacer en bas, définissez sa propriété <code>caption-side</code> à <code>bottom</code> (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.</p>
<p>Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Ce tableau a une légende placée en dessous :
        <div style="width: 30em;">
          <pre class="eval">
#demo-table &gt; caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
  }
</pre>
        </div>
        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <table>
                  <caption>
                    Suites</caption>
                  <tbody>
                    <tr>
                      <td>
                        <table style="border-collapse: collapse;">
                          <tbody>
                            <tr>
                              <td style="border: 1px solid gray; text-align: center;">Trèfle</td>
                              <td style="border: 1px solid gray; text-align: center;">Cœur</td>
                            </tr>
                            <tr>
                              <td style="border: 1px solid gray; text-align: center;">Carreau</td>
                              <td style="border: 1px solid gray; text-align: center;">Pique</td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Cellules_vides" name="Cellules_vides">Cellules vides</h4>
<p>Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant <code>empty-cells: show;</code> pour l'élément <code>table</code>.</p>
<p>Vous pouvez les masquer en spécifiant <code>empty-cells: hide;</code>. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé.
        <p>Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td style="padding-right: 2em;">
                <table style="background-color: #dfd;">
                  <tbody>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee;"> </td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td style="padding-right: 6em;">
                <table style="background-color: #dfd;">
                  <tbody>
                    <tr>
                      <td> </td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td>
                    </tr>
                    <tr>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td>
                      <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Plus de détails</caption>
  <tbody>
    <tr>
      <td>Pour des informations détaillées concernant les tableaux, consultez <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> dans la spécification CSS.
        <p>Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.</p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Action_:_habillage_d.27un_tableau" name="Action_:_habillage_d.27un_tableau">Action : habillage d'un tableau</h3>
<p>Créez un nouveau document HTML, <code>doc3.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p>
<div style="width: 48em; height: 12em; overflow: auto;">
  <pre>&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Document exemple 3&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style3.css"&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;

&lt;TABLE id="demo-table"&gt;
&lt;CAPTION&gt;Les océans&lt;/CAPTION&gt;

&lt;THEAD&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;Surface&lt;/TH&gt;
&lt;TH&gt;Profondeur moyenne&lt;/TH&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;&lt;/TH&gt;
&lt;TH&gt;millions de km&lt;SUP&gt;2&lt;/SUP&gt;&lt;/TH&gt;
&lt;TH&gt;m&lt;/TH&gt;
&lt;/TR&gt;
&lt;/THEAD&gt;

&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH&gt;Arctique&lt;/TH&gt;
&lt;TD&gt;13 000&lt;/TD&gt;
&lt;TD&gt;1 200&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Atlantique&lt;/TH&gt;
&lt;TD&gt;87 000&lt;/TD&gt;
&lt;TD&gt;3 900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Pacifique&lt;/TH&gt;
&lt;TD&gt;180 000&lt;/TD&gt;
&lt;TD&gt;4 000&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Indien&lt;/TH&gt;
&lt;TD&gt;75 000&lt;/TD&gt;
&lt;TD&gt;3 900&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Antarctique&lt;/TH&gt;
&lt;TD&gt;20 000&lt;/TD&gt;
&lt;TD&gt;4 500&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TBODY&gt;

&lt;TFOOT&gt;
&lt;TR&gt;
&lt;TH&gt;Total&lt;/TH&gt;
&lt;TD&gt;361 000&lt;/TD&gt;
&lt;TD&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TH&gt;Moyenne&lt;/TH&gt;
&lt;TD&gt;72 000&lt;/TD&gt;
&lt;TD&gt;3 800&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TFOOT&gt;

&lt;/TABLE&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>
<p>Créez une nouvelle feuille de style, <code>style3.css</code>. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p>
<div style="width: 48em; height: 12em; overflow: auto;">
  <pre>/*** Style pour doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
  }

#demo-table &gt; caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
  }


/* règles de base partagées */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
  }

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
  }


/* en-tête */
#demo-table &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
  }

#demo-table &gt; thead &gt; tr + tr &gt; th {
  font-style: italic;
  color: gray;
  }

/* taille des valeurs en exposant */
#demo-table sup {
  font-size: 75%;
  }

/* corps du tableau */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
  }

#demo-table tbody th:after {
  content: " :";
  }


/* pied du tableau */
#demo-table tfoot {
  font-weight: bold;
  }

#demo-table tfoot th {
  color: blue;
  }

#demo-table tfoot th:after {
  content: " :";
  }

#demo-table &gt; tfoot td {
  background-color: #cee;
  }

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
  }
</pre>
</div>
<p>Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :</p>
<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
  <tbody>
    <tr>
      <td>
        <div>
          <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Les océans</p>
          <div style="border: 1px solid #7a7; background-color: #efe;">
            <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
              <tbody>
                <tr style="text-align: center; color: blue;">
                  <th> </th>
                  <th>Surface</th>
                  <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th>
                </tr>
                <tr style="font-style: italic; color: gray;">
                  <th> </th>
                  <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th>
                  <th style="padding-left: .5em; padding-right: .5em;">m</th>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Arctique :</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13 000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1 200</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Atlantique :</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87 000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Pacifique :</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180 000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 000</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em;">Indien :</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75 000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td>
                </tr>
                <tr>
                  <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20 000</td>
                  <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 500</td>
                </tr>
                <tr>
                  <th style="padding-right: .5em; color: blue;">Total :</th>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
                </tr>
                <tr>
                  <th style="padding-right: .5em; color: blue;">Moyenne :</th>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td>
                  <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.</p>
<p>Voici quelques notes à propos de ce tableau :</p>
<ul>
  <li>La légende (caption) se trouve à l'extérieur de la bordure du tableau.</li>
  <li>Si une taille minimale de police est définie dans les options, elle peut affecter l'exposant dans km<sup>2</sup>.</li>
  <li>Trois cellules sont vides. Deux d'entre-elles laissent le fond du tableau visible. La troisème a un fond et une bordure supérieure.</li>
  <li>Les deux points sont ajoutés par la feuille de style.</li>
</ul>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
  <caption>
    Challenges</caption>
  <tbody>
    <tr>
      <td>Modifiez la feuille de style afin que le tableau ressemble à ceci :
        <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <div>
                  <div style="border: 1px solid #7a7; background-color: #efe;">
                    <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
                      <tbody>
                        <tr style="text-align: center; color: blue;">
                          <th> </th>
                          <th>Surface</th>
                          <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th>
                        </tr>
                        <tr style="font-style: italic; color: gray;">
                          <th> </th>
                          <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th>
                          <th style="padding-left: .5em; padding-right: .5em;">m</th>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Arctique :</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13 000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1 200</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Atlantique :</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87 000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Pacifique :</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180 000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 000</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em;">Indien :</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75 000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td>
                        </tr>
                        <tr>
                          <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20 000</td>
                          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 500</td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em; color: blue;">Total :</th>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
                        </tr>
                        <tr>
                          <th style="padding-right: .5em; color: blue;">Moyenne :</th>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td>
                          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Les océans</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<p> </p>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Tableaux" title="Talk:fr/CSS/Premiers_pas/Tableaux">page de discussion</a>.</p>
<p>Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> dans la spécification CSS.</p>
<p>La page suivante revient sur le but et la structure des feuilles de style CSS : <strong><a href="/fr/docs/CSS/Premiers_pas/Médias" title="fr/CSS/Premiers_pas/Médias">Médias</a></strong>.</p>