Les tableaux étape 2 - Cours HTML

Introduction

Info

Ce chapitre est un chapitre qui va vous demander beaucoup d'attention.

Maîtriser les tableaux, c'est maîtriser la mise en page de votre document. Cependant l'apparition du xhtml a fait évoluer cette technique de mise en page avec les tableaux qui n'est plus conseillée mais a mon avis elle reste plus abordable pour les débutants.

La hauteur et la largeur d'un cellule

Info

On peut définir la hauteur et largeur de chaque cellule.

La hauteur d'une cellule : HEIGHT.
La hauteur d'une cellule peut être en % si le tableau est en %. La somme des % des hauteurs des lignes doit être égale au % de la hauteur du tableau.
On écrira <TD HEIGHT="10%">, la cellule prendra 10% de la hauteur du tableau.

La hauteur peut être aussi en pixel. Les cellules sans % se partageront le reste de la hauteur du tableau de façon égale.
La hauteur d'une cellule peut être en Pixel si le tableau est en Pixel. Dans ce cas là, la somme des hauteurs des lignes doit être égale à la hauteur du tableau, sauf si la hauteur du tableau n'a pas été définie.
On écrira <TD HEIGHT="100">

Attention, dans un tableau simple (sans fusion de colonnes) toutes les cellules de la même ligne doivent avoir la même hauteur.

La longueur d'une cellule : WIDTH.
La longueur d'une cellule peut être en % si le tableau est en %. La somme des % des longueurs des colonnes doit être égale au % de la longueur du tableau. Les cellules sans % se partageront le reste de la longueur du tableau de façon égale.
On écrira :
<TD WIDTH="10%">, la cellule prend 10% de la longueur du tableau

La longueur peut être aussi en pixel.
La longueur d'une cellule peut être en Pixel si le tableau est en Pixel. Dans ce cas là, la somme des longueurs des colonnes doit être égale à la longueur du tableau, sauf si la longueur du tableau n'a pas été définie.
On écrira :
Exemple de code :
<TD WIDTH="10">

Pour ma part, je n'utilise que très rarement le % qui reste très aléatoire, sauf quand la taille des cellules n'est pas importante.
J'ai remarqué que Netscape ne tenait pas compte des tailles en px si elles sont inférieures 12px à 15px.

La marge intérieur des cellules

Info

Vous pouvez définir la marge intérieur des cellules mais pas d'une cellule seulement.
Pour cela il faut utiliser l'attribut CELLPADDING de la balise <TABLE>.
On écrira (en px):
Exemple de code :
<TABLE CELLPADDING="10">
.

La couleur d'une cellule

Info

Chaque cellule peut être mis en couleur, grâce à l'attribut BGCOLOR de la balise <TD>.
On écrira
Exemple de code :
<TD BGCOLOR="red">

Je mets à votre disposition les couleurs web.
Netscape, ne tient pas compte de la couleur de la cellule si celle-ci est vide :
Exemple de code :
<TD BGCOLOR="red"></TD>

Il faut donc écrire :
Exemple de code :
<TD BGCOLOR="red"> </TD>

Voici un exemple de cellules vide qui n'est visible que pour les Navigateurs Netscape, pour les utilisateur d' Internet Explorer remarquez l'absence de relief dans la ligne centrale.

Exercice de révision

Exercice

Pour créer ce document, il faut utiliser les balises ainsi que leurs attributs :
<TABLE>
<FONT>
<BR>
<IMG>
l'image à utiliser <IMG src="imagecour.gif" width="100" height="66">
<P>

Voici du texte.
Fait un petit tour dans le glossaire HTML.
Voici l'exemple à reproduire
Voici le code si vous n'y arrivez pas