Les Tableaux

Vous êtes ici : >> HTML-CSS / Les Tableaux
Temps d'étude : 45 min. Niveau : Facile.
Tags : Les Tableaux
Fichier(s) utile(s) pour ce cours : /

Les Tableaux

Les tableaux permettent de représenter des données tabulaires, des statistiques, des listes d'informations en BackOffice, et des newsletters.

Nous ne construirons pas tout un site web avec des tableaux mais pour des raisons historiques de compatibilité les newsletters / emailing (page web envoyé par email) sont construits à l'aide de tableaux.

Pour créer une table il faut réfléchir en ligne et en cellule (de gauche à droite) et non pas en colonne (de haut en bas).

Voici un premier exemple : un bulleting de notes.

table1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Ma Table</title>
			<link rel="stylesheet" href="table1.css">
		</head>
		<body>		
			<table border="1">
					<tr> 
						<th>Matière</th>
						<th>Moyenne</th>
						<th>Coef</th>
						<th>Formateur</th>
						<th>Commentaire</th>
					</tr> 
					
					<tr> 
						<td>Html</td> 
						<td>13</td>
						<td>1</td>
						<td>LT</td>
						<td>Ok !</td>
					</tr>
					
					<tr> 
						<td>Référencement</td>
						<td>10</td>
						<td>1</td>
						<td>XX</td>
						<td>Moyen :-(</td>	
					</tr>
					
					<tr> 
						<td>Droit</td>
						<td>12</td>
						<td>1</td>
						<td>XX</td>
						<td>Pas mal !</td>	
					</tr>
					
					<tr> 
						<td>Marketing</td>
						<td>12</td>
						<td>1</td>
						<td>XX</td>
						<td>Pas mal !</td>	
					</tr>
					
					<tr> 
						<td>Pub</td>
						<td>12</td>
						<td>1</td>
						<td>XX</td>
						<td>Pas mal !</td>
					</tr>
					<tr>
						<td>Général</td>
						<td colspan="4">Avis Favorable !!!</td>
					</tr>
			</table>	 
		</body>
	</html>
	
Decryptons le code Html :
  • TABLE est un tableau

  • TR est une nouvelle ligne

  • TH est une cellule d'entête

  • TD est une cellule

table1.css
	td, th{
	text-align: center;
	}
	tr.changementCouleur:hover{
	background: #f43c80;
	}
	
Decryptons le code Css :
  • td, th{} permet de cibler et selectionner toutes les balises td et th. Nous alignons le texte au centre de la cellule grâce à la propriété text-align: center;

  • tr.changementCouleur:hover{} permet de cibler toutes les balises <TR> possédant la classe "changementCouleur" en effet survolé (:hover) afin d'appliquer un style différent lors du passage de la souris sur l'une des lignes du tableau.
    Essayer de passer votre souris sur le tableau pour mieux le comprendre !

Le Résultat
Matière Moyenne Coef Formateur Commentaire
Intégration : Html / Css 15 1 XX Ok !
Référencement 10 1 XX Moyen :-(
Marketing 13 1 XX Pas mal !
Pub 12 1 XX Pas mal !
Général Avis Favorable !!!

Voici un autre exemple présentant des statistiques :

table2.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Ma Table</title>
			<link rel="stylesheet" href="table2.css">
		</head>
		<body>		
			<table>	
				<tr>	
					<th colspan="4">Statistiques</th> 
				</tr>
				
				<tr>	
					<th>Pays</th>	 	
					<td>France</td> 	
					<td>Italie</td>
					<td>Espagne</td>
				</tr>

				<tr>
					<th>Nombre d'habitants</th>	
					<td>65 000 000</td>	
					<td>60 157 214</td>
					<td>46 661 950</td>
				</tr>
				<tr>
					<th>Capitale</th> 
					<td>Paris</td>
					<td>Rome</td>
					<td>Madrid</td>
				</tr>
			</table>	 
		</body>
	</html>
	
Decryptons le code Html :
  • TABLE est un tableau

  • TR est une nouvelle ligne

  • TH est une cellule d'entête

  • TD est une cellule

  • COLSPAN permet de fusionner des cellules dans le sens horizontal

  • ROWSPAN permet de fusionner des cellules dans le sens vertical

table2.css
	table{
	border-collapse: collapse; /* trait plat */
	width: 700px; /* largeur */
	height: 100px; /* hauteur */
	margin: 0 auto; /* marges */
	}
	th{
	background: #f40c80; /* couleur de fond */
	}
	td, th{
	padding: 7px; /* espacement intérieur */
	border: 1px solid; /* bordure */
	text-align: center; /* alignement du texte au centre */
	}
	
Decryptons le code Css :
  • table{} permet de cibler le tableau et de lui appliquer certaines propriétés : border-collapse permet d'applatir le trait qui dessine le tableau, width c'est la largeur, height pour hauteur et margin 0 auto pour centrer le tableau dans la page web.

  • th{} permet de cibler les cellules d'entête pour leur appliquer une couleur de fond particulière.

  • td, th{} permet d'attraper toutes les cellules du tableau pour leur appliquer padding: 7px; de la marge intérieure, border: 1px solid une bordure et text-align: center; un alignement du texte au centre.

Le Résultat
explications Html / Css

Voici un autre exemple présentant une salle de cours (pour l'entrainement) :

table3.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Ma Table</title>
			<link rel="stylesheet" href="table3.css">
		</head>
		<body>		
		<table>
			<caption>Plan de Classe</caption>
			<tr>
				<td colspan="2" class="vide">  </td>
				<td colspan="2"> Prof	</td>
				<td colspan="2" class="vide">  </td>
			</tr>	
			<tr>
				<td class="vide" colspan="6">  </td>
			</tr>
			<tr>
				<td class="homme"> 1	</td>
				<td class="vide">  </td>
				<td class="femme"> 2	</td>
				<td class="homme"> 3	</td>
				<td class="vide">  </td>
				<td class="femme"> 4	</td>
			</tr>	
			<tr>
				<td> 5</td>
				<td class="vide"> </td>
				<td> 6</td>
				<td> 7</td>
				<td class="vide">  </td>
				<td> 8	</td>
			</tr>
			<tr>
				<td> 9	</td>
				<td class="vide">  </td>
				<td>  10	</td>
				<td>  11	</td>
				<td class="vide">  </td>
				<td> 12	</td>
			</tr>
			<tr>
				<td> 13	</td>
				<td class="vide"> </td>
				<td> 14	</td>
				<td> 15	</td>
				<td class="vide">  </td>
				<td> 16	</td>
			</tr>
			<tr>
				<td> 17	</td>
				<td class="vide"> </td>
				<td> 18	</td>
				<td> 19	</td>
				<td class="vide">  </td>
				<td> 20	</td>
			</tr>
		</table>
		</body>
	</html>
	
Decryptons le code Html :
  • TABLE est un tableau

  • TR est une nouvelle ligne

  • TH est une cellule d'entête

  • TD est une cellule

  • COLSPAN permet de fusionner des cellules dans le sens horizontal

  • ROWSPAN permet de fusionner des cellules dans le sens vertical

table3.css
	table{
	border: 1px solid;
	}
	td{
	width: 200px;
	height: 50px;
	text-align: center;
	border: 1px solid;
	}
	caption{
	font-weight: bold;
	}
	.vide{ border: 0; width: 100px; }
	.homme{ background: #62A9F0 ; }
	.femme{ background: #E52867 ; }
	
Decryptons le code Css :
  • table{} permet de cibler le tableau et de lui appliquer certaines propriétés : border permet d'ajouter un trait pour dessiner le tableau.

  • td{} permet de cibler les cellules pour leur appliquer une largeur width, hauteur height, alignement du texte text-align, une bordure border

  • caption{} permet de cibler le titre du tableau pour appliquer du gras font-weight: bold;.

  • .vide{} permet de donner un effet "vide" à certaines cellules pour dessiner les rangs de notre salle de classe.

  • .homme{} permet de donner une couleur bleue à la place des Hommes dans la classe.

  • .femme{} permet de donner une couleur rose à la place des Femmes dans la classe.

Le Résultat
explications Html / Css