Les Tableaux
1. Balises usuelles
Un tableau html est constitué de plusieurs balises et le CSS permet de lui donner sa forme et son apparence (ainsi que de son contenu bien sûr!)

Les balises à utiliser pour un tableau d'une rangée de deux cellules :
<table>
<tr>
<td>contenu de la cellule 1</td>
<td> contenu de la cellule 2</td>
</tr>
</table>
Tous les attributs html qui existaient ent en HTML4 pour déterminer la mise en forme du tableau et des cellules ont été supprimées en HTML5 et remplacées par des propriétés CSS : table { border: 1px solid #CC3333; width: 300px;
}
td { border: 1px solid #CC3333; padding: 5px;
}
Ce qui permettra d' afficher :

Pour obtenir une seule borduree entre les cellules, on utilise la propr propriété : border-collaps collapse de l'élément table. Ce qui donne:

F. Abouzaid

Page 1

Propriétés d'alignement des cellules cellules: -

Alignement horizontal: text text-align Alignement vertical: vertical vertical-align:top, center ou bottom.

Exemple: table { border: 1px solid #CC3333; width: 300px; border-collapse:collapse; collapse:collapse;
}
td
{
border: 1px solid #CC3333; padding: 5px; height:50px; }
#cel1
{ vertical-align:top; align:top;
}
#cel2
{
vertical-align:bottom; align:bottom; background-color: color: #99ccff;
}
Ce qui donne:

F. Abouzaid

Page 2

2. Légende
Ill est possible d'entrer les informations (légende) grâce à la balise <caption>.
<table >
<caption>
La liste des vélos
</caption>
<tr>
<td>contenu de la cellule 1</td>
<td>contenu de la cellule 2</td>
</tr>
</table>

Ce qui affichera :
3. Fusionner les cellules
Pour effectuer une fusion de cellules , on rajoute un attribut colspan ou rowspan à la balise <td> selon que l'on veut fusionner des lignes ou des colonnes.
Exemple:
<table>
<TR>
<TH
</TR>
<TR>
<TD
<TD
</TR>
<TR>
<TD
</TR>
<TR>
<TH
<TD
</TR>
<TR>
<TD
</TR>
</table>

F. Abouzaid

ColSPAN=2 >Espèces</TH>

ROWSPAN=2 >Végétaux</TD>
>Fruits</TD>

>Fleurs</TD>

ROWSPAN=2 >Animaux</TH>
>Chiens</TD>

>Chats</TD>

Page 3

4.