Les tableaux et les Css - FAQ CSS

Dans un tableau (X)HTML, il faut distinguer deux bordures : la bordure Css du tableau HTML (en noir sur l'image) et les bordures Css des cellules du tableau HTML (en vert sur l'image). Cette distinction n'est pas visible quand vous spécifiez une bordure en HTML avec l'attribut border de la balise (X)HTML table.
Cependant en Css, il y a une distinction entre la bordure du tableau même table et la bordure de chaque cellule du tableau td. Et en plus, vous pouvez spécifier la couleur le style et l'épaisseur de chaque bordure Css. Vous en serez plus sur les diverses propriétés Css de bordure dans le chapitre dédié aux bordures CSS.
La bordure Css autour du tableau HTML :

table { border : 1px solid dark; }

table { border : none; }

Les bordures Css des cellules du tableau HTML :

td { border : 1px solid green; }

td { border : none; }

Si votre balise (X)HTML table a un attribut border, sa valeur définira l'épaisseur de ces deux bordures Css de tableau.

Par défaut, les cellules d'un tableau HTML sont espacées entre elles d'environ 2px (en gris sur l'image). En (X)HTML, c'est l'attribut cellspacing de la balise (X)HTML table qui spécifie l'espace entre les bordures des cellules du tableau et de la table.
Nous allons voir dans ce chapitre, comment modifier cet espace entre les cellules d'un tableau HTML en CSS.

Pour supprimer l'espace entre les cellules d'un tableau HTML, vous avez deux solutions :

• Utiliser la fusion de bordures Css d'un tableau HTML border-collapse
  Mais vous ne pourrez plus les espacer après.
• Utiliser border-spacing.

.ciblage-du-tableau{ border-collapse : collapse; }
.ciblage-du-tableau{ border-spacing : 0; }

Pour modifier l'espace entre les cellules d'un tableau HTML, vous devez utiliser la propriété CSS border-spacing, cependant border-spacing n'aura aucun impact sur l'espacement entre les cellules d'un tableau HTML, si les bordures Css du tableau HTML sont fusionnées.
La propriété Css border-spacing qui permet changer l'espace horizontal et vertical entre chaque bordure Css qui compose un tableau et non entre chaque cellule :

• Si vous avez des bordures CSS de 5px et un espacement de 5px, l'espacement entre les cellules du tableau HTML sera de 15px;
• Si vous n'avez pas de bordure Css et un espacement entre cellules de 5px, l'espacement entre les cellules du tableau HTML sera de 5px;

.ciblage-du-tableau{ border-spacing : 5px 10px; }

Voir un exemple gestion des espaces entre les bordures d'un tableau en Css

Dans un tableau (X)HTML, il faut distinguer deux bordures Css : la bordure Css du tableau HTML (en noir sur l'image) et les bordures Css des cellules du tableau HTML (en vert sur l'image). Par défaut, les bordures Css d'un tableau HTML ne sont pas fusionnées.
Vous pouvez fusionner les bordures d'un tableau pour quelles soient communes aux cellules adjacentes ou à la bordure extérieure du tableau HTML.
Pour cela, vous devez utiliser sur la balise table, la propriété Css border-collapse qui permet de fusionner ou séparer les bordures des cellules du tableau HTML et la bordure du tableau HTML.

.ciblage-du-tableau {
  /* Fusion des bordures des cellules du tableau HTML entre elles */
  border-collapse : collapse;
}
.ciblage-du-tableau {
  /* Les cellules du tableau HTML ont une bordure distincte */
  border-collapse : separate; 
}

Voir un exemple gestion des bordures d'un tableau en Css

Par défaut l'alignement vertical d'une cellule de tableau HTML est middle. Cependant, si l'attribut valign de la balise (X)HTML TD, TH ou TR est présent, il modifie l'alignement vertical dans la cellule du tableau.

Vous pouvez en feuille de style Css spécifier l'alignement vertical dans une cellule de tableau HTML. Pour cela vous devez utiliser la feuille de style Css vertical-align qui permet de spécifier la position verticale du contenu au sein de la cellule de tableau HTML.
Vous trouverez une explication détaillée sur l'alignement vertical suivant les types d'éléments.

L'alignement vertical de la cellule n'est pas hérité de l'alignement vertical spécifié sur la balise table.

.ciblage-du-tableau td{
  /* Toutes les balises TD du tableau HTML auront un alignement vertical centré */
  vertical-align : middle;
}
.ciblage-une-cellule{
  /* La cellule spécifique a un alignement vertical bas */
  vertical-align : bottom;
}

Voir des exemples d'alignement vertical de texte en Css

Par défaut l'alignement horizontal d'une cellule de tableau HTML est left et center pour les cellules d'entêtes. Cependant, si l'attribut align de la balise (X)HTML TD, TH ou TR est présent, il modifie l'alignement horizontal dans la cellule du tableau.

Vous pouvez en feuille de style Css center le contenu d'une cellule de tableau HTML. Pour cela vous devez utiliser la feuille de style Css text-align qui permet entre autre de spécifier un alignement horizontal du contenu au centre de la cellule d'un tableau HTML.

L'alignement horizontal de la cellule est hérité de l'alignement horizontal spécifié sur la balise table.

.ciblage-du-tableau{
  /* Les cellules du tableau HTML héritent de l'alignement horizontal centré */
  text-align : center;
}
.ciblage-une-cellule{
  /* La cellule du tableau spécifique a un alignement horizontal centré */
  text-align : center;
}

Voir un exemple d'alignement horizontal centré de texte en Css

Par défaut, les marges intérieures sont à 0. Cependant, si l'attribut cellpadding de la balise (X)HTML table est présent, il modifie l'espace de la marge intérieure dans les cellules du tableau HTML.
La marge intérieure correspond à l'espace entre la zone de contenu et la bordure spécifiée par la propriété Css border d'une cellule de tableau HTML.
Cet espace intérieur est spécifié avec la propriété Css padding. Les marges intérieures peuvent être précisées individuellement.
Les marges intérieures ne sont pas héritées des marges intérieures spécifiées sur la balise table. Si la marge intérieure est spécifiée sur la table, il s'agit de la marge intérieure entre les bordures du table et les cellules du tableau HTML.
Vous trouverez plus de détails sur les marges intérieures dans le cours qui leurs est réservées.

.ciblage-du-tableau td{
  /* Toutes les balises TD du tableau HTML auront une marge intérieure*/
  padding : 5em;
}
.ciblage-une-cellule{
  /* La cellule spécifique du tableau HTML a une marge intérieure */
  padding : 5em;
}
.ciblage-du-tableau{
  /* Espace entre les bordures extérieures du tableau HTML et les cellules */
  padding : 5em;
}

Voir des exemples de changement de marges intérieures d'un élément en Css

Par défaut, le tableau HTML est de type display : table et a un comportement de type "bloc" qui fait qu'il ne tient pas compte de la valeur d'alignement horizontale de la propriété Css text-align de l'élément parent.
En changeant le type en display : inline-table, alors son comportement change en type "en ligne" et le tableau HTML s'aligne suivant la valeur de la propriété Css text-align de l'élément parent.

.ciblage-du-tableau { display : inline-table; }

Si votre tableau HTML possède une balise (X)HTML CAPTION, sachez que vous pouvez en Css positionner spécifiquement le titre de tableau HTML. Par défaut la position du caption est au-dessus du tableau HTML.
Pour cela, vous devez utiliser sur la balise table, la propriété Css caption-side qui permet d'afficher le titre au tableau (CAPTION) au-dessus ou en dessous du tableau.

.ciblage-du-tableau { caption-side : bottom; }

Positionner en Css le caption par rapport au tableau HTML:

Voir un exemple d'alignement du caption d'un tableau en Css

Si vous désirez par exemple mettre un fond de couleur sur une ligne d'un tableau (X)HTML ou tout autre style Css, vous devez utiliser le sélecteur Css de balise TR.

.ciblage-du-tableau tr{
  /* Cible en Css ligne les cellules héritent de propriétés */
  /* Listes de propriétés Css */
  background-color : #ccc;
}

Certaines propriétés Css ne sont pas héritées du parent par exemple padding.
Dans ce cas, vous devez cibler les cellules de la ligne de tableau en ajoutant un sélecteur Css de balise TD.

.ciblage-du-tableau tr td{
  /* Cible en Css chaque cellule de la ligne */
  /* Listes de propriétés Css */
  padding : 5px;
}

Si vous désirez mettre un style sur une colonne précise, vous devez utiliser le sélecteur Css td:nth-child().

.ciblage-du-tableau td:nth-child(2) {
  /* Cible en Css les cellules de tableau de la deuxième colonne du tableau */
  /* Listes de propriétés Css */
  background-color : green;
}
.ciblage-du-tableau td:nth-child(3) {
  /* Cible en Css les cellules de tableau de la troisième colonne du tableau */
  /* Listes de propriétés Css */
  background-color : #ccc;
}

Pour cibler la première et dernière colonne d'un tableau HTML, préférez à td:nth-child() les sélecteurs td:first-child et td:last-child qui sont des sélecteurs Css plus performant.

.ciblage-du-tableau td:first-child  {
  /* Cible en Css les cellules de tableau de la première colonne du tableau */
  /* Listes de propriétés Css */
  background-color : green;
}
.ciblage-du-tableau td:last-child{
  /* Cible en Css les cellules de tableau de la dernière colonne du tableau */
  /* Listes de propriétés Css */
  background-color : #ccc;
}

Si vous désirez mettre un style sur une cellule précise, vous devez mixer le sélecteur de ligne avec celui des colonnes de tableau (X)HTML.

.ciblage-du-tableau tr:nth-child(2) td:nth-child(3) {
  /* Cible en Css la deuxième cellule de la troisième colonne du tableau HTML */
  /* Listes de propriétés Css */
  background-color : #ccc;
}

Autres exemples de codes pour styliser des cellules précises d'un tableau

Si vous désirez par exemple mettre un fond de couleur sur une ligne de tableau ou tout autre style Css au survol du curseur, vous devez utiliser le sélecteur Css :hover

.ciblage-du-tableau tr:hover td {
  /* Cible les cellules de tableau de la ligne survolée par le curseur */
  /* Listes de propriétés Css */
  background-color : #ccc;
}

Exemple de modification de style Css d'une ligne de tableau au survol du curseur :

Si votre tableau à une largeur, vous spécifier l'algorithme qui sera utilisé pour définir la largeur des cellules d'un tableau en fonction de leur contenu. Pour cela vous devez utiliser la propriété Css table-layout.
Par défaut, l'algorithme pour calculer la taille de chaque colonne d'un tableau prend en compte l'ensemble des cellules. A partir du moment ou, vous spécifiez table-layout : fixed, seule la première ligne du tableau est prise en compte pour calculer la taille de chaque colonne, toutes les propriétés width des autres lignes sont ignorées. Attention, pour cette valeur les propriétés Css min-width et max-width ne sont pas prises. Vous trouverez plus d'information dans la propriété.

Si votre table n'a pas de taille spécifiée, alors sa taille dépendra de la taille des contenus utilisés pour le calcul de chaque colonne. Si table a une taille spécifiée, alors l'espace sera réparti équitablement pour prendre tout l'espace spécifié, donc si l'espace est trop petit vous risquez d'avoir des dépassements de contenu dans les cellules.

.ciblage-du-tableau {
  width : 300px;
  table-layout : fixed;
}
.ciblage-du-tableau {
  width : 300px;
  table-layout : auto;
}

Exemple de résultats suivant l'algorithme utilisé pour la taille des cellules :

Vous pouvez faire en sorte que votre cellule devienne un contexte de positionnement pour positionner des éléments fils. Pour cela vous devez utiliser la propriété Css position à la valeur relative sur votre cellule.

Vous pouvez approfondir vos connaissances sur les éléments dits positionnés dans la FAQ : Les éléments positionnés.

table{
/* Précisez toujours border-collapse quelle que soit sa valeur (bug Firefox < 50 ) lié aux éléments positionnés */
  border-collapse : collapse;
}
.contexte-positionnement{
  position : relative;
  width : 250px;
  height : 100px;
}
.element-positionne{
  position : absolute;
  left : 20px;
  bottom : 5px;
}

<table>
  <tr><td class="contexte-positionnement">
    <div class="element-positionne">
    contenu qui force la dimension de la cellule
    </div>
  </td></tr>
</table>

Sachez que pour version de Firefox < 30, le fait de mettre position:relative sur votre cellule ne fonctionnera pas. Il faut déclarer un contexte de positionnement dans la cellule en ajoutant un div. Le code Css reste le même.

<table>
  <tr><td>
    <div class="contexte-positionnement">
      <div class="element-positionne">
      contenu qui force la dimension de la cellule
      </div>
    </div>
  </td></tr>
</table>

Si vous avez un tableau HTML qui est plus grand que la zone qui lui est définie, vous pouvez mettre une scrollbarre horizontale.
Le concept est assez simple, il suffit de mettre une balise div englobant le tableau HTML et de lui assigner une propriété Css overflow-x à auto.
Le div va prendre tout l'espace qui lui est assigné soit 100% et temps que le tableau ne dépasse pas cette taille, la scrollbarre horizontale n'est pas visible.
Cette technique ne fonctionne pas, si le tableau a :

• table-layout a fixed et width à 100%

.overflow-x{overflow-x : auto}

<div class="overflow-x">
  <table>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
      <th>Colonne 4</th> 
    </tr>
    <tr>
      <td>Contenu</td>
      <td>Contenu</td>
      <td>Contenu</td> 
      <td>Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
    </tr>
  </table>
</div>