par Chrystian Guy

J’accuse!

J’accuse l’informatique d’être une science tellement inexacte qu’elle fait des hommes de bonne volonté des retardataires méprisables. J’accuse les fabricants de logiciels… non, je n’entre pas là-dedans!

Bon, voilà, avec une semaine de retard, la suite de notre cours.

Les tables, en html, sont de véritables stéroïdes pour les pages web! Elle permettent une mise en page plus précise et surtout la disposition d’éléments sur plusieurs colonnes; enfin, les tables vont vous permettre de contrôler l’affichage de vos pages, nonobstant la grandeur de l’écran de l’internaute qui la regarde. Oui mademoiselle, il y a un dieu pour Carl Lewis et les htmleurs!

La réalisation d’une table en html se fait avec plusieurs ancres (éléments). Voici un exemple des plus simples :

<TABLE>

<TR>

</TR>

</TABLE>

Avant d’expliquer chaque élément, je note au passage pourquoi j’ai indenté les ancres : en programmation, c’est une convention. C’est surtout une très bonne façon de se retrouver dans un code html complexe, à plus forte raison avec des tables. Fin de la note techno-nerd.

TABLE : démarre la table

TR : définit une rangée (Table Row)

TD : définit une cellule (colonne) dans la rangée (Table Data)

On met les éléments textuels ou graphiques à l’intérieur des ancres <TD>, comme par exemple :

<TABLE>

<TR>

</TR>

</TABLE>

Wow! Mais il y a mieux! On peut ajouter des arguments pas mal plus trippant à chaque ancre. Par exemple, la largeur et la hauteur de la table. Je ne vous conseille pas d’essayer de définir la hauteur d’une table, car celle-ci varie surtout selon le contenu que vous y mettez. Mais la largeur! Je vous y oblige!

Si vous voulez que votre page web soit visible sur toutes les grandeurs d’écrans, allez-y pour les plus petits! Donc, la résolution de 640 pixels par 480 pixels sera notre étalon. La portion visible d’une page web dans un écran de 640x480 est de 600 pixels de largeur :

<TABLE WIDTH=600>

[…]

</TABLE>

Maintenant, il faut donner des largeurs à chacune des TD :

<TABLE WIDTH=600>

<TR>

</TR>

</TABLE>

Naturellement, vous pouvez donner n’importe qu’elle valeur à chacune des TD, mais sachez compter! 300 + 400 n’égalent pas 600 !!!

Pour bien voir vos tables à l’étape de la conception, vous pouvez faire apparaître les côtés (les cadres), pour ce faire il faut définir l’option BORDER dans TABLE :

<TABLE WIDTH=600 BORDER=1>

Pour ne pas voir les côtés, utilisez BORDER=0

Le principal problème avec les tables à plusieurs rangées est que, par défaut, les colonnes doivent être de la même largeur, ainsi, l’exemple suivant ne fonctionnera pas :

<TABLE WIDTH=600>

<TR>

</TR>

<TR>

</TR>

</TABLE>

Vous avez sûrement déjà remarqué que pour ajouter une rangée, il suffit de commencer une nouvelle section <TR></TR>. Mais comment bien programmer l’exemple précédant? Il faut tricher un peu…

Il existe un argument de TD qui permet de faire déborder une cellule TD sur plusieurs colonnes. Pour ce faire, il faut d’abord définir des fausses colonnes et faire déborder nos TD sur la base de ces fausses colonnes. Nous utilisons l’argument COLSPAN (Column Span) dans TD pour faire déborder des cellules, comme dans l’exemple qui suit :

<TABLE width=600 border=1>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

Dans la première portion TR, nous avons défini 6 colonnes de 100 pixels (nous aurions pu en mettre 12 de 50, 24 de 25, etc. selon nos besoins). Dans la deuxième section de TR, nous avons 2 TD égales de 300 pixels qui doivent donc chacune déborder sur 3 fausses colonnes; alors que dans la dernière section TR, nous avons une TD de 200 qui doit déborder sur 2 fausses colonnes et une TD de 400 qui doit déborder sur 4 fausses colonnes. Simple, non? Il fallait y penser!

Vous pouvez également faire déborder des rangées. Oui, oui. Pour ce faire il faut utiliser l’argument ROWSPAN dans TD. C’est le même principe… Un petit exemple, parce que vous êtes gentils :

<TABLE width=600 border=1>

<TR>

</TR>

<TR>

</TR>

</TABLE>

Bien sûr que non! D’abord, mais vous le saviez peut-être déjà, vous pouvez faire ce que vous voulez à l’intérieur d’un TD (à condition de respecter la largeur que vous lui avez donnée), paragraphes, gras, italiques, retrait, images, etc… Tout ce que vous avez appris jusqu’à maintenant, vous pouvez l’inclure dans un TD.

Voici, en plus, d’autres arguments pour chaque section d’une table :

TABLE :

ALIGN=(left, right, center) : l’alignement par défaut de la table

CELLPADDING=x : l’espacement, en pixels, à l’intérieur des cellules

CELLSPACING=x : l’espacement entre les cellules

HEIGHT=y : fixe la hauteur de la table (déconseillé)

BGCOLOR="la couleur" : Couleur du fond de la table, comme pour le texte…

TR

ALIGN=(left, right, center) : vous commencez à comprendre…

VALIGN=(top, middle, bottom) : même principe, mais à la verticale

BGCOLOR="la couleur" : pour cette rangée seulement

TD

Idem que pour TR.

Chers disciples, vous avez maintenant le savoir ultime des grands maîtres du HTML. Il ne vous reste plus qu’à faire croître ce pouvoir unique! Allez, je vous aime.

La semaine prochaine (peut-être!), je vous livre mes derniers secrets : une bonne structure de site web et d’autres petits trucs divins. À bientôt!