HTML et CSS: Cours tutoriel les tableaux

Et voila vous êtes maintenant en mesure de pouvoir créer une page Web.
Donc vous pouvez créer un site. Il ne vous reste plus grandes choses pour terminer avec les bases du langage HTML.

Somaire

Les tableaux en HTML

HTML & CSS

Dans cette partie du cours nous allons parler des tableaux qui sont des éléments très important dans la conception de sites. Je crois que tout le monde sait ce qu'est un tableau.
Un tableau est constitué de linges et de colonnes, et donc de cellules.

Pour créer un tableau en HTML nous avons besoin de trois balises principales qui sont :

  • La balise <table> pour dire à l'explorateur qu'il s'agit d'un tableau
  • La balise <tr> pour les lignes
  • La balise <td> pour les cellules

Partie 1 : Des tableaux simple

Première balise: <table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau
Cette balise est de type block, il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML

Sélectionner le code
	
	<p>C'est un paragraphe qui se trouve avant le tableau.</p>
	<table>.
	   <!-- Ici, on mettra le contenu du tableau -->
	</table>.
	<p>C'est un paragraphe qui se trouve après le tableau.</p>
	
 

puis deux importantes nouvelles balises :
* <tr> </tr> : indique le début et la fin d'une ligne du tableau.
* <td> </td> : indique le début et la fin d'une cellule.

En XHTML, on construit le tableau ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Par exemple, si je veux faire un tableau à deux lignes, avec 4 cellules par lignes (donc 4 colonnes), je devrai taper ceci :
Code : HTML

Sélectionner le code
	
	<table>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	</table>
	
 

Ajouter des bordures, vous connaissez déjà le code CSS qu'il faut écrire !
Code : CSS

Sélectionner le code

	td /* Toutes les cellules des tableaux... */
	{
	   border: 1px solid black; /* ... une bordure de 1px */
	}
	
 

Il existe une propriété CSS spécifique aux tableaux : border-collapse, qui signifie "coller les bordures entre elles".
Elle peut prendre 2 valeurs :
* collapse : les bordures seront collées entre elles, c'est ce qu'on recherche.
* separate : les bordures seront dissociées (valeur par défaut)
Code : CSS

Sélectionner le code
	
	table
	{
	   border-collapse: collapse; /* Les bordures du tableau seront collées  */
	}
	td
	{
	   border: 1px solid black;
	}
	
 

La ligne d'en-tête

Maintenant que l'on a ce qu'on veut, on va ajouter la ligne d'en-tête du tableau. Dans notre exemple, les en-têtes sont "Produit", "quantité", "prix unitaire en €" et "Total".
La ligne d'en-tête se crée aussi avec un <tr> , mais les cellules à l'intérieur sont des <th> et non pas des <td> !!!
Code : HTML

Sélectionner le code
	
	<table>
	   <tr>
			<th> Produit </th>
			<th> Quantité </th>
			<th> Prix unitaire en € </th>
			<th>Total </th>
	   </tr>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	</table>
	
 

Et le code CSS:

Sélectionner le code
	
	td, th /* Mettre une bordure sur les td ET les th */
	{
	   border: 1px solid black; 
	}
	
 

Titre du tableau

Le tableau peut avoir un titre qui renseigne le visiteur sur le contenu du tableau.
La balise <caption> . Cette balise se met au début du tableau. C'est elle qui indique le titre du tableau :
Code : HTML

Sélectionner le code
	
	<table>
	   <caption>Liste de produits</caption>
	   <tr>
			<th> Produit </th>
			<th> Quantité </th>
			<th> Prix unitaire en € </th>
			<th>Total </th>
	   </tr>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	</table>
	
 

Partie 2 :Des tableaux plus complexes

Ces petits tableaux suffisent dans la plupart des cas, mais il se peut que vous ayez besoin de tableaux plus... complexes.
Nous allons voir 2 techniques particulières :
Pour les gros tableaux, il est possible de les diviser en 3 parties :
En-tête
Corps du tableau
Pied de tableau
Pour certains tableaux, on peut avoir besoin de fusionner des cellules.

Diviser un gros tableau

Si vous avez un très grand tableau, il faut le découper en plusieurs parties. Pour cela, il existe des balises XHTML qui permettent de définir
les 3 parties du tableau :

L'en-tête en haut: les balises <thead></thead>
Le corps au centre: les balises <tbody></tbody>
Le pied du tableau en bas: les balises <tfoot></tfoot>
Il faut mettre les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>

Voici donc le code à écrire pour faire le tableau en 3 parties :
Code : HTML

Sélectionner le code
	
	<table>
	   <caption>Passagers du vol 377</caption>
	   <thead> <!-- En-tête du tableau -->
		   <tr>
			<th> Produit </th>
			<th> Quantité </th>
			<th> Prix unitaire en € </th>
			<th>Total </th>
	   </tr>
	   </thead>
	   <tfoot> <!-- Pied de tableau -->
		<tr>
			<td> Total </td>
			<td>   </td>
			<td>   </td>
			<td> 650</td>
	   </tr>
	   </tfoot>
	   <tbody> <!-- Corps du tableau -->
			<tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   <tr>
			<td> Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   </tbody>
	</table>
	
 

Il n'est pas obligatoire d'utiliser ces 3 balises (thead, tbody, tfoot) sur un tableau. sauf si votre tableau est assez gros et que vous voulez l'organiser plus clairement.
Pour les petits tableaux garder l'organisation qu'on a vu au début.

Fusion de cellules

Sur des tableaux complexes, on a souvent besoin de "fusionner" des cellules entre elles.
Exemple de fusion:
Pour fusionner des cellules, on ajouter un attribut à la balise <td>.
Il existe 2 types de fusion :
* La fusion horizontale : c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
* La fusion verticale de lignes : deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.
On utilisera l'attribut rowspan.
Il faut donner une valeur à l'attribut (colspan ou rowspan).
C'est le nombre de cellules à fusionner entre elles. Pour deux cellules :
On écrira donc: <td colspan="2">

Fusion horizontal :

On a dit que c'est la fusion qui s'effectue horizontalement sur des colonnes.
On utilise l'attribut colspan.
<td colspan="2"> FUSION DE DEUX CELLUES
On peut fusionner plus de cellules à la fois (3, 4, 5... comme vous voulez).
Code : HTML

Sélectionner le code
	
	<table>
	   <caption>Liste de produits</caption>
	   <tr>
			<th> Produit </th>
			<th> Quantité </th>
			<th> Prix unitaire en € </th>
			<th>Total </th>
	   </tr>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
		</tr>
		<tr>
			<td> Stylo </td>
		<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
		</tr>
		<tr>
			<td colspan="3">Total</td>
			<td>225</td>
		</tr>
	</table>
	
 

Fusion verticale :

C'est un petit peu compliqué.
Prenons notre tableau de tout à l'heur ce lui avec 6 lignes et où il y a sur la première colonne une répétition de stylo si on veut fusionner les deux
cellules stylo qui se suivent .
Lisez bien cet exemple pour comprendre.
Code : HTML

Sélectionner le code
	
	 <table>
		  <caption>Liste de produits</caption>
		<tr>
			<th> Produit </th>
			<th> Quantité </th>
			<th> Prix unitaire en € </th>
			<th>Total </th>
		</tr>
		<tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
		</tr>
		<tr>
			<td rowspan="2">Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
		</tr>
		<tr>       	
		<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   <tr>
			<td> cahier</td>
			<td> 50</td>
			<td> 2,50 </td>
			<td>125 </td>
	   </tr>
	   <tr>
			<td rowspan="2">Stylo </td>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	   <tr>
			<td> 50 </td>
			<td> 2 </td>
			<td> 100 </td>
	   </tr>
	</table>
	
 

Partie 3 : Décoration avec du CSS

Et avec le CSS on peut rendre nos tableaux plus beaux...
La plupart des propriétés CSS dont nous aurons besoin vous les connaissez .
Un rappelle :
Pour modifier la bordure des cellules, on utiliser border.
Pour modifier la couleur de fond d'une cellule, on utilise background-color.
Pour modifier l'image de fond d'une cellule, on utilisera background-image
Mais on modifie aussi la taille (font-size) et la police (font-family) du texte des cellules d'en-tête, en appliquant les propriétés aux balises <th>
On agrandit aussi le tableau tout entier (width), le centrer (margin:auto et oui le tableau est un block).
On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges intérieures des cellules (padding).
Code : CSS

Sélectionner le code

caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif; 
   font-weight: bold; 
   font-size: 150%;
   color: #CC8800; 
   margin-bottom: 20px; /* Pour éviter que le titre ne soit collé au tableau en dessous */
}
table /* Le tableau  lui-même */
{
   margin: auto; /* Centré le tableau */
   border: 4px outset blue; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tête */
{
   background-color: #000066; 
   color: white; 
   font-size: 1.2em; 
   font-family: Arial, "Arial Black", Times,  serif; 
}
td /* Les cellules normales */
{
   border: 1px solid black; 
   font-family:   Times, "Times New Roman", serif; 
   text-align: center; /* Tous les textes des cellules seront centrés*/
  padding: 5px; /*  marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

 

Partie 4 : Designe d'un site avec des tableaux

Et en fin voila le desinge d'une page web avec des tableaux.
Changez le comme vous voulez ou l'utiliser comme il est vous êtes libre c'est offert en cadeau.
Code HTML à enregistrer dans le dossier mon site sous le nom que vous voulez ( page_desinge.html par exemple)

Sélectionner le code
	
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>	
			
		<meta name="author" content="monsite.com" lang="fr" />
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		
		<link rel="stylesheet" href="style.css" type="text/css" />
		<title>mon site </title>
	</head>
	<body class="site">
	<div class="div_principal"><!--ce div contient toute  la page-->
		<table class="tableau_haut" cellspacing="0">
			<tbody><tr><!-- un tableau pour l'entete de la page-->
				<td class="haut_1">
			<a href="index.php"><img src="images/banniere.png" alt="banniére" border="0"/></a>
		
				</td>
				<td class="haut_2">
						<h1 class="entete1">Apprendre le code du designe avec des tableaux</h1>
				</td>
				</tr>
				</tbody>
		</table>
		<div class="menu"><!-- un div pour le menu-->
				<a href="index.php" class="menu"  title="Aller à l'accueil">Accueil</a>
				<span class="separateur_menu">|</span> 
				<a href="" class="menu">news</a> 
				<span class="separateur_menu">|</span> 
				<a href="" class="menu">Forum</a> 
				<span class="separateur_menu">|</span> 
				<a href="" class="menu">autre menu</a>
				<span class="separateur_menu">|</span> 
				<a href="" class="menu">A Propos</a>
		</div>
			
		<table class="tableau_principal" cellspacing="0"><!-- un tableau pour le corps-->
			<tr>
				<td rowspan="3"class="principal_1"><!-- espace pour la publicité-->
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)
				(!-- ici vous mettez la publicité si vous en avez --)			
				</td>
				<td class="principal_6hg"></td>
				<td class="principal_3"></td>
				<td class="principal_6hd"></td>
			</tr>
			<tr>
				<td class="principal_2">			
				</td>
				<td class="corp">
				<table class="secod1"><tr><td class="secod11">
				<!-- ici vous mettez ce que vous voulez -->
				(!-- ici vous mettez ce que vous voulez --)<br />
				(!-- ici vous mettez ce que vous voulez --)
				(!-- ici vous mettez ce que vous voulez --)<br />
				(!-- ici vous mettez ce que vous voulez --)
				(!-- ici vous mettez ce que vous voulez --)<br />
				(!-- ici vous mettez ce que vous voulez --)<br />
				(!-- ici vous mettez ce que vous voulez --)
				</td>
				<td class="secod11"><!-- ici vous mettez ce que vous voulez -->
				(!-- ici aussi vous mettez ce que vous voulez --)
				(!-- ici aussi vous mettez ce que vous voulez --)
				(!-- ici aussi  vous mettez ce que vous voulez --)
				(!-- ici aussi  vous mettez ce que vous voulez --)
				(!-- ici aussi vous mettez ce que vous voulez --)</td>
				
				</tr>
				<tr><td colspan="2" class="secod11">
				<!-- ici vous mettez ce que vous voulez -->
				(!--de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)<br />
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)
				(!-- de meme  ici vous mettez ce que vous voulez --)<br />
				(!-- de meme  ici vous mettez ce que vous voulez --)
				</td>
			</tr>
			<tr><td  colspan="2" class="secod11"><
				!-- ici vous mettez ce que vous voulez -->
				(!--la aussi vous mettez ce que vous voulez --)<br />
				(!-- la aussi vous mettez ce que vous voulez --)
				(!--la aussi vous mettez ce que vous voulez --)
				(!-- la aussi vous mettez ce que vous voulez --)
				(!--la aussi vous mettez ce que vous voulez --)
				(!-- la aussi vous mettez ce que vous voulez --)<br />
				(!--la aussi vous mettez ce que vous voulez --)
				(!-- la aussi vous mettez ce que vous voulez --)
				
				</td>
			</tr>
		</table>
	</td>
	<td class="principal_5"></td>
	</tr>

	<tr>
	<td class="principal_6bg"></td>
	<td class="principal_4"></td>
	<td class="principal_6bd"></td>
		
	</tr>		
	</table>

	<div class="div_bas">
		<!-- bas de page-->			
	</div>
	</div>
	</body>
	</html>

	
 

Et le code CSS qui va avec à enregistrer dans le dossier mon site sous le nom "style.css" par exemple

Sélectionner le code
	
	body.site
	{
		margin:5px;
		background:#6B9BBF;
		text-align:left;
		font:normal  arial;
	}
	div.div_principal
	{
		width:100%;
		height:100%;
		margin:auto;
		padding:0px;
		border:0px solid #000000;
		background:#0066cc;
		font:normal 11px arial;
		color:#000000;
	}
	div.menu
	{
		width:auto;
		height:15px;
		margin:05px;
		padding:0px;
		border:01px solid #FFFFFF;
		font:bold 11px arial;
		clear:both;
		text-align:center;
	}

	table.tableau_haut
	{
		width:100%;
		height:110px;
		margin:0px;
		padding:0px;
		border:0px;
		background:url("/images1/fond.gif") repeat-x;
		color:#FFFFFF;
	}
	td.haut_1
	{
		width:250px;
		height:90px;
		padding:0px;
		border:0px;
		text-align:center;
		vertical-align:middle;
	}
	td.haut_2
	{
		width:auto;
		height:auto;
		padding:0px;
		border:0px;
		text-align:center;
		vertical-align:middle;
	}
	table.tableau_principal
	{
		width:100%;
		height:auto;
		margin:0px;
		padding:0px;
		border:0px;
		
	}
	td.corp
	{
		width:auto;
		height:auto;
		padding:0px;
		border:0px;
		background:#FFFFFF;
		vertical-align:top;
	}
	td.principal_1
	{
		color:#FFFFFF;
		width:130px;
		height:auto;
		padding:5px;
		border:0px;
		text-align: left;
		vertical-align:top;
	}
	td.principal_2
	{
		width:20px;
		height:auto;
		padding:0px;
		border:1px;
		background:url("../images1/bord_gauche.png")repeat-y;
		
	}
	td.principal_3
	{
		width:auto;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/bord_haut.png") repeat;
	}
	td.principal_4
	{
		width:auto;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/bord_bas.png") repeat-x;
	}
	td.principal_5
	{
		width:auto;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/bord_droit.png") repeat-y;
	}
	td.principal_6hg
	{
		width:20px;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/coin_haut_gauche.png") ;
	}
	td.principal_6hd
	{
		width:20px;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/coin_haut_droit.png") ;
	}
	td.principal_6bg
	{
		width:20px;
		height:20px;
		padding:0px;
		margin:0px;
		border:0px;
		background:url("../images1/coin_bas_gauche.png") repeat-x;
	}
	td.principal_6bd
	{
		width:20px;
		height:20px;
		padding:0px;
		border:0px;
		background:url("../images1/coin_bas_droit.png") repeat-x;
	}
	h1.enete
	{
	color:#FFFFFF;
	}
	h2.enete1
	{
	margin:10px;
	color:#FFFFFF;
	}
	h2.forme
	{
	margin:10px;
	color:#0000FF;
	text-align:center;
	}
	span.separateur_menu
	{
		color:#FFFFFF;
	}

	a
	{
		color:#0000FF;
		text-decoration:none;
		font-weight: bold; 
	}
	a:hover
	{
		color:#FF0000;
		text-decoration:underline;
	}
	a:active
	{
		color:#FF9900;
		text-decoration:none;
	}
	a.menu
	{
		color:#ccffdd;
		text-decoration:none;
	}
	a.menu:hover
	{
		color:#FFFF00;
		text-decoration:underline;
	}
	a.menu:active
	{
		color:#FFFFFF;
		text-decoration:none;
	}
	div.div_bas
	{
		height:90px;
		margin:0px;
		padding:0px;
		border:0px solid #000000;
		background:#0066cc;
		font:normal 11px arial;
		text-align:center;
		color:#FFFFFF;
	}
	table.secod1
	{
		width:100%;
		height:auto;
		margin:0px;
		padding:0px;
		border:1px solid #0066cc;
		
	}
	td.secod11
	{
		width:50%;
		height:auto;
		margin:0px;
		padding:5px;
		border:1px solid #0066cc;
		font:12px arial;
		vertical-align:top;
	}
	td:first-letter /* Je veux que la première lettre de mes cellules... */
	{
	float: left; /* Flotte à gauche */
	font-size: 1.5em; /* Fasse une hauteur de 3 lignes */
	font-weight: bold;

	} 
	.font_bleu
	{
	color: #0000FF;
	}
	
 

Avant de quitter cette partie du cours je tiens à vous dire que certaines images mensionnées dans le code CSS sont manquantes exprès remplacez les par des images de votre choix à condition que la taille de l'image soit 20x20px. Ces images sert à la decoration seullement.

Par carabde 10 mars 2014

chapitre précédent chapitre suivant