diff options
Diffstat (limited to 'files/fr/conflicting/web/css/border-collapse')
| -rw-r--r-- | files/fr/conflicting/web/css/border-collapse/index.html | 201 |
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> <style type="text/css"> + td { background-color: #eeeeee; } + td.CoulNoire { background-color: #cccccc; } + </style> + +<table> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + </table> +</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><style type="text/css"> + /* 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; } +</style> + +<table> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> +</table> +</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><style type="text/css"> +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 */ +} +</style> + +<table> + <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead> + <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot> + <tbody> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + </tbody> +</table> +</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> |