Cours facile HTML / CSS / PHP / MySQL

Listes non-ordonnées
<UL> marque le début de la liste et </UL> sa n <LI> permet de commencer un nouvel item dans la liste
Exemple
<UL> <LI>1<SUP>er</SUP> element <LI>2<SUP>eme</SUP> element <LI>3<SUP>eme</SUP> element </UL>
Listes ordonnées
<OL> marque le début de la liste et </OL> sa n 2 <LI> permet de commencer un nouvel item dans la liste
Exemple
<OL> <LI>1<SUP>er</SUP> element <LI>2<SUP>eme</SUP> element <LI>3<SUP>eme</SUP> element </OL>
pierre-nicolas.clauss@loria.fr (LORIA) Cours HTML / CSS / PHP / MySQL 12 mars 2008 15 / 63
HTML Listes en HTML
Listes de définitions
<DL> marque le début de la liste et </DL> sa n <DT> permet de dénir un titre pour une dénition <DD> permet de dénir le contenu d’une dénition
Exemple
<DL> <DT><STRONG>Cout</STRONG> <DD>Prix de revient <DT><STRONG>Benefice</STRONG> <DD>Gain r e a l i s e par une personne ou une c o l l e c t i v i t e </DL>
Forme du tableau
Un tableau commence par <TABLE> et nit par </TABLE> Une ligne dans un tableau commence par <TR> et nit par </TR> Une cellule dans une ligne commence par <TD> et nit par </TD> Une cellule d’en-tête dans une ligne commence par <TH> et nit par
</TH>
Exemple : 2 lignes x 3 colonnes
<TABLE> <TR> <TD>Cellule 1 ,1</TD> <TD>Cellule 1 ,2</TD> <TD>Cellule 1 ,3</TD> </TR> <TR> <TD>Cellule 2 ,1</TD> <TD>Cellule 2 ,2</TD> <TD>Cellule 2 ,3</TD> </TR> </TABLE>
Cellule 1,1 Cellule 1,2 Cellule 1,3 Cellule 2,1 Cellule 2,2 Cellule 2,3
pierre-nicolas.clauss@loria.fr (LORIA) Cours HTML / CSS / PHP / MySQL 12 mars 2008 18 / 63
HTML Tableau en HTML
Forme du tableau
On peut donner un « titre » au tableau entre <CAPTION> et </CAPTION>, en dehors des dénitions de lignes ou de cellules On peut ranger les lignes entre <THEAD> et </THEAD> pour indiquer qu’elles font partie de l’en-tête On peut ranger les lignes entre <TFOOT> et </TFOOT> pour indiquer qu’elles font partie du pied du tableau On peut ranger les lignes entre <TBODY> et </TBODY> pour indiquer qu’elles font partie des données Attention : <THEAD> et <TFOOT> doivent apparaître avant <TBODY> Il peut y avoir plusieurs <TBODY>
On peut donner des indications de taille sur les colonnes entre <COLGROUP> et </COLGROUP> Entre ces balises, on indique avec <COL width=…> la taille d’une colonne On peut aussi utiliser <COLGROUP span=XX width=YY> pour spécier XX colonnes de taille YY
Les balises <TD> et <TH> ont les attributes : rowspan pour indiquer sur combien de lignes s’étant la cellule colspan pour indiquer sur combien de colonnes s’étant la cellule align pour indiquer l’alignement horizontal dans la cellule (left, right ou center) valign pour indiquer l’alignement vertical dans la cellule (top, middle, bottom)
Bordures du tableau
<TABLE> a les attributs : border pour indiquer l’épaisseur des bordures rules pour indique le type de bordure entre les cellules : none : pas de bordure groups : bordures entre les groupes de lignes (<THEAD>, <TFOOT>, <TBODY> et les groupes de colonnes (<COLGROUP>, <COL>) rows : bordures entre les lignes uniquement cols : bordures entre les colonnes uniquement all : bordures autour de toutes les cellules.