Si dans le passé les tableaux étaient utilisés pour définir des grilles de mise en page, leur usage est désormais réservé à l'affichage de données présentées spécifiquement dans une structure tabulaire (données statistiques, tableaux de produits, grilles de tarifs, etc).

### Propriétés de base

#### Rappel sur les tableaux

Dans sa forme la plus simple, un tableau est une élément table qui contient des lignes (éléments tr) composées de cellules (éléments td).

Exemple : tableau basique
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> </head> <body> <table> <tr> <td>Film</td> <td>France</td> <td>Belgique</td> </tr> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> <tr> <td>Totaux</td> <td>20 815 883</td> <td>1 967 235</td> </tr> </table> </body> </html>

Comme on le voit en affichant l'exemple, par défaut un tableau a peu de mise en forme particulière.
Un tableau est un élément de type bloc un peu particulier car il ne prend pas nécessairement toute la largeur de son conteneur, mais uniquement la largeur qui lui est nécessaire pour afficher le contenu de ces cellules.
Le contenu des cellules est quant à lui aligné verticalement et les cellules sont éloignées les unes des autres par un espace de 2 pixels

D'autres éléments HTML permettent d'introduire plus de sémantique dans la description d'un tableau :

- caption définit le titre du tableau,
- thead regroupe les cellules d'en-tête (une ou plusieurs lignes),
- th définit une cellule d'en-tête,
- tbody regroupe les cellules du corps du tableau (une ou plusieurs lignes),
- tfoot regroupe les cellules du corps du tableau (une ou plusieurs lignes).

Exemple : tableau sémantiquement correct
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <!-- les spécifications HTML précisent que le pied d'un tableau doit apparaître après l'en-tête et avant le corps --> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
imbrication des éléments d'un tableau sémantiquement correct

On voit que les éléments th ont par défaut une mise en forme particulière : leur contenu est centré dans la cellule et en gras.

#### Bordure et espacement des cellules

La propriété border permet de définir la taille, la couleur et le style des bordures des cellules.

Exemple : bordure des cellules
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
td, th { border: 1px solid #00bfff; /* bordure 1 pixel bleu */ }
border-spacing à 0

Pour supprimer l'espace entre les celules il pourrait sembler naturel de donner la valeur 0 à la propriété border-spacing, mais on n'obtiendra pas l'effet escompté car l'espace sera bien supprimé, mais le résultat sera des bordures côte à côte.
Ce qu'il faut faire c'est fusionner les bordures avec la propriété border-collapse à la valeur `collapse` (et non `separate`, la valeur par défaut).
Cette propriété est à appliqué à l'élément table.

Exemple : bordure des cellules
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { border-collapse: collapse; /* fusion des bordures */ } td, th { border: 1px solid #00bfff; /* bordure 1 pixel bleu */ }

Nous pouvons ajouter des marges internes avec la propriété padding pour que le contenu d'une cellule ne soit pas collé à sa bordure.

Pour les cellules contenant des nombres, l'alignement à droite est recommandé.

Exemple : bordure, marge et alignement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { border-collapse: collapse; /* fusion des bordures */ } td, th { border: 1px solid #00bfff; /* bordure 1 pixel bleu */ padding: 2px 5px; } /* 2 dernières cellules d'une ligne */ td:nth-last-of-type(1), td:nth-last-of-type(2) { text-align: right; /* alignement à droite */ white-space: nowrap;/* éviter que les sauts de lignes dans les nombres */ }

#### Dimensions

Par défaut un tableau prend ni plus ni moins que la largeur et la hauteur minimum nécessaires pour afficher le contenu de ces cellules.
Si le contenu est moins grand que le conteneur du tableau, le tableau ne prendra pas 100% du conteneur.
Si le contenu est trop grand pour être affiché dans la largeur du conteneur, le contenu sera réparti sur plusieurs lignes dans les cellules. Si il ne tient toujours pas, le tableau aura une largeur plus grande que son conteneur et en dépassera.

On peut bien sûr fixer la largeur d'un tableau avec la propriété width et la hauteur avec la propriété height en unités absolues ou en pourcentage.
Le contenu sera adapté pour tenir compte de ces dimensions, soit par l'agrandissement des dimensions des cellules, soit par du contenu de cellule répartis sur plusieurs lignes.

Exemple : dimensions du tableau
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tbody> <tr> <td>Le seigneur des anneaux</td> <td>20 815 883</td> <td>1 967 235</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tbody> <tr> <td>Le seigneur des anneaux</td> <td>20 815 883</td> <td>1 967 235</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tbody> <tr> <td>Le seigneur des anneaux</td> <td>20 815 883</td> <td>1 967 235</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
/* le 1er tableau est laissé libre de sa taille */ /* le 2éme tableau à une taille "réduite" */ table:nth-of-type(2) { width: 200px; } /* le 3eme tableau prend toute la largeur de la page, et se redimensionne avec elle */ table:nth-of-type(3) { width: 100%; } table { border-collapse: collapse; margin: 1em 0; } td, th { border: 1px solid #00bfff; padding: 2px 5px; } /* 2 dernières cellules d'une ligne */ td:nth-last-of-type(1), td:nth-last-of-type(2) { text-align: right; /* alignement à droite */ white-space: nowrap;/* éviter que les sauts de lignes dans les nombres */ }

On peut donner les dimensions des cellules toujours avec les propriétés width et height en unités absolues ou en pourcentage.
Toutes les cellules d'une même colonne auront la même largeur et toutes les cellules d'une même ligne auront la même hauteur ( sauf bien sûr si on fusionne des cellules avec les attributs `colspan` ou `rowspan` - voir tutoriel HTML ▸ Groupements ▸ Tableaux).

Exemple : dimensions des cellules
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { border-collapse: collapse; margin: 1em 0; } td, th { border: 1px solid #00bfff; padding: 2px 5px; } thead { height: 40px; /* hauteur de la ligne d'en-tête */ } /* largeur et alignement des 2 dernières cellules d'une ligne */ td:nth-last-of-type(1), td:nth-last-of-type(2) { width: 100px; text-align: right; white-space: nowrap; }

#### Dans nos hangars

Complétez le code HTML et le code CSS pour obtenir le tableau ci-dessous.

dans nos hangars

Le tableau est centré horizontalement dans la page et la police utilisée pour le tableau est Verdana ou Helvetica ou sans-serif, à la taille de 15 pixels.

La taille de la police pour le titre est de 18 pixels et le texte est en gras.

La largeur des cellules est de 80 pixels et elles ont une bordure rouge de 1 pixel. La marge interne verticale est de 5 pixels et la marge interne horizontale de 10 pixels.
Les chiffres dans les cellules sont alignés à droite.

Toutes les images se trouvent dans le répertoire `../exemple/img/` et s'appelle dans l'ordre `v8.png`, `v3.png` et `v5.png`.

Code à compléter

Exercice : dans nos hangars
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : dans nos hangars
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Dans nos hangars</caption> <thead> <tr> <th>Vaisseaux</th> <th>A louer</th> <th>A vendre</th> <th>Réservés</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>4 500</td> <td>1 250</td> <td>230</td> </tr> </tfoot> <tbody> <tr> <td><img src="../exemples/img/v8.png"></td> <td>2 200</td> <td>250</td> <td></td> </tr> <tr> <td><img src="../exemples/img/v3.png"></td> <td>1 000</td> <td>500</td> <td>120</td> </tr> <tr> <td><img src="../exemples/img/v5.png"></td> <td>1 300</td> <td>500</td> <td>210</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { font: 15px verdana, helvetica, sans-serif; border-collapse: collapse; /* fusion des bordures */ margin: 0 auto; /* tableau centré */ } /* titre du tableau */ caption { font-size: 18px; font-weight: bold; margin-bottom: 0.5em; } td, th { border: 1px solid red; /* bordure 1 pixel rouge */ padding: 5px 10px; /* marge interne */ white-space: nowrap; /* pas de saut de ligne */ } td { text-align: right; width: 80px; }

Modifiez la solution pour gérer un effet de survol de la souris. A son passage au dessus des images on affiche un agrandissement (`v8_big.jpg`, `v3_big.jpg` et `v5_big.jpg`) avec le nom des vaisseaux (Droïd Gunship, X-Wing et Naboo Starfighter). | survol vaisseau 1
survol vaisseau 2 | survol vaisseau 3

Une solution possible

Exercice : dans nos hangars
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Dans nos hangars</caption> <thead> <tr> <th>Vaisseaux</th> <th>A louer</th> <th>A vendre</th> <th>Réservés</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>4 500</td> <td>1 250</td> <td>230</td> </tr> </tfoot> <tbody> <tr> <td> <img src="../exemples/img/v8.png"> <figure> <img src="../exemples/img/v8_big.jpg"> <figcaption>Droïd Gunship</figcaption> </figure> </td> <td>2 200</td> <td>250</td> <td></td> </tr> <tr> <td> <img src="../exemples/img/v3.png"> <figure> <img src="../exemples/img/v3_big.jpg"> <figcaption>X-Wing</figcaption> </figure> </td> <td>1 000</td> <td>500</td> <td>120</td> </tr> <tr> <td> <img src="../exemples/img/v5.png"> <figure> <img src="../exemples/img/v5_big.jpg"> <figcaption>Naboo Starfighter</figcaption> </figure> </td> <td>1 300</td> <td>500</td> <td>210</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { font: 15px verdana, helvetica, sans-serif; border-collapse: collapse; /* fusion des bordures */ margin: 0 auto; /* tableau centré */ } /* titre du tableau */ caption { font-size: 18px; font-weight: bold; margin-bottom: 0.5em; } td, th { border: 1px solid red; /* bordure 1 pixel rouge */ padding: 5px 10px; /* marge interne */ white-space: nowrap; /* pas de saut de ligne */ } td { text-align: right; width: 80px; position: relative; /* devient bloc de référence pour position absolue de la 2eme image */ } td figure { display: none; /* cachée par défaut */ position: absolute; /* positionnement */ top: 0; /* positionnement */ z-index: 1; /* positionnement */ margin: 0; border: 10px solid white; background: white; font-weight: bold; text-align: center; box-shadow:0 0 10px 2px rgba(0, 0, 0, 0.8); } /* au survol de la 1ére cellule d'une ligne du corps du tableau on affiche la 2eme image */ tbody td:first-of-type:hover figure { display: block; }

### Mise en forme

#### Couleur/image de fond

Pour mettre une couleur de fond (ou une image de fond ou un dégradé) on utilise comme d'habitude la propriété background qui est applicable à tous les éléments constitutifs d'un tableau (table, tr, td, caption, thead, th, tbody et tfoot).
La couleur finalement visible tient compte de l'imbrication des éléments : c'est la couleur donnée à l'élément le plus profond dans l'imbrication qui est visible.

imbrication des éléments d'un tableau
Exemple : couleur de fond
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Nombre d'entrées pour les films de la trilogie du Seigneur des Anneaux</caption> <thead> <tr> <th>Film</th> <th>France</th> <th>Belgique</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>20 815 883</td> <td>1 967 235</td> </tr> </tfoot> <tbody> <tr> <td>La communauté de l'anneau</td> <td>6 822 407</td> <td>541 274</td> </tr> <tr> <td>Les deux tours</td> <td>7 063 746</td> <td>664 070</td> </tr> <tr> <td>Le retour du roi</td> <td>6 930 000</td> <td>761 891</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
/* image de fond pour le tableau entier */ table { background: url(../exemples/img/lsda2.jpg); background-size: cover; height: 200px; border-collapse: collapse; margin: 1em auto; /* centré dans la page */ color: white; } /* mise en forme du titre du tableau */ caption { background: #b69d52; margin-bottom: 2px; border: 1px solid #aaa; } /* dégradé de fond de l'en-tête : une couleur vers transparent - laisse apparaitre l'image de fond de la table petit à petit */ thead { background: linear-gradient(#b69d52 10%, rgba(182, 157, 82, 0.2) 100%); } /* dégradé de fond du pied: inverse de l'en-tête */ tfoot { background: linear-gradient(to top, #b69d52 5%, rgba(182, 157, 82, 0) 100%); } td, th { border: 1px solid #aaa; padding: 2px 5px; } td:nth-last-of-type(1), td:nth-last-of-type(2) { width: 100px; text-align: right; }

#### Zébrage

Pour les tableaux qui ont de nombreuses colonnes et/ou de nombreuses lignes, on peut améliorer la lisibilité en changeant de couleur pour les lignes paires et les lignes impaires. Avec le selecteur CSS3 de pseudo-classe :nth-of-type(n) c'est on ne peut plus simple.

Exemple : zébrage
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Top 10 des films de science-fiction en France</caption> <thead> <tr> <th>Titre</th> <th>Année</th> <th>Entrées</th> </tr> </thead> <tbody> <tr> <td>Avatar</td> <td>2009</td> <td>14 775 990</td> </tr> <tr> <td>Vingt mille lieues sous les mers</td> <td>1954</td> <td>9 623 712</td> </tr> <tr> <td>E.T. l'extra-terrestre</td> <td>1982</td> <td>9 420 339</td> </tr> <tr> <td>Star Wars : La Menace fantôme</td> <td>1999</td> <td>7 830 052</td> </tr> <tr> <td>Le Cinquième Élément</td> <td>1997</td> <td>7 704 669</td> </tr> <tr> <td>Orange mécanique</td> <td>1972</td> <td>7 611 645</td> </tr> <tr> <td>Star Wars : La Revanche des Sith</td> <td>2005</td> <td>7 230 417</td> </tr> <tr> <td>Jurassic Park</td> <td>1993</td> <td>6 738 210</td> </tr> <tr> <td>Star Wars : Un nouvel espoir</td> <td>1977</td> <td>6 459 530</td> </tr> <tr> <td>Le Gendarme et les Extra-terrestres</td> <td>1979</td> <td>6 280 070</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { border-collapse: collapse; margin: 0 auto; } /* mise en forme du titre du tableau */ caption { padding: 5px; font-weight: bold; } thead { background: rgb(3, 184, 207); color: white; } /* lignes impaires du corps du tableau */ tbody tr:nth-of-type(odd) { background: rgb(218, 238, 243); } td, th { border: 1px solid #aaa; padding: 5px 10px; } td:nth-last-of-type(1), td:nth-last-of-type(2) { text-align: right; white-space: nowrap; }

#### Survol des lignes

Pour augmenter encore la lisibilité, il est très facile de gèrer le survol des lignes pour mettre en évidence les informations contenues dans une rangée. On utilisera bien sûr la pseudo-classe hover en la faisant porter sur les éléments tr du corps du tableau (ou du tableau entier).

Exemple : zébrage
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Top 10 des films de science-fiction en France</caption> <thead> <tr> <th>Titre</th> <th>Année</th> <th>Entrées</th> </tr> </thead> <tbody> <tr> <td>Avatar</td> <td>2009</td> <td>14 775 990</td> </tr> <tr> <td>Vingt mille lieues sous les mers</td> <td>1954</td> <td>9 623 712</td> </tr> <tr> <td>E.T. l'extra-terrestre</td> <td>1982</td> <td>9 420 339</td> </tr> <tr> <td>Star Wars : La Menace fantôme</td> <td>1999</td> <td>7 830 052</td> </tr> <tr> <td>Le Cinquième Élément</td> <td>1997</td> <td>7 704 669</td> </tr> <tr> <td>Orange mécanique</td> <td>1972</td> <td>7 611 645</td> </tr> <tr> <td>Star Wars : La Revanche des Sith</td> <td>2005</td> <td>7 230 417</td> </tr> <tr> <td>Jurassic Park</td> <td>1993</td> <td>6 738 210</td> </tr> <tr> <td>Star Wars : Un nouvel espoir</td> <td>1977</td> <td>6 459 530</td> </tr> <tr> <td>Le Gendarme et les Extra-terrestres</td> <td>1979</td> <td>6 280 070</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
table { border-collapse: collapse; margin: 0 auto; } caption { padding: 5px; font-weight: bold; } thead { background: rgb(3, 184, 207); color: white; } /* lignes impaires du corps du tableau */ tbody tr:nth-of-type(odd) { background: rgb(218, 238, 243); } /* survol des lignes */ tbody tr:hover { background: #ff4500; color: white; } td, th { border: 1px solid #aaa; padding: 5px 10px; } td:nth-last-of-type(1), td:nth-last-of-type(2) { text-align: right; white-space: nowrap; }

#### Dans nos hangars : le retour

A partir du code HTML ci-après, complétez le code CSS pour obtenir le tableau ci-dessous.

dans nos hangars : le retour

Le tableau est centré horizontalement dans la page et la police utilisée pour le tableau est Verdana ou Helvetica ou sans-serif, à la taille de 15 pixels et de couleur blanche.

La taille de la police pour le titre est de 40 pixels et le texte est en gras. Le titre a des marges verticales de 16px. L'effet néon sur le texte est fait avec des ombres sans décalage : une ombre de 4 pixels couleur `#FFF`, une ombre de 4 pixels couleur `#FFFF33`, une ombre de 6 pixels couleur `#FFDD33`, une ombre de 11 pixels couleur `#FF8800` et une ombre de 18 pixels couleur `#FF2200`.

Les cellules d'en-tête et de pied ont une ombre sans décalage de 4 pixels, avec 1 pixel de renfort et de couleur `#FF8800`. Pour que le contour des cellules soit bien visibles, leur bord ne doit pas être fusionné.

La largeur des cellules est de 80 pixels. La marge interne verticale est de 5 pixels et la marge interne horizontale de 10 pixels.
Les chiffres dans les cellules sont alignés à droite.

Quand la souris survol une ligne du corps du tableau, l'affichage de la figure suivante doit être réalisé.

dans nos hangars : le retour - Survol d'une ligne

Les cellules sont entourée par la même ombre que les cellules d'en-tête et de pied, sauf pour la couleur qui est `#ddc067`. la couleur de fond des cellules devient `#111` et le curseur de la souris change pour la forme `pointer`.

Code à compléter

Exercice : dans nos hangars - le retour
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Dans nos hangars</caption> <thead> <tr> <th>Vaisseaux</th> <th>A louer</th> <th>A vendre</th> <th>Réservés</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>4 500</td> <td>1 250</td> <td>230</td> </tr> </tfoot> <tbody> <tr> <td><img src="../exemples/img/v8.png"></td> <td>2 200</td> <td>250</td> <td></td> </tr> <tr> <td><img src="../exemples/img/v3.png"></td> <td>1 000</td> <td>500</td> <td>120</td> </tr> <tr> <td><img src="../exemples/img/v5.png"></td> <td>1 300</td> <td>500</td> <td>210</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
CODE CSS A COMPLETER

Une solution possible

Exercice : dans nos hangars - le retour
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table> <caption>Dans nos hangars</caption> <thead> <tr> <th>Vaisseaux</th> <th>A louer</th> <th>A vendre</th> <th>Réservés</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>4 500</td> <td>1 250</td> <td>230</td> </tr> </tfoot> <tbody> <tr> <td><img src="../exemples/img/v8.png"></td> <td>2 200</td> <td>250</td> <td></td> </tr> <tr> <td><img src="../exemples/img/v3.png"></td> <td>1 000</td> <td>500</td> <td>120</td> </tr> <tr> <td><img src="../exemples/img/v5.png"></td> <td>1 300</td> <td>500</td> <td>210</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
body { background: url(../exemples/img/etoiles.jpg); } /* pas de border-collapse sur la table pour que les cellules soient bien séparées par un border-spacing */ table { font: 15px verdana, helvetica, sans-serif; border-spacing: 8px; margin: 0 auto; color: white; } /* titre du tableau */ caption { font-size: 40px; font-weight: bold; margin: 16px 0; color: black; text-shadow: 0 0 4px white, 0 0 4px #FFFF33, 0 0 6px #FFDD33, 0 0 11px #FF8800, 0 0 18px #FF2200; } /* cellules en-tête et pied */ thead th, tfoot th, tfoot td { box-shadow: 0 0 4px 1px #FF8800; } /* survol des lignes */ tbody tr:hover td { box-shadow: 0 0 4px 1px #ddc067; background: #111; cursor: pointer; } td, th { padding: 5px 10px; /* marge interne */ white-space: nowrap; /* pas de saut de ligne */ } td { text-align: right; width: 80px; }

Modifiez la solution pour gérer l'affichage d'informations complémentaires quand la souris survole les lignes du corps du tableau.

Quand la souris survole une ligne on affiche les prix de location et de vente d'un vaisseau.

survol d'une ligne

Ligne | Location | Vente
1 | 1 000 € / h | 60 000 €
2 | 2 500 € / h | 149 999 €
3 | 5 000 € / h | 200 000 €

Les textes sont affichés avec la police Consolas ou monaco ou monospace, en taille 13 pixels et dans une couleur composée de rouge 237, vert 211 et bleu 1. Les textes sont centrés horizontalement et placés tout en bas de la cellule.

Quand la souris survole la 1ère cellule d'une ligne on affiche dans un tableau des informations sur le vaiseau.

survol de la 1ère cellule

Les informations sur un vaiseau sont présentées dans un tableau de 3 lignes et 2 colonnes.

| Ligne 1 | Ligne 2 | Ligne 3
Nom | Droid Gunship | X-Wing | naboo N-1
Vitesse | 14 200 km/h | 1 000 km/h | 1 100 km/h
Equipage | Aucun | 1 pilote | 1 pilote

Le tableau d'informations occupe tout l'espace de la cellule et a un fond noir transparent à 50%. Les textes sont affichés avec la police Consolas ou monaco ou monospace, en taille 13 pixels. Dans la 1ère colonne, les textes sont en blancs et alignés à droite. Dans la 2ème colonne ils sont alignés à gauche et leur couleur est composée de rouge 237, vert 211 et bleu 1.

Une solution possible

Exercice : dans nos hangars - le retour
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <table class="hangar"> <caption>Dans nos hangars</caption> <thead> <tr> <th>Vaisseaux</th> <th>A louer</th> <th>A vendre</th> <th>Réservés</th> </tr> </thead> <tfoot> <tr> <th>Totaux</th> <td>4 500</td> <td>1 250</td> <td>230</td> </tr> </tfoot> <tbody> <tr> <td> <img src="../exemples/img/v8.png"> <table class="info"> <tr><td>Nom</td><td>Droid Gunship</td></tr> <tr><td>Vitesse</td><td>14 200 km/h</td></tr> <tr><td>Equipage</td><td>Aucun</td></tr> </table> </td> <td>2 200 <div>1 000 € / h</div> </td> <td>250 <div>60 000 €</div> </td> <td></td> </tr> <tr> <td> <img src="../exemples/img/v3.png"> <table class="info"> <tr><td>Nom</td><td>X-Wing</td></tr> <tr><td>Vitesse</td><td>1 000 km/h</td></tr> <tr><td>Equipage</td><td>1 pilote</td></tr> </table> </td> <td>1 000 <div>2 500 € / h</div> </td> <td>500 <div>149 999 €</div> </td> <td>120</td> </tr> <tr> <td> <img src="../exemples/img/v5.png"> <table class="info"> <tr><td>Nom</td><td>Naboo N-1</td></tr> <tr><td>Vitesse</td><td>1 100 km/h</td></tr> <tr><td>Equipage</td><td>1 pilote</td></tr> </table> </td> <td>1 300 <div>5 000 € / h</div> </td> <td>500 <div>200 000 €</div> </td> <td>210</td> </tr> </tbody> </table> </body> </html>
Fichier CSS : styles.css
body { background: url(../exemples/img/etoiles.jpg); } /* tableau principal */ .hangar { font: 15px verdana, helvetica, sans-serif; border-spacing: 8px; margin: 0 auto; color: white; } /* titre du tableau principal */ .hangar > caption { font-size: 40px; font-weight: bold; margin: 16px 0; color: black; text-shadow: 0 0 4px white, 0 0 4px #FFFF33, 0 0 6px #FFDD33, 0 0 11px #FF8800, 0 0 18px #FF2200; } /* cellules en-tête et pied du tableau principal */ .hangar > thead th, .hangar > tfoot th, .hangar > thead td { box-shadow: 0 0 4px 1px #FF8800; } /* Indication des prix */ .hangar div { position: absolute; bottom: 0; text-align: center; width: 100%; left: 0; display: none; font: 13px Consolas,monaco,monospace; color: rgb(237, 211, 1); } /* survol des lignes du corps du tableau principal */ .hangar > tbody > tr:hover > td { box-shadow: 0 0 4px 1px #ddc067; background: #111; cursor: pointer; } /* au survol des lignes du corps du tableau principal on rend les prix visibles */ .hangar > tbody > tr:hover > td div { display: block; } /* tableau avec les infos sur un vaisseau */ .info { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border-collapse: collapse; border-spacing: 0; display: none; font: 13px Consolas, monaco, monospace; height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: 100%; } /* au survol de la 1ére cellule du corps du tableau principal on rend le tableau information visible */ .hangar > tbody > tr > td:first-of-type:hover .info { display: block; } /* tous les td et th des tables */ td, th { padding: 5px 10px; position: relative; white-space: nowrap; } td { text-align: right; width: 80px; } /* on redéfinit les td du tableau d'informations */ .info td:first-of-type { width: auto; color: white; text-align: right; } .info td:last-of-type { width: auto; color: rgb(237, 211, 1); text-align: left; }