CSS

Manipuler les Tables HTML

Styliser vos tabelaux HTML »

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>

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>

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>

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>

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>

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>

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>

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

<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> 

<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>

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>

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>

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