Bonjour <%=nomCid%>.
Seconde étape vers ton premier site - et attention, pas une petite étape ! - roulement de tambour... les TABLEAUX.

Au menu de cette leçon:

• Introduction
• Définir un tableau
• Attributs de la balise <TABLE>
• Attributs des balises <TR> et <TD>
<%if nivoCid>6 then%>
• A toi de faire : l'exercice.
<%end if%>

Introduction

Objectif : Maîtriser les tables (tables, tableaux : c'est blanc bonnet et choucroute garnie ;) !)

Un tableau se définit comme un arrangement de lignes et de colonnes. Certes. En quoi ceci est-il utile dans le processus de création d'un site web ? Tout simplement parce que en jouant sur le nombre de lignes et de colonnes, leur taille, l'alignement du texte ou de l'image à l'intérieur des cellules etc. on peut optimiser la présentation d'une page. ASP-PHP utilise les tableaux, la page d'accueil de ma zone rédac' aussi... sans oublier la page de cette leçon (ne pas se priver donc d'en visualiser le code source :) !)

Quelques précisions qui ne sont peut-être pas inutiles

Terme	Définition
Ligne	Succession de données disposées horizontalement dans le tableau.
Colonne	Succession... verticale :).
Cellule	Intersection d'une ligne et d'une colonne.
Bordures	Lignes entourant le tableau et ses cellules.
Intitulés	Facultatifs, ils apparaissent dans la première ligne du tableau et servent à désigner le contenu des colonnes.
Titre / Légende	Ce texte apparaissant en principe au-dessus / au-dessous du tableau sert à en indiquer le contenu.

Définir un tableau

Structure de base

<TABLE> </TABLE> indique au navigateur le début et la fin d'une table. Le tableau est ensuite décrit ligne par ligne à l'aide des balises : <TR> </TR> (Table Row). Pour créer des cellules, il faut à l'intérieur de chaque ligne définir des colonnes; deux cas se présentent alors :

• on veut définir une série de cellules d'en-tête (cellules servant de titre aux colonnes, je le rappelle) : on utilise alors à l'intérieur de la ligne la paire <TH> </TH> (Table Head) autant de fois qu'il y a de colonnes...
• on veut définir une série de cellules de données (qui pourront contenir du texte, des images, une table...) : on utilise alors à l'intérieur de la ligne la paire <TD> </TD> (Table Data) autant de fois qu'il y a de colonnes..

Rien de plus simple : il suffit, à l'intérieur des couples <TD> </TD> de taper le texte (avec la mise en forme désirée) ou d'insérer des images comme nous l'avons vu à la leçon 4, le tout à l'endroit désiré du tableau. Un examen du code source de cette leçon permettra d'éclairer davantage le sujet.

Attributs de la balise <TABLE>

Attributs des balises <TR>, <TH> et <TD>

Comme tous les attributs "internes" (qui ont priorité sur la structure externe), la spécification d'un alignement pour une cellule donnée n'est valable que pour cette cellule.
Attention lors de la définition d'une taille pour les lignes et/ou colonnes : la somme des tailles absolues des colonnes/lignes ne doit pas dépasser celle définie pour le tableau dans sa globalité. En cas de conflit, c'est la taille globale qui prévaudra, le navigateur calculant automatiquement celle des lignes/colonnes pour qu'elles s'affichent dans le tableau.
Il n'est pas utile de spécifier toutes les tailles (je rappelle qu'on peut mélanger des spécifications absolues et des pourcentages), on peut se contenter de fixer une valeur particulière pour la ou les colonnes (lignes) les plus significatives et laisser le soin au navigateur de répartir l'espace restant entre le reste des colonnes (lignes), dans la limite de la taille définie pour le tableau.
Si vous souhaitez plus d'exemples d'utilisation des attributs <COLSPAN="x"> et <ROWSPAN="x">, signalez-le moi.