Les tableaux étape 2 - Cours XHTML

Introduction

Info

Ce chapitre est un chapitre qui va vous demander beaucoup d'attention.
Si vous ne maîtrisez pas les feuilles de style (css), maîtriser les tableaux, c'est la manière la plus simple pour la mise en page de votre document.

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 peut être définie par une feuille de style: HEIGHT.
La hauteur d'une cellule peut être en % si le tableau est en %.
On écrira :
Exemple de code :
<td style="height:10%">
La cellule prendra 10% de la hauteur du tableau.

La hauteur peut être aussi en pixel. Les cellules sans hauteur définit 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 :
Exemple de code :
<td style="height:100px">

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 peut être définie par une feuille de style : 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 :
Exemple de code :
<td style="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 la longueur du 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 style="width:10px">

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 à la feuille de style background-color.
On écrira
Exemple de code :
<td style="background-color: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 style="background-color:red"></TD>

Il faut donc écrire :
Exemple de code :
<TD style="background-color: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>
<p>
<BR />
<IMG />
l'image à utiliser <img src="imagecour.gif" width="100" height="66" />
Voici du texte.
Fait un petit tour dans le glossaire HTML.
Voici l'exemple à reproduire
Voici le code si vous n'y arrivez pas