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.

Solution HTML :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

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

Aperçu du tableau sans mise en forme
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).
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.

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

CSS : Ajoutez des bordures aux cellules du tableau.

Ajout de bordures aux cellules
Indice :

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

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.

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

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

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.

Deuxième indice :

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

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
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
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.

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

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

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

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.

6 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Patrice GIRAUD
6 années il y a

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.

zki
zki
6 années il y a

bonne presentation merci. cordialement z.ki

Pascal QUETIN
Pascal QUETIN
4 années il y a

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

Thomas
Thomas
4 années il y a

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