Exercice HTML : «Tableaux

Réf : 2010_11_18_exo_8_Tableau.doc
Exercice HTML : «Tableaux »
http://www.siteduzero.com/tutoriel-3-13584-les-tableaux.html#ss_part_1
Insérer un tableau dans la page
Rappel : Balises :
<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, donc il faut la mettre en dehors d'un paragraphe.
Le tableau se construit ligne par ligne :
<tr> </tr> : indique le début et la fin d'une ligne du tableau.
<td> </td> : indique le début et la fin du contenu d'une cellule.
La ligne d'en-tête se crée avec un <tr> comme on a fait jusqu'ici, mais les cellules à l'intérieur sont cette fois
des <th> et non pas des <td> !
Travail à réaliser :
En partant de l’exercice précédent (avec les styles dans le head : 2010_10_14_style_separes_2 )
1- Créer un nouveau chapitre en bas de la page : TABLEAU RÉCAPITULATIF, séparé par une ligne horizontale. et un
sous-chapitre ; Tableau 1: Les chapitres du cours
2- Avec les indications du cours, créer un tableau de 4 lignes et 4 colonnes.
3-
Placer la table à droite ou à gauche en ajoutant un style dans le head et l’attribut « float » :
Donner une «id » à la table :
<table id="tableau" border=”3”>
Faire flotter à gauche ou à droite, en ajoutant du style à l’id « tableau » dans le head :
#tableau {float: left;}
On ne peut pas de cette façon centrer le tableau.
4- Centrer le tableau
4-1 avec l’attribut « align » dans la balise « table ».
Revenir à la situation du §2 : supprimer l’id et le style mis au §3
Ajouter un attribut « align » dans la balise table :
<table border=”3” align="center">
4-2 avec l’attribut « align » dans une div qui encadre la table.
<div align="center">
<table>
</table>
</div>
Exercez-vous à changer l’épaisseur de la bordure.
Constant AXELRAD – Anne BOUTARIN - Jean-Claude CHÊNE – Daniel GAUDIN
Réf : 2010_11_18_exo_8_Tableau.doc
5
Ligne en-tête.
La ligne d'en-tête se crée avec un <tr> comme on a fait jusqu'ici, mais les cellules à l'intérieur sont cette fois
des <th> et non pas des <td> !
<tr> <th>Nom</th> <th>Contenu 1</th> <th>Contenu 2</th> <th>Contenu 3</th> </tr>
Mettre le style des balises « th et td » dans le head:
td, th {border: 1px solid black;}
Le navigateur a mis le texte des cellules d'en-tête en gras
6
Titre du tableau.
C’est la balise <caption></caption>
« tableau des cours HTML de l'UIAD »
7
Simplifier les bordures de la table : mettre le style collapse de
la balise « table » dans le head
table { border-collapse: collapse; }
8
Mettre le titre du tableau en bas
Placer dans le head le style de la balise « caption »
caption {caption-side: bottom; }
On peut le placer à droite ou à gauche avec left et right
9
Changer la police et la couleur du titre
Ajouter dans le style de caption :
font-weight: bold; font-size: 16px; color: #009900;
font-family: Arial;
10
11
Modifier la couleur d’une cellule
Pour modifier la couleur de fond d'une cellule, on utilisera background-color. Pour la couleur de la police
On utilisera simplement : color.
Exemple avec la ligne en-tête : th
th {background-color: silver; color :purple ;}
Largeur des colonnes
Dans la première ligne, fixer la largeur de la cellule : « td ».
<td width= ”100px”> contenu de la cellule </td>
A faire dans une seule ligne
12
Centrer les textes dans les cellules, police arial : balise « td »
td {text-align:center ; font-family: Arial ;}
Constant AXELRAD – Anne BOUTARIN - Jean-Claude CHÊNE – Daniel GAUDIN