On a déjà traité tout un paquet de propriétés CSS qui peuvent aussi profiter aux tableaux :

• Les propriétés de formatage et de mise en forme du texte, notamment : color, font-family, font-size, font-weight et font-style.
• Les alignements :
  • vertical-align qui peut être utilisé avec <td> et <th> pour définir l'alignement vertical du contenu des cellules (top, middle, bottom).
  • text-align qui permet de définir l'alignement horizontal du contenu des cellules (left, center, right, justify). Cette propriété peut être utilisée avec <td>, <th>.
• Les bordures (intéressantes avec <th>, <td> et <table>).
• Les couleurs et les images d'arrière-plan (background-color et background-image).
• Les marges intérieures (padding) permettent d'aérer un tableau.
• Les marges extérieures (margin) : la propriété margin est très intéressante avec la balise <table> et <caption>. Vous pouvez donner une valeur numérique comme : 10px, ou bien affecter la valeur 'auro' aux deux marges latérales (margin-left et margin-right), pour centrer le tableau ou la légende horizontalement.

• Les propriétés CSS de formatage du texte au service des tableaux

  • Les propriétés CSS : color, font-family, font-size, font-weight et font-style

  • Alignements horizontal et vertical des cellules (text-align et vertical-align)

  • La propriété CSS direction

  • Empêcher les retours à la ligne avec la propriété CSS white-space

• Ajouter des bordures aux tableaux

  • Les propriétés de style border

  • Fusionner les bordures avec la propriété CSS border-collapse

  • La propriété CSS border-spacing

• Modifier les dimensions du tableau (les propriétés CSS : width et height)

• Ajuster les espacements internes (padding : remplissage)

• La propriété CSS empty-cells

• Les propriétés CSS background au service des tableaux

• Positionner la légende avec la propriété CSS caption-side

• Centrer un tableau horizontalement avec la propriété CSS margin

Les propriétés CSS de formatage du texte au service des tableaux

Toutes les propriétés CSS de formatage de texte opèrent avec les tableaux, car ces derniers contiennent aussi du texte Donc vous pouvez associer aux tableaux les propriétés CSS : color, font-family, font-size, font-weight, font-style, word-spacing, letter-spacing, white-space, text-indent, direction, text-decoration, text-transform, font-variant, line-height, text-align et vertical-align.

Dans le présent chapitre on va se focaliser uniquement sur celles qui sont les plus utilisées avec les tableaux.

Les propriétés CSS : color, font-family, font-size, font-weight et font-style

Pour bien présenter votre tableau, vous pouvez jouer par exemple sur la graisse et le style de la police, pour mettre en évidence les en-têtes des tableaux. Les autres cellules simple auront un formatage aussi simples

Vous devez faire attention au phénomène d'héritage CSS :

• les styles spécifiés à l'élément table sont automatiquement transmis à ses enfants : thead, tfoot, tbody, tr, th et td ;
• les styles spécifiés aux éléments thead, tfoot, tbody sont automatiquement transmis à ses enfants : tr, th et td ;
• les styles spécifiés à l'élément tr, sont automatiquement transmis à ses enfants : th et td.

Un style spécifié à un enfant, annule le style reçu du parent, s'il porte sur la même propriété CSS (car il y aura conflits entre les deux styles). Exemple :

table {
color: green;
}
td {
color: red;
}

Le navigateur va appliquer une couleur rouge aux cellules du tableau. Car les deux règles spécifiées, portent sur le même style, et entrent en conflit. Si par exemple, vous avez spécifié uniquement la taille du texte des cellules 'td', la couleur du parent sera acceptée par l'élément 'td'. Je vais pas vous donner d'autres exemples, car vous êtes assez grands pour vous débrouiller vous-mêmes. Par contre je vais me concentrer sur quelques éléments délicats

Alignements horizontal et vertical des cellules (text-align et vertical-align)

Juste à titre de rappel :

• le contenu des cellules 'td' est centré verticalement, et aligné à gauche ;
• le contenu des en-têtes 'th' est centré verticalement et horizontalement.

Les propriétés CSS text-align et vertical-align permettent de changer ce réglage par défaut. Je vais pas m'attarder là-dessus, je vous conseille de jeter un coup d'œil sur le chapitre : alignement du texte avec les propriétés CSS text-align et vertical-align

Par contre, et comme toujours, je vais mettre l'accent sur un élément plus ou moins avancé Lorsque vous alignez une cellule qui a été étendue, l'alignement s'effectue par rapport à la taille totale (largeur ou longueur) qui correspond à la somme des cellules fusionnées.

La propriété CSS direction

A tire de rappel, la propriété CSS direction permet de modifier le sens d'écriture et de lecture : ltr (left to right : de gauche à droite) pour les langues 'français', 'anglais' etc. rtl (right to left) pour certaines langues, dont l'écriture et la lecture se font de droite à gauche comme l'arabe.

Appliquée à l'élément table, cette propriété va bouleverser les réglages par défaut :

• les contenu des cellules td ne sera plus aligné à gauche, mais plutôt à droite ;
• le fusionnement horizontal des cellules se fait de droite à gauche, contrairement à ce qu'on a vu dans le chapitre précédant.

Bon créons un petit tableau, qui contient une langue s'écrivant de droite à gauche :

Remarquez le même tableau, mais avec le sens d'écriture traditionnel :

Plus de détails sur la propriété CSS direction.

Empêcher les retours à la ligne avec la propriété CSS white-space

Pour interdire le passage à la ligne dans une cellule, il suffit d'utiliser la propriété CSS white-space et de lui donner la valeur "nowrap". Le navigateur va poursuivre dans la même ligne. Autrement dit les retours à la ligne ne sont reconnus qu'avec la balise <br />. Exemple :

<td style="white-space: nowrap"> beaucoup de Bla Bla </td>

Plus de détails sur la propriété CSS white-space.

Ajouter des bordures aux tableaux

Là on touche un point très sensible, en terme de mise en forme des tableaux, puisqu'un tableau n'est qu'un assemblage de bordures

Les propriétés de style border

Les propriétés CSS border (style, taille et couleur) qu'on a déjà vu, sont applicables aux éléments table, td et th, mais n'opèrent pas avec les balises thead, tfoot, tbody et tr.

• la bordure de l'élément table est le quadrillage externe qui encadre le tableau : les quatre bords de la table ;
• la bordure des cellules d'en-têtes 'th' ou simples 'td' représente le quadrillage qui encadre chaque cellule.

Exemple

Code CSS

table {
border: solid black;
}
td {
border: solid red;
}
th {
border: solid green;
}

Code XHTML

<table>
  <tr>
    <th>Sigles</th>
    <th>Significations</th>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Cascading Style Sheet</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Hypertext PreProcessor</td>
  </tr>
</table>

Je parie que vous arrivez à distinguer les bordures, de l'élément table (noir), celles des en-têtes (vert) et celles des autres cellules (rouge). L'aspect du tableau est loin de me satisfaire, il faut songer à créer un quadrillage simple.

Fusionner les bordures avec la propriété CSS border-collapse

Cette propriété ne peut être associée qu'à la balise table, et elle n'accepte que deux valeurs :

• separate : les bordures des cellules mitoyennes seront dissociées (distinctes), on aura un quadrillage double. C'est la valeur par défaut, et vous pouvez le remarquer dans le tableau ci-dessus ;
• collapse : les bordures seront fusionnées. ce qui va créer un quadrillage simple.

Si on ajoute la propriété CSS border-collapse à l'élément table avec la valeur collapse, le tableau aura cette apparence :

Chaque navigateur se décide à propos des bordures qui seront écrasées et celles qui vont apparaître. Internet Explorer donne la priorité aux bordures de l'élément 'table', les autres navigateurs, préfèrent les écraser par celles des éléments 'th' et 'td'.

La propriété CSS border-spacing

La propriété CSS border-spacing permet de préciser l'espace entre les cellules dans un tableau dont les bordures sont séparées (border-collapse: separate;). Cette propriété peut être associée à l'élément 'table', et sa valeur doit être sous-forme numérique. Exemple :

table {
border-spacing: 10px;
}

Notez que cette propriété n'est pas reconnue par Internet Explorer 6 et 7. Lorsque les bordures du tableau sont fusionnées ou n'existent même pas, on peut pas parler d'espacement entre bordures (border-spacing). Voici le premier tableau avec la règle CSS border-spacing: 6px; :

Modifier les dimensions du tableau (les propriétés CSS : width et height)

Vous pouvez fixer la largeur ou la hauteur du tableau par les propriétés CSS width et height. Sachez tout d'abord que la taille du tableau s'adapte automatiquement avec son contenu. En fait la taille du tableau augmente au fur et à mesure que son contenu augmente aussi, et lorsque le tableau atteint le bord de la page ou de l'élément parent (div etc.), il commence à épuiser la hauteur en faisant des retours à la ligne automatiques. Pour fixer ses propres dimensions, vous devez passer par les propriétés CSS width et height. Exemple :

table {
width: 50%;
height: 160px;
}

Les propriétés CSS width et height peuvent aussi être appliquées aux éléments 'tr', 'td' et 'th'.

Ajuster les espacements internes (padding : remplissage)

Si vous jugez que les cellules de vos tableaux sont trop petites, ou si vous entendez aérer davantage votre tableau, vous serez amené à user de la propriété CSS padding. L'ajustement du remplissage ne peut porter que sur les éléments 'td', 'th' et 'table'. Exemple : On va ajouter les styles suivants au premier tableau :

table {
padding: 10px;
}
th {
padding: 12px;
}

Notez que si vous avez utilisé la règle 'border-collapse: collapse;' le padding pour l'élément 'table' n'a plus raison d'être. Car en fusionnant les bordures, le remplissage est condamné à disparaître.

La propriété CSS empty-cells

Elle détermine si les bordures des cellules vides peuvent s'afficher ou non. L'effet de cette propriété n'est perceptible que lorsque les bordures des cellules ont une largeur non nulle et ne sont pas collées entre elles (border-collapse: separate;). Les valeurs possibles sont :

• show : ce terme signifie en anglais "montrer". A l'aide de cette valeur les bordures des cellules vides vont apparaître (valeur par défaut) ;
• hide : l'équivalent de ce terme en français : cacher. Les bordures des cellules vides seront invisibles. Si le tableau n'a pas de quadrillage (border: 0px;), ou si les bordures sont fusionnées, la valeur hide n'aura aucun effet. Exemple :

Les propriétés CSS background au service des tableaux

Un tableau peut être représenté sous-forme de six calques ou couches superposés. Le fond d'un calque peut apparaître si les couches supérieures sont transparentes.

Je n'ai pas parlé dans les chapitres précédents des balises <col> et <colgroup> qui sont rarement utilisés, et dont l'utilité est peu discutable. Bon, entre nous, ça reste les autres calques : td, tr, thead/tfoot/tbody et enfin table.

Lorsqu'un calque reçoit une couleur ou une image d'arrière-plan, le fond des autres couches inférieures ne sera plus visible. Notez aussi que même si tous les calques sont remplis, une partie du fond de l'élément table qui correspond à l'écart entre les cellules (s'il y a lieu) apparaîtra. Car cette partie-là échappe à la compétence de tous les autres calques. Exemple :

table {
background-color: aqua;
}
tr {
background-color: yellow;
}

Plus de détails sur les propriétés CSS d'arrière-plan : background-color et background-image.

Positionner la légende avec la propriété CSS caption-side

Cette propriété n'est associable qu'à la balise <caption>. Elle précise l'endroit de la légende (titre du tableau). Malheureusement la propriété CSS caption-side n'est pas reconnue par Internet Explorer 6 et 7. Les valeurs possibles sont :

• top : titre placé au-dessus du tableau (réglage par défaut) ;
• left : titre placé à gauche du tableau ;
• bottom : titre placé en-dessous du tableau ;
• right : titre placé à droite du tableau.

Faites très important lorsque vous utilisez les deux propriétés caption-side et margin :

• si la propriété "caption-side" a reçu la valeur "bottom", utilisez la propriété "margin-top", car dans ce cas le titre se trouve en-dessous du tableau, et vice-versa ( margin-bottom avec caption-side: top; ) ;
• de même utilisez margin-left si vous attribuez la valeur "right". et vice-versa (margin-right avec 'caption-side: left;'). Bref le sens de ces deux propriétés doit être toujours contradictoire.

Exemple d'une légende en-dessous du tableau :

Centrer un tableau horizontalement avec la propriété CSS margin

Pour centrer un tableau horizontalement, il faut lui spécifier les propriétés CSS margin-left et margin-right avec une valeur auto. Notez que Le positionnement de la légende suit celui de son tableau sous certains navigateurs.

Voilà c'est terminé, j'espère que je vous ai apporté pas mal d'idées. Dans le prochain tuto on va monter ensemble une mise en forme d'un tableau avec les propriétés CSS.