Mise en forme d’un tableau en CSS CSS10

Cet exercice consiste à construire un tableau en HTML et à le mettre en forme en CSS.

Consignes

Créez un dossier racine local qui contiendra la totalité des fichiers de votre exercice.

HTML : Créez une page HTML dans votre dossier racine local.

HTML : Intégrez une feuille de styles interne ou une feuille de styles externe (recommandée) dans votre page html.

Afficher le code pour une feuille interne

Code pour une feuille de style interne :

<head>
    <!-- Feuille de styles interne -->
    <style type="text/css">

    </style>
</head>
Afficher le code pour une feuille externe

Code pour une feuille de style externe :

<head>
    <!-- Feuille de styles externe -->
    <link href="styles.css" type="text/css"  rel="stylesheet">
</head>

La valeur de l’attribut href doit être adapté au contexte (nom du fichier et emplacement).

HTML : Insérez un tableau composé de 3 colonnes et de 4 lignes.

Aperçu du tableau sans mise en forme
Afficher la liste des balises

Liste des balises :

Au minimum trois balises sont nécessaires pour créer un tableau :

  1. <table></table> pour créer le tableau en lui-même.
  2. <tr></tr> pour créer des lignes de tableau (table row).
  3. <td></td> pour créer les cellules de chaque ligne (table division).
Afficher la solution HTML

Solution HTML :

<table>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
    </tr>
</table>

CSS : Ajoutez une largeur au tableau width et centrez-le dans la page en utilisant des marges automatiques.

Tableau dimensionné et centré

Ajouter des marges automatiques à droite et à gauche sur un élément dimensionnable (élément de type block) permet de le centrer à l’intérieur de son conteneur.

Afficher la solution CSS

Solution CSS :

table {
    width: 800px ;
    margin-left: auto ;
    margin-right: auto ;
}

CSS : Ajoutez des bordures aux cellules du tableau.

Ajout de bordures aux cellules
Afficher un indice

Indice :

Quel est l’élément HTML qui correspond aux cellules du tableau ? table, tr ou td ?

Afficher la solution CSS

Solution CSS :

/* Solution 1 : */
td {
    border: 1px solid #bbbbbb ;	
}
/* Solution 2 (plus longue) :*/
td {
    border-width: 1px;
    border-style: solid;
    border-color: #bbbbbb ;	
}

CSS : Supprimez les espaces entre les cellules du tableau en appliquant au tableau la propriété CSS suivante border-collapse: collapse ; pour obtenir le résultat correspondant à l’aperçu.

Afficher la solution CSS

Solution CSS :

table {
    width: 800px ;
    margin-left: auto ;
    margin-right: auto ;
    border-collapse: collapse ;
}

HTML :  Ajoutez une ligne d’en-tête au tableau.

Afficher un indice

Indice :

Il existe en HTML des cellules de tableau particulières qui ont une valeur d’en-tête. Il faut les mettre dans une ligne de tableau classique.

Afficher un deuxième indice

Deuxième indice :

Insérez une ligne normalement en remplaçant td par th (table header).

Afficher la solution HTML

Solution HTML :

<table>
    <tr>
        <th>En-tête 1</th>
        <th>En-tête 2</th>
        <th>En-tête 3</th>
    </tr>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
    <tr>
        <td>D1</td>
        <td>D2</td>
        <td>D3</td>
    </tr>
</table>

CSS : Ajoutez une bordure aux cellules de la ligne d’en-tête.

Ajout de bordures pour la ligne d'en-tête
Afficher la solution CSS

Solution CSS :

/* Solution 1 :
   La virgule permet de définir des propriétés CSS pour plusieurs sélecteurs simultanément 
   On règle les éléments th et les éléments td en une seule fois */
th, td {
    border: 1px solid #bbbbbb;	
}

/* Solution 2 (beaucoup plus longues)  : 
    On règle les éléments th et td en deux déclarations */
th {
    border: 1px solid #bbbbbb;
}
td {
    border: 1px solid #bbbbbb;
}

CSS : Ajoutez une marge interne dans les cellules du tableau afin que le texte ne soit plus collé aux bordures.

Ajout d'une marge interne
Afficher la solution CSS

Solution CSS :

th, td {
    border: 1px solid #bbbbbb;	
    padding: 5px ;
}

HTML : Ajoutez les éléments thead et tbody à votre tableau afin de distinguer les lignes d’en-têtes des lignes de contenu.

Afficher la solution HTML

Solution HTML :

<table>
	<thead>
		<tr>
			<th>En-tête 1</th>
			<th>En-tête 2</th>
			<th>En-tête 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
		</tr>
		<tr>
			<td>B1</td>
			<td>B2</td>
			<td>B3</td>
		</tr>
		<tr>
			<td>C1</td>
			<td>C2</td>
			<td>C3</td>
		</tr>
		<tr>
			<td>D1</td>
			<td>D2</td>
			<td>D3</td>
		</tr>
	</tbody>
</table>

CSS : Modifier la couleur d’arrière-plan des lignes avec une couleur de votre choix différente pour les lignes d’en-têtes et les lignes de contenu. Utilisez la couleur d’arrière-plan des lignes de l’en-tête pour modifier la couleur des bordures.

Ajout de couleur d'arrière-plan aux cellules
Afficher la solution CSS

Solution CSS :

th, td {
    /* Changement de la couleur des bordures */
	border: 1px solid #8f10ff ; 
	padding: 5px ;
}
/* Paramètres pour les lignes d'en-tête uniquement : thead tr signifie les lignes (tr) présentent dans l'en-tête (thead) */
thead tr {
	background-color: #8f10ff ;
	color: #ffffff ; 
}
/* Paramètres pour les lignes de contenu */
tbody tr {
	background-color: #f2ecfe ;
}

CSS / HTML : Alternez les couleurs d’arrière-plan des lignes de contenu paires et impaires.

Deux méthodes à votre disposition :

  1. Ajoutez des classes CSS sur les lignes du tableau
  2. Utilisez le sélecteur nth-child (solution préconisée)
Ajout de couleurs d'arrière-plan alternées entre les lignes paires et impaires
Afficher la solution CSS

Solution CSS :

/* Paramètres pour les lignes de contenu */
tbody tr {
    background-color: #f2ecfe ;
}
/* Paramètres pour les lignes de contenu paires */
tbody tr:nth-child(2n) { 
    background-color: #f9f6ff ;
}

CSS : Ajoutez un effet de survol sur les lignes de contenu au survol de la souris.

Ajout d'un effet de survol
Afficher un indice

Indice :

Pour modifier un élément lorsqu’il est survolé par le pointeur de la souris, il faut utiliser la pseudo classe :hover.

Afficher la solution CSS

Solution CSS :

/* Paramètres pour les lignes de contenu au survol de la souris 
   La pseudo class :hover permet de sélectionner un élément survolé */
tbody tr:hover { 
    background-color: #5000a9 ;
    color: #ffffff ; 
}

Correction

La correction de l’exercice est téléchargeable ci-dessous avec une feuille de styles externe :

Sauf mention contraire*, l'article Mise en forme d’un tableau en CSS [CSS10] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

6 réactions sur “ Mise en forme d’un tableau en CSS [CSS10] ”

  1. Patrice GIRAUD Réponse

    Merci pour le sélecteur nth-child ! Je recherchais quelque chose de ce genre, sans en connaître l’existence. Je m’en suis servi pour aligner à gauche les éléments de la première colonne, et centrer ceux de la deuxième. Tout ça en gardant pour chaque élément une simple balise , toute la mise en forme se trouvant dans la classe.
    Un grand gain de temps, et le “TryIt” de W3Schools permet de vérifier qu’on a bien compris le mécanisme avant de se lancer dans l’implémentation du code.

  2. Pascal QUETIN Réponse

    Très bons exemples et très bonne pédagogie (surtout pour un amateur).
    Bravo

  3. Thomas Réponse

    Ca paraît si simple quand c’est si bien expliqué et détaillé ! Grand merci !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.