Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Manipuler les Tables HTML

RDFFav

Styliser vos tabelaux HTML »

Colorer vos tableaux HTML avec border-collapse: collapse et effet d’alternance.table, display, collapse, datagrid

La première chose à savoir avec le style des tableaux HTML est le type de bordure. Je dirais du vieux versus du moderne. En fait c’est le navigateur ou plutôt la table HTML qui vient par défaut avec une bordure de programmeur, c’est à dire une bordure tellement laide que personne ne les utilisent (à part les programmeurs ;-)! Et certains attributs HTML 4 digne d’un film de série B. Même mon premier tutoriel il y a 15 ans, avec deux tableaux imbriqués, générait son propre lignage avec une bordure à zéro. Mais voilà qu’arrive la propriété border-collapse.

La bordure par défaut sans border-collapse
<style>
  /* Fonctionne seulement si le « border-collapse » est « separate » */
  .cMonTableau {
    width:400px;
    border-collapse: separate;
    border-spacing: 10px;
    border-style: solid;  /* medium|thin|thick|length|initial|inherit */
    border-color: blue;
    border-width: 15px;
    /* Ou de façon plus concise :  border: 15px solid blue; */
  }
</style>

<table border="1" class="cMonTableau">
<tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
<tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
<tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
<tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

J’ai ajouter « border="1" » incompatible HTML5 (et un gros fond bleu) pour constater la bordure par défaut de chaque cellule, toujours là. Le code n’affecte pas les cellules, seulement la couleur de la bordure ou « frame » (sauf Safari qui ne tient pas compte des dimensions mais de la couleur). D’ailleurs Firefox affiche toujours le style Netscape avec une bordure des colonnes noir en haut et à gauche mais plus gris à droite et en bas, donnant un terrible effet de 3D! Voilà un exemple avec cellules colorées :

<style>
.cMonTableau2 th, .cMonTableau2 td {
   border: 15px solid blue;
}
</style>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Le même exemple mais avec une bordure à 1px :

<style>
.cMonTableau3 {
  width:400px;
  border-collapse: separate;
  border-spacing: 10px;
  border: 1px solid blue;
}
.cMonTableau3 th, .cMonTableau3 td {
  border: 1px solid blue;
}
</style>

<table class="cMonTableau3">
<tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
<tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
<tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
<tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Et finalement sans espace entre les bordures :

<style>
.cMonTableau4 {
  width:400px;
  border-collapse: separate;
  border-spacing: 0px;
  border: 1px solid blue;
}
.cMonTableau4 th, .cMonTableau4 td {
  border: 1px solid blue;
}
</style>

<table class="cMonTableau4">
<tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
<tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
<tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
<tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

La bordure avec border-collapse

Le même exemple mais cette fois avec la propriété border-collapse à « collapse ». La propriété border-collapse de tableau HTML, permet donc deux valeurs :

separate (défaut)
Chaque cellule à ses propres bordures avec ou sans espace entre elles.
collapse
Combine les bordures de la cellule en une seule retirant l’espace entre les bordures et en utilisant une seule bordure quand celles-ci se superpose (table, ligne et cellule).

Noter que pour ce premier exemple J’utilise aussi le « border="1" » incompatible HTML5 :

<style>
  .cMonTableauCollapse {
    width:400px;
    border-collapse: collapse;
    border-spacing: 10px;  /* Aucun effet avec « collapse » */
    border: 15px solid #758de5;
  }
</style>

<table border="1" class="cMonTableauCollapse">
<tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
<tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
<tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
<tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Maintenant pour colorer aussi les cellules :

<style>
.cMonTableauCollapse2 {
  width:400px;
  border-collapse: collapse;
  border: 15px solid #758de5;
}

.cMonTableauCollapse2 th, .cMonTableauCollapse2 td {
  border: 15px solid #a5b6f1;
}
</style>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Et avec une bordure à 1px :


<style>
.cMonTableauCollapse3 {
  width:400px;
  border-collapse: collapse;
  border: 1px solid #758de5;
}

.cMonTableauCollapse3 th, .cMonTableauCollapse3 td {
  border: 1px solid #a5b6f1;
}
</style>

<table class="cMonTableauCollapse3">
<tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
<tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
<tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
<tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table>
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Note : Le !DOCTYPE doit idéalement être déclaré pour utiliser la propriété « border-collapse » et éviter les problèmes d’interprétation, avec IE notamment.

Propriétés de « border »
Propriétés
Description
border
Définit toutes les propriétés de bordure en une instruction
border-color
Définit la couleur des quatre bordures
border-style
Définit le style des quatre bordures
border-width
Définit la hauteur des quatre bordures
border-bottom
Définit toutes les propriétés de la bordure du bas en une instruction
border-bottom-color
Définit la couleur de la bordure du bas
border-bottom-style
Définit le style de la bordure du bas
border-bottom-width
Définit la hauteur de la bordure du bas
border-left
Définit toutes les propriétés de la bordure de gauche en une instruction
border-left-color
Définit la couleur de la bordure de gauche
border-left-style
Définit le style de la bordure de gauche
border-left-width
Définit la hauteur de la bordure de gauche
border-right
Définit toutes les propriétés de la bordure de droite en une instruction
border-right-color
Définit la couleur de la bordure de droite
border-right-style
Définit le style de la bordure de droite
border-right-width
Définit la hauteur de la bordure de droite
border-top
Définit toutes les propriétés de la bordure du haut en une instruction
border-top-color
Définit la couleur de la bordure du haut
border-top-style
Définit le style de la bordure du haut
border-top-width
Définit la hauteur de la bordure du haut
HTML 4.01 Attribut « border »

L’attribut border n’est plus compatible HTML5, pas plus que rule, ou frame et les valeurs dignes d’un film d’horreur! (Safari ne supporte pas la grandeur de la ligne.) Mais voilà un exemple comparé :

<table border="4" width="100%" bordercolor="#808080" frame="hsides" rules="rows">
  <tr><th>En-tête 1-1</th><th>En-tête 1-2</th><th>En-tête 1-3</th></tr>
  <tr><td>Cellule 1-1</td><td>Cellule 1-2</td><td>Cellule 1-3</td></tr>
  <tr><td>Cellule 2-1</td><td>Cellule 2-2</td><td>Cellule 2-3</td></tr>
  <tr><td>Cellule 3-1</td><td>Cellule 3-2</td><td>Cellule 3-3</td></tr>
</table> 
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

L’attribut frame ou « cadre » détermine comment la bordure s’affichera :

void
Aucun cadre (défaut).
above
Seulement en haut.
below
Seulement en bas.
hsides
Seulement en haut et en bas.
vsides
Seulement à gauche et à droite.
lhs
Seulement à gauche.
rhs
Seulement à droite.
box
Chaque côtés.
border
Chaque côtés.

L’attribut rule définit les ligne autour des cellules.

none
Aucune ligne (défaut).
groups
Sous les lignes (row groups) et colonnes (column groups).
rows
Seulement entre les ligne.
cols
Seulement entre les colonnes.
all
Entre chaque lignes et colonnes.

Le même exemple compatible HTML5 en pure CSS :
En-tête 1-1En-tête 1-2En-tête 1-3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3
<style>
.cMonTableauRule {
  width: 100%;
  border-collapse: collapse;
  border-top: 4px solid #808080;
  border-bottom: 4px solid #808080;
}

.cMonTableauRule th, .cMonTableauRule td {
  border-bottom: 1px solid #808080;
}
</style>
Bordure avec entête à gauche

Un autre exemple très simple de tableau de données avec cette fois une colonne d’entête à gauche du tableau, avec une couleur de fond.

<style>
#maTable2 { 
  width: 100%;
  border-collapse: collapse;
}
#maTable2 th, #maTable2 td {
  padding: 3px;
  border: 1px solid #fff;
  text-align: center;
}
#maTable2 th {
  background: #999690;
  color: white;
  font-weight: bold;
}
</style>

<table id="maTable2">
  <thead>
    <tr>
      <th>#</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <th>2</th>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <th>3</th>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
    </tr>
    <tr>
      <th>4</th>
      <td>19</td>
      <td>20</td>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
    <tr>
      <th>5</th>
      <td>25</td>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
    </tr>
    <tr>
      <th>6</th>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
      <td>35</td>
      <td>36</td>
    </tr>
  </tbody>
</table>
# 1 2 3 4 5 6
1 1 2 3 4 5 6
2 7 8 9 10 11 12
3 13 14 15 16 17 18
4 19 20 21 22 23 24
5 25 26 27 28 29 30
6 31 32 33 34 35 36
Couleurs de fond

Rien de mieux qu’une bonne couleur de fond pour distinguer une colonne sans encombrer un tableau de données déjà surchargé.

Avant de commencer il faut savoir qu’il y a une hiérarchie entre les différentes méthodes, des trames opaques une au-dessus des autres. Par exemple la couleur de fond des colonnes, et groupe de colonnes annulera celle des cellules. Ou encore les nouveaux sélecteurs nth-child, au-dessus des cellules, des lignes et ds colonnes. En spécifiant nth-child(odd) c’est un autre niveau etc. Aussi certaines propriétés ne sont pas toujours compatible, par exemple l’alignement des par colonne!

Premier exemple avec couleurs de fond pour le titre caption, entête thead et pied tfoo de tableau. Pour le corps du tableau, les col. Notez l’usage de table-layout: fixed; qui fixe les colonnes, c’est à dire que l’ensemble des colonnes seront divisé également, à moins d’indication contraire. Et surtout que la table sera chargée, évaluée et généré en une seule passe...

<style>
/* Tableau */
.tableau {
  width:100%;
  table-layout: fixed;
  border-collapse: separate; /* pour ligné */
 /* border-spacing: 1px; // pour contrer les style de base */
}
.tableau caption {
  font-size:1.4rem;
  color:#ffffff;
  background-color: #5d625c;
 /* caption-side: bottom; // Ex : aligné en bas */
}

/* Entête */
.tableau th {
  background-color:#999690;
  color:#fff;
}

/* Pied */
.tableau tfoot td {
  color:#fff;
  background-color:#999690;
  border-top:1px solid #5d625c;
  border-bottom:1px solid #5d625c;
}

/* Colonnes avec classes */
.tableau col.col1 {
  background-color:#d6d3ce;
}
.tableau col.col2 {
  background-color:#dddad4;width:100px;text-align:right;
}
.tableau col.col3 {
  background-color:#c6c3bd;color:#fff;width:100px;text-align:right;
}

/* Alignement par colonnes sans classe */
.tableau td:nth-child(2) {
  text-align:right;
}
.tableau td:nth-child(3) {
  text-align:right;
}
</style>

<table class="tableau">
  <caption>Exemple de tableau stylisé</caption>
  <colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
  </colgroup>
  <thead>
    <tr><th style="text-align:left;">Description</th><th>Qte</th><th>Total</th></tr>
  </thead>
  <tfoot>
    <tr><td></td><td>10</td><td>633</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Montréal</td><td>1</td><td>28</td></tr>
    <tr><td>Éloi</td><td>1</td><td>-20</td></tr>
    <tr><td>Rivière-du-Loup</td><td>1</td><td>21</td></tr>
    <tr><td>Cacouna</td><td>1</td><td>26</td></tr>
    <tr><td>Les Boules</td><td>1</td><td>-12</td></tr>
    <tr><td>Saint-Arsène</td><td>1</td><td>32</td></tr>
    <tr><td>Rimouski</td><td>1</td><td>470</td></tr>
    <tr><td>L’Isle-Verte</td><td>1</td><td>49</td></tr>
    <tr><td>Rimouski</td><td>1</td><td>39</td></tr>
  </tbody>
</table>
Exemple de tableau stylisé
DescriptionQteTotal
10633
Montréal128
Éloi1-20
Rivière-du-Loup121
Cacouna126
Les Boules1-12
Saint-Arsène132
Rimouski1470
L’Isle-Verte149
Rimouski139

Dans cet exemple border-collapse: separate;, l’espace entre les bordures laisse voir la couleur sous le tableau. Ça reste toujours une bonne méthode pour ligner un tableau. Noter que mon exemple force un espace entre les ligne border-spacing: 1px; pour contrer les styles de base du site.

Couleur de fond par ligne (row) avec lignage et alternance des couleurs.

Très simple, il suffit d’ajouter les classes suivante. Mais attention, une fois fait, tout autre manipulation de style de la ligne doit passer par le nth-child (Compatible IE9+) :

.zebre tbody tr:nth-child(odd) {
  background-color: #d6d3ce;
  border-bottom:1px solid #ccc;
  color:#444;
}
.zebre tbody tr:nth-child(even) {
  background-color: #c6c3bd;
  border-bottom:1px solid #ccc;
  color:#444;
}

/* Effet réactif au passage de la souris */
.zebre tbody tr:hover:nth-child(odd) {
  background-color: #999690;
  color:#ffffff;
}
.zebre tbody tr:hover:nth-child(even) {
  background-color: #999690;
  color:#ffffff;
} 

On note ici l’obligation de déclarer les deux classes, impair et pair. Spécifier la couleur seulement sur la ligne ou une cellule ne fonctionne pas puisque la couleur de fond est déjà sur une trame au dessus, celle du nth-child(odd) et nth-child(even)! On peut bien voir le résultat dans l’exemple complet suivant. La couleur des colonne ne fonctionne pas.

Exemple complet
<style>
.tableau {
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.tableau caption {
  font-size:1.4rem;
  color:#ffffff;
  background-color: #5d625c;
 /* caption-side: bottom; // top|bottom|initial|inherit; */
}
.tableau th {
  background-color:#999690;
  color:#fff;
}
.tableau tfoot td {
  color:#fff;
  background-color:#999690;
  border-top:1px solid #5d625c;
  border-bottom:1px solid #5d625c;
}
.zebre tbody tr:nth-child(odd) {
  background-color: #d6d3ce;
  border-bottom:1px solid #ccc;
  color:#444;
}
.zebre tbody tr:nth-child(even) {
  background-color: #c6c3bd;
  border-bottom:1px solid #ccc;
  color:#444;
}
.zebre tbody tr:hover:nth-child(odd) {
  background-color: #999690;
  color:#ffffff;
}
.zebre tbody tr:hover:nth-child(even) {
  background-color: #999690;
  color:#ffffff;
}

/* La couleur ne fonctionne pas avec odd / even */
.tableau col:nth-child(1) {
  background-color:#d6d3ce;
}
.tableau col:nth-child(2) {
  background-color:#dddad4;width:100px;text-align:right;
}
.tableau col:nth-child(3) {
  background-color:#c6c3bd;color:#fff;width:100px;text-align:right;
}

.tableau td:nth-child(2) {
  text-align:right;
}
.tableau td:nth-child(3) {
  text-align:right;
}
</style>

<table class="tableau zebre">
  <caption>Exemple de tableau stylisé</caption>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr><th style="text-align:left;">Description</th><th>Qte</th><th>Total</th></tr>
  </thead>
  <tfoot>
    <tr><td></td><td>10</td><td>633</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Montréal</td><td>1</td><td>28</td></tr>
    <tr><td>Éloi</td><td>1</td><td>-20</td></tr>
    <tr><td>Rivière-du-Loup</td><td>1</td><td>21</td></tr>
    <tr><td>Cacouna</td><td>1</td><td>26</td></tr>
    <tr><td>Les Boules</td><td>1</td><td>-12</td></tr>
    <tr><td>Saint-Arsène</td><td>1</td><td>32</td></tr>
    <tr><td>Rimouski</td><td>1</td><td>470</td></tr>
    <tr><td>L’Isle-Verte</td><td>1</td><td>49</td></tr>
    <tr><td>Rimouski</td><td>1</td><td>39</td></tr>
  </tbody>
</table>
Exemple de tableau stylisé
DescriptionQteTotal
10633
Montréal128
Éloi1-20
Rivière-du-Loup121
Cacouna126
Les Boules1-12
Saint-Arsène132
Rimouski1470
L’Isle-Verte149
Rimouski139
Autre

Il existe bien entendu des centaines de fa^con de styliser un tableau HTML, seulement avec le fond, on a une plusieurs propriété pour s’amuser :

Valeur
Description
background-color
Spécifie la couleur de fond
background-image
Spécifie une ou plusieurs images de fond
background-position
Spécifie la position des images de fond
background-size
Spécifie les dimensions des images de fond
background-repeat
Spécifie comment reproduire les images de fond
background-origin
Spécifie la position d’origine des images de fond dans l’aire
background-clip
Spécifie la position d’origine de la couleur de fond dans l’aire
background-attachment
Spécifie si les images de fond resteront fixes ou défilleront avec la page
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bravo !
    64x64
    tawfik

    Date (GMT) : 2017-07-13 9:33:9 (UTC +0000)

    • Bonjour, Comment avoir les bords arrondis avec un border-radius ?
      64x64
      Amaury le Cour

      Date (GMT) : 2017-11-28 06:28:48 (UTC +0000)
      Date local : Tue Nov 28 2017 07:29:18 GMT+0100 (Paris, Madrid)
      • Salut, Effectivement, pas facile d'avoir les bords arrondis quand on utilise des couleurs de fond un peu partout dans le tableau. On ne peut pas arrondir simplement le .tableau. Alors il faut y aller à la pièce, pour chaque côté. Pour le haut c'est facile, il suffit de border-top-left-radius: 10px et border-top-right-radius: 10px pour le « caption » : Avec tous les préfixes : .tableau caption { font-size:1.4rem; color:#ffffff; background-color: #5d625c; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } Pour le bas, il faut passer par la cellule (td) du « tfoot », la première à gauche et la dernière à droite. Sans oublier d'enlever la bordure du bas. .tableau tfoot td:first-child { -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px; } .tableau tfoot td:last-child { -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px; } // Enlever la bordure... .tableau tfoot td { color:#fff; background-color:#999690; border-top:1px solid #5d625c; /*border-bottom:1px solid #5d625c;*/ }
        64x64
        oznog
        http://www.trucsweb.com
        Date (GMT) : 2017-11-28 12:36:57 (UTC +0000)
        Date local : Tue Nov 28 2017 07:37:31 GMT-0500 (Est)


      10/10 sur 1 revues.
             Visites : 31948 - Pages vues : 33148
      X

      Trucsweb.com Connexion

      X

      Trucsweb.com Mot de passe perdu

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte