border-collapse

  • Raccourci de la révision : CSS/border-collapse
  • Titre de la révision : border-collapse
  • ID de la révision : 170273
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[es:CSS:border-collapse]] <<langbot>>

Contenu de la révision

{{template.CSSRef()}}

Résumé

La propriété border-collapse est utilisée pour fusionner les bordures. Elle a une grande influence sur l'affichage et le style des cellules de tableau.

Le rendu des bordures de tableau est divisé en deux catégorie dans CSS2 - fusionnées et séparées. Cette propriété définit lequel des deux modèles de rendu doit être utilisé. Dans le modèle de rendu des bordures fusionnées, les cellules adjacentes partagent les mêmes bordures. Dans le modèle de rendu des bordures séparées, chaque cellule adjacente a ses propres bordures (la distance entre les bordures est définie par la propriété {{template.Cssxref("border-spacing")}}).

Syntaxe

border-collapse: valeur

Valeurs

inherit 
Définit explicitement la valeur de cette propriété comme héritée de son élément parent.
separate 
Utilise le modèle de rendu des bordures séparées.
collapse 
Utilise le modèle de rendu des bordures fusionnées.

Exemples

{{template.CSSRefExampleLink("border-collapse")}}

<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">

Notes

Dans le modèle de rendu des bordures fusionnées, la valeur {{template.Cssxref("border-style")}} de inset se comporte comme groove, et outset se comporte comme ridge.

CSS2 spécifie que la valeur initiale de cette propriété est collapse, mais CSS2.1 et Mozilla/Opera définissent ou se comportent comme si elle était définie à separate.

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 5.5
Netscape 7
Opera 5


Voir également

{{template.Cssxref("border-spacing")}}

Interwiki Language Links

{{ wiki.languages( { "en": "en/CSS/border-collapse", "es": "es/CSS/border-collapse" } ) }}

Source de la révision

<p> 
{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété <code>border-collapse</code> est utilisée pour fusionner les bordures. Elle a une grande influence sur l'affichage et le style des cellules de tableau.
</p><p>Le rendu des bordures de tableau est divisé en deux catégorie dans  CSS2 - <i>fusionnées</i> et <i>séparées</i>. Cette propriété définit lequel des deux modèles de rendu doit être utilisé. Dans le modèle de rendu des bordures fusionnées, les cellules adjacentes partagent les mêmes bordures. Dans le modèle de rendu des bordures séparées, chaque cellule adjacente a ses propres bordures (la distance entre les bordures est définie par la propriété {{template.Cssxref("border-spacing")}}).
</p>
<ul><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : Separate
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : oui
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">border-collapse: valeur
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<dl><dt> inherit </dt><dd> Définit explicitement la valeur de cette propriété comme héritée de son élément parent.
</dd><dt> separate </dt><dd> Utilise le modèle de rendu des <i>bordures séparées</i>.
</dd><dt> collapse </dt><dd> Utilise le modèle de rendu des <i>bordures fusionnées</i>.
</dd></dl>
<h3 name="Exemples"> Exemples </h3>
<p>{{template.CSSRefExampleLink("border-collapse")}}
</p>
<pre class="eval">&lt;table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"&gt;
</pre>
<pre class="eval">&lt;table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"&gt;
</pre>
<h3 name="Notes"> Notes </h3>
<p>Dans le modèle de rendu des <i>bordures fusionnées</i>, la valeur {{template.Cssxref("border-style")}} de <code>inset</code> se comporte comme <code>groove</code>, et <code>outset</code> se comporte comme <code>ridge</code>. 
</p><p>CSS2 spécifie que la valeur initiale de cette propriété est <code>collapse</code>, mais CSS2.1 et Mozilla/Opera définissent ou se comportent comme si elle était définie à <code>separate</code>.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/tables.html#collapsing-borders">CSS 2 (fr)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1 (en)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3 (en)</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navigateur</th>
    <th>Version minimale</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>5.5</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>5</td>
  </tr>
</tbody></table>
<p><br>
</p>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{template.Cssxref("border-spacing")}}
</p><p><span class="comment">Interwiki Language Links</span>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/CSS/border-collapse", "es": "es/CSS/border-collapse" } ) }}
Revenir à cette révision