Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Formatage des tableaux avec les propriétés de style CSS (1/2)

Formatage des tableaux avec les propriétés de style CSS (1/2)

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

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 :

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 :

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 :

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.

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>
Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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 :

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

Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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

Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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;
}
Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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;
}
Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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.

Plus de détails sur la propriété CSS padding (espace interne ou remplissage).

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 :

Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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.

la balise table

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;
}
Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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 :

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

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

Légende en bas
Sigles Significations
CSS Cascading Style Sheet
PHP Hypertext PreProcessor

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.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau