unslug fr: move

1 files changed, 201 insertions, 0 deletions

diff --git a/files/fr/conflicting/web/css/border-collapse/index.html b/files/fr/conflicting/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..3a1430f65e
--- /dev/null
+++ b/files/fr/conflicting/web/css/border-collapse/index.html
@@ -0,0 +1,201 @@
+---
+title: Tableaux
+slug: Astuces_CSS/Tableaux
+tags:
+  - CSS
+translation_of: Web/CSS/border-collapse
+translation_of_original: Useful_CSS_tips/Tables
+---
+<h3 id="Centrage" name="Centrage">Centrage</h3>
+<p>Si vous voulez centrer un tableau, il n'est pas correct d'utiliser</p>
+<dl>
+  <dd>
+    <code>text-align: center</code></dd>
+</dl>
+<p>dans l'élément parent. La méthode correcte est d'appliquer le style</p>
+<dl>
+  <dd>
+    <code>margin: 0px auto 0px auto</code></dd>
+</dl>
+<p>à la table elle-même.</p>
+<table style="border-collapse: collapse; margin: 0px auto 0px auto;">
+  <tbody>
+    <tr>
+      <td colspan="3" style="border: 1px solid black;">Table avec margin: 0px auto 0px auto;</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Bordures" name="Bordures">Bordures</h3>
+<p>Voici un tableau standard avec <code>cellspacing</code> non nul et une bordure de cellule de 1px :</p>
+<table>
+  <tbody>
+    <tr>
+      <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="4"</code></td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+  </tbody>
+</table>
+<p>Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :</p>
+<table>
+  <tbody>
+    <tr>
+      <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code></td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+  </tbody>
+</table>
+<p>Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme <b>séparé</b>. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle <code>collapse</code> doit être utilisé.</p>
+<table style="border-collapse: collapse;">
+  <tbody>
+    <tr>
+      <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code><br>
+        et <code>border-collapse:collapse;</code></td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+      <td style="border: 1px solid black;">Contenu cellule</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Style_de_colonne" name="Style_de_colonne">Style de colonne</h3>
+<p>Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.</p>
+<pre> &lt;style type="text/css"&gt;
+   td { background-color: #eeeeee; }
+   td.CoulNoire { background-color: #cccccc; }
+ &lt;/style&gt;
+
+&lt;table&gt;
+ &lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
+    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="CoulNoire "&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
+    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="CoulNoire "&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
+    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="CoulNoire "&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
+    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="CoulNoire "&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
+    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="CoulNoire "&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+ &lt;/table&gt;
+</pre>
+<p>Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à <i>styler</i>.</p>
+<p>Pour les navigateurs supportant les <i>sélecteurs adjacents</i>, il existe une solution alternative en pure CSS</p>
+<pre>&lt;style type="text/css"&gt;
+    /* Style pour toutes les lignes */
+  tr { font: bold 16px Arial; }
+    /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */
+  tr + tr { font: 12px Arial; }
+
+    /* Style pour toutes les colonnes */
+  td { background-color: #cccccc; }
+    /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */
+  td + td { background-color: #eeeeee; }
+    /* Style pour les colonnes avec 4 colonnes avant: 5e */
+  td + td + td + td + td { background-color: #cccccc; }
+&lt;/style&gt;
+
+&lt;table&gt;
+  &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+<h3 id="En-t.C3.AAte_fixe" name="En-t.C3.AAte_fixe">En-tête fixe</h3>
+<p>Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.</p>
+<div class="note">
+  Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur</div>
+<pre>&lt;style type="text/css"&gt;
+table {
+	width: 20em;                    /* esthétique */
+	border-collapse: separate;      /* par défaut */
+/*  border-collapse: collapse;          /* Boggué depuis 2002 avec overflow-y: auto sur tbody */
+	border-spacing: 0;              /* contournement du bug */
+}
+tbody {
+	height: 10em;                   /* définit une hauteur */
+	overflow-x: hidden;             /* esthétique */
+	overflow-y: auto;               /* permet de scroller les cellules */
+}
+td {
+	border-left: 1px solid blue;    /* contournement du bug */
+	border-bottom: 1px solid blue;  /* contournement du bug */
+}
+&lt;/style&gt;
+
+&lt;table&gt;
+  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Entête&lt;/th&gt;&lt;th&gt;Entête&lt;/th&gt;&lt;th&gt;Entête&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
+  &lt;tfoot&gt;&lt;tr&gt;&lt;th&gt;Pied&lt;/th&gt;&lt;th&gt;Pied&lt;/th&gt;&lt;th&gt;Pied&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;td&gt;Cellule&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+<p>Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle <i>collapse border</i> et TBODY avec le style <i>overflow: auto</i>.</p>
+<p>{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}</p>