Créer des tableaux (1)
Voici le moment de créer des tableaux. Les tableaux sont très pratiques pour faire de la mise en page. En effet, ils permettent d'aligner des éléments (textes, images,...). Mais ce n'est pas leur unique fonction...
|
<HTML>
<HEAD> <TITLE>Les tableaux</TITLE> </HEAD> <BODY> Voici notre premier tableau avec un bord de 1 : <BR><BR> <TABLE border=1> <TR> <TD>Celulle 1</TD> <TD>Celulle 2</TD> </TR> <TR> <TD>Celulle 3</TD> <TD>Celulle 4</TD> </TR> </TABLE> <BR><BR> Taille des celulles en pixel : <BR><BR> <TABLE width=300 border=1> <TR> <TD width=100>100</TD> <TD width=100>100</TD> <TD width=100>100</TD> </TR> </TABLE> <BR><BR> Taille des celulles en pourcentage : <BR><BR> <TABLE width="60%" border=1> <TR> <TD width="33%">33%</TD> <TD width=34%>34%</TD> <TD width=33%>33%</TD> </TR> </TABLE> </BODY> </HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Voici notre premier tableau avec un bord de 1 :
| Celulle 1 | Celulle 2 |
| Celulle 3 | Celulle 4 |
Taille des celulles en pixel :
| 100 | 100 | 100 |
Taille des celulles en pourcentage :
| 33% | 34% | 33% |
Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur.
Explications des nouvelles balises utilisées :
- <table> et </table> : création d'un tableau. Nous avons dans notre exemple précisé, au moyen de l'attribut "border" (0 par défaut), la taille de la bordure autour des cellules de notre tableau. (la balise de fin est obligatoire !)
- <tr> : débute une nouvelle ligne dans la tableau. La balise de fin (</TR>) n'est pas obligatoire. Chaque fois que le navigateur tombera sur une balise <TR>, il considérera que la ligne précédente est terminée et commencera une nouvelle. Toutes les lignes d'un même tableau doivent contenir le même nombre de celulles.
- <td> : crée une nouvelle celulle dans un tableau. Cette celulle doit être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte... Vous pouvez ensuite créer autant de celulles que vous voulez dans un même ligne. Une celulle peut contenir un peu tout et n'importe quoi. On peut y mettre du texte, des images,... La celulle va s'adapter automatiquement aussi bien en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les celulles d'une même colonne ont la même largeur (celle de la celulle la plus large), idem pour la hauteur des celulles d'une même ligne.
Comme pour "TR", la balise de fin (</TD>) est optionnelle.
Remarques :
- Même si les balises de fin </td> et </tr> sont optionnelles, il veut quand même mieux les utiliser pour éviter des problèmes de compatibilité ou de mise en page avec certains vieux navigateurs.
| Précédent : Liens hypertextes | Suivant : Créer des tableaux(2) |
| Retour au sommaire | |
