Les tableaux... What ??

  Les tableaux dont des blocs individuels sur la page, qui permettent de structurer une page, ou de l'embellir en créant des zones rectangulaires de couleur... Mais ils permettent aussi de présenter des informations de façon ordonnées en lignes et en cellules. Les possibilités sont presque infinies !

Et alors ?

  Tout commence avec la balise <table> Vous pouvez définir dans cette balise si il y a une bordure ou pas, ainsi que l'apparence de cette bordure... grâce à la fonction border='x' ou x représente un nombre... en points.

Exemples :

<table border='0'>

<table border='1'>

<table border='4'>

  Vous pouvez définir la distance entre la bordure et le texte (une marge) grâce au paramètre cellpadding='x' qui doit toujours être déclaré (inscrit) après border

Exemples :

<table border='1' cellpadding='0'>

<table border='1' cellpadding='5'>

<table border='1' cellpadding='10'>

  Et enfin, dans la balise <table> vous pouvez définir également l'épaisseur de cette bordure (pour satisfaire tous les goûts) grâce au paramètre cellspacing='x' Mais cette option peut aussi être utilisée, lorsque border=0 pour faire varier l'espacement entre chaque cellule (comme, par exemple, si le tableau était plus ou moins 'éclaté')

Exemples :

<table border='1' cellpadding='6' cellspacing='0'>

<table border='1' cellpadding='6' cellspacing='5'>

<table border='1' cellpadding='6' cellspacing='10'>

Voici deux tableaux pour illustrer "l'éclatement": un avec un espacement réduit, et un avec un espacement plus conséquent.

espacement 1 pixel cellspacing="1"

espacement 10 pixels cellspacing="10"

Bon... t'a rien d'autre ?

  Si, Si !! Voila pour la mise en forme 'basique' du tableau... Mais il y a bien mieux !

  Tout d'abord, après la balise <table> et ses paramètres, il faut définir une ligne, grâce à la balise <tr>, mais là, il n'y a rien d'autre...

  Ensuite, il faut définir une cellule, ou colonne grâce à la balise <td> et c'est là que tout devient intéressant. Il y a de nombreux paramètres comme la couleur de fond bgcolor='xxx', mais également la taille : hauteur height='x' et largeur widht='x'.
Et sans oublier l'alignement horizontal align='left, center, right' pour respectivement gauche, centre, droite et l'alignement vertical valign='top, middle, bottom' pour respectivement haut, millieu, bas.

  Mais surtout, il y a rowspan='a' et colspan='b' qui permettent d'obtenir une cellulle aussi haute (rowspan) et/ou aussi large (colspan) qu'un nombre a ou b de lignes ou de colonnes...

  Pour la taille des cellules, les 'x' sont en points ou pixels... n'hésitez pas à voir grand !

  Pour la couleur, Voir les bases de l'HTML, j'ai déja tout expliqué...

Maintenant, un exemple :

Tableau sans bordure (marge de 5), largeur totale de 200,
deux lignes, dont une ayant la largeur totale de l'autre et une hauteur de 100,
l'autre une hauteur de 40, et le texte centré partout :

Alors, comment
trouvez-vous	cela ?

Vous aviez demandé le 'code' ? (accrochez-vous)

<table border='0' cellpadding='5'> <tr> <td height='100' bgcolor='#404550' colspan='2' align='center'><font color='#ffffff'> Alors, comment </font> </td> </tr> <tr> <td height='40' bgcolor='#509025' align='center'> <font color='#ffffff'> trouvez-vous </font> </td> <td bgcolor='#002590' align='center'> <font color='#ffffff'> cela ? </font> </td> </tr> </table>

  Rassurez-vous, vous pouvez copier-coller ce 'code', et juste changer les valeurs, et le texte...   Mais il ne faut surtout pas oublier, de 'terminer un tableau'... par exemple : Début d'un tableau : <table> - fin d'un tableau : </table>. Idem pour le reste... (les lignes ou les cellules). Si, par mégarde, vous oubliez une balise de terminaison, l'effet est carrément désastreux sur la page.

  On peut facilement mettre un tableau dans un tableau, et dans un tableau, on peut également mettre n'importe quoi d'autre... Les tableaux sont donc des conteneurs séparés, semblables à une page html séparée inclue sur la même page

  J'espère que c'est assez clair, et que vous pourrez égayer vos messages et vos pages Web avec ces conseils... Toutefois, n'essayez pas dans les e-mails, j'ai fait le test, et ça ne fonctionne pas...