Les tableaux en HTML [HTML04]

Cet exercice consiste à créer des tableaux en HTML.

Consignes de l’exercice

Créez un dossier racine intitulé html04-racine à l’emplacement de votre choix.

Créez une nouvelle page HTML tableau.html dans le dossier racine avec le code suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Titre de la page</title>
		<style type="text/css">
			/* Ajout de bordures sur les tableaux en CSS */
			table {
			border-collapse: collapse;
			}
			td, th {
			border: 1px solid black;
			}
		</style>
	</head>
	<body>
	
	</body>
</html>

Les lignes 6 à 14 permettent d’ajouter des bordures en CSS aux tableaux que vous allez créer dans cet exercice.

Créez le tableau suivant sur la page tableau1.html.

<table>
	<tr>
		<td>Lenny</td>
		<td>04/12/1987 (Valence)</td>
		<td>thelenny@gmail.com</td>
	</tr>
	<tr>
		<td>Omer</td>
		<td>22/01/1995 (Lyon, 8ème)</td>
		<td>omer@bbb.com</td>
	</tr>
	<tr>
		<td>Maurice</td>
		<td>11/10/1978 (Lyon, 8ème)</td>
		<td>momo@lveulft.com</td>
	</tr>
	<tr>
		<td>Kevin</td>
		<td>21/09/2001 (Lyon, 7ème)</td>
		<td>kev69@yahoo.com</td>
	</tr>
</table>

Créez le tableau suivant en précisant que la première ligne est une ligne d’en-tête.

<table>
	<tr>
		<th>Prénom</th>
		<th>Date de naissance</th>
		<th>Courriel</th>
	</tr>
	<tr>
		<td>Lenny</td>
		<td>04/12/1987 (Valence)</td>
		<td>thelenny@gmail.com</td>
	</tr>
	<tr>
		<td>Omer</td>
		<td>22/01/1995 (Lyon, 8ème)</td>
		<td>omer@bbb.com</td>
	</tr>
	<tr>
		<td>Maurice</td>
		<td>11/10/1978 (Lyon, 8ème)</td>
		<td>momo@lveulft.com</td>
	</tr>
	<tr>
		<td>Kevin</td>
		<td>21/09/2001 (Lyon, 7ème)</td>
		<td>kev69@yahoo.com</td>
	</tr>
</table>

Créez le tableau suivant en séparant l’en-tête, le corps et le pied (à ajouter) du tableau.

<table>
	<thead>
		<tr>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Lenny</td>
			<td>04/12/1987 (Valence)</td>
			<td>thelenny@gmail.com</td>
		</tr>
		<tr>
			<td>Omer</td>
			<td>22/01/1995 (Lyon, 8ème)</td>
			<td>omer@bbb.com</td>
		</tr>
		<tr>
			<td>Maurice</td>
			<td>11/10/1978 (Lyon, 8ème)</td>
			<td>momo@lveulft.com</td>
		</tr>
		<tr>
			<td>Kevin</td>
			<td>21/09/2001 (Lyon, 7ème)</td>
			<td>kev69@yahoo.com</td>
		</tr>
	</tbody>
</table>

Créez le tableau suivant en fusionnant des cellules sur plusieurs colonnes.

<table>
	<thead>
		<tr>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Lenny</td>
			<td colspan="2">Aucune information</td>
		</tr>
		<tr>
			<td>Omer</td>
			<td>22/01/1995 (Lyon, 8ème)</td>
			<td>omer@bbb.com</td>
		</tr>
		<tr>
			<td>Maurice</td>
			<td colspan="2">Aucune information</td>
		</tr>
		<tr>
			<td>Kevin</td>
			<td>21/09/2001 (Lyon, 7ème)</td>
			<td>kev69@yahoo.com</td>
		</tr>
	</tbody>
</table>

Créez le tableau suivant en fusionnant des cellules sur plusieurs lignes.

<table>
	<thead>
		<tr>
			<th>Groupe</th>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Groupe</th>
			<th>Prénom</th>
			<th>Date de naissance</th>
			<th>Courriel</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td rowspan="2">Groupe A</td>
			<td>Lenny</td>
			<td>04/12/1987 (Valence)</td>
			<td>thelenny@gmail.com</td>
		</tr>
		<tr>
			<td>Omer</td>
			<td>22/01/1995 (Lyon, 8ème)</td>
			<td>omer@bbb.com</td>
		</tr>
		<tr>
			<td rowspan="2">Groupe B</td>
			<td>Maurice</td>
			<td>11/10/1978 (Lyon, 8ème)</td>
			<td>momo@lveulft.com</td>
		</tr>
		<tr>
			<td>Kevin</td>
			<td>21/09/2001 (Lyon, 7ème)</td>
			<td>kev69@yahoo.com</td>
		</tr>
	</tbody>
</table>

S’abonner

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.

1 Commentaire

Le plus ancien

Le plus récent Le plus populaire

Commentaires en ligne

Afficher tous les commentaires

LAIB

3 années il y a

Bonjour,

Super site pour s’entrainer . Explication claire. Grand merci pour vos efforts.

Répondre