le système de tableaux ( cours pratique de html )

alors ....

comme tu le sais déja, hautetfort possède un système de blocs libres, que tu peux remplir à ta guide dans ton panneau d'administration du blog : présentation>contenu des colonnes> tout en bas : champs de bloc libre.

tu lui donne un titre, puis, tu vas devoir copier ce code dans le pavé de texte a remplir qu'on te propose :

<table>

<tr>
<td> <a href="http://lien.html"> <img src="http://image.jpg" border="0"> </a></td>
<td> <a href="http://lien.html"> <img src="http://image2.jpg" border="0"> </a> </td>
</tr>

</table>

explications de ce code de base :

en rouge, les balises <table> et </table> tout ce qui est entre les deux est un tableau.

à l'intérieur, tu remarques deux types de balises, en bleu les <tr> </tr>et en vert les <td> </td>.

les <tr> désignent les lignes. tout ce qui est entre <tr> et </tr> sera sur la meme ligne du tableau .
les <td> désignent les cellules du tableau. tout ce qui est entre <td> et </td> sera à l'intérieur de la même cellule.

explications sur le fonctionnement du langage html

tu auras remarqué que toute ouverture de balise (<tr> par exemple ) necessite une balise de fermeture avec un / ( </tr> par exemple ) . c'est très important.

si tu te souviens des parenthèses en mathématiques, c'est le meme principe . il fallait les compter de façon a ce qu'on en ait pas plus d'ouvertes que de fermées :D .

le code que je t'ai donné permet de créer un tableau tout simple, composé de deux cellules , sur une seule ligne . deux td dans une seule balise tr. ( le tout encadré par table et /table )

à l'intérieur, j'ai mis le code pour une image servant de lien.

tu remarqueras que c'est le même principe : la balise < a href> est toujours refermée par un </a> . ici, cette balise <a> enferme un code pour l'affichage de l'image.

exemple pratique d'un tableau d'une autre taille.

admettons que tu veuilles faire un tableau qui a trois lignes, et deux colonnes. je ne mets pas l'intérieur des cellules en détail mais voila ce que ça donnerait :

<table>
<tr>(ligne 1)
<td>intérieur cellule 1</td>
<td>intérieur cellule 2</td>
</tr>(fin de la ligne 1)

<tr>(ligne 2)
<td>intérieur cellule 3</td>
<td>intérieur cellule 4</td>
</tr>(fin de la ligne 2)

<tr>(ligne 3)
<td>intérieur cellule 5</td>
<td>intérieur cellule 6</td>
</tr>(fin de la ligne 3)
</table> .

OK, j'ai fait un tableau, mais que mettre dedans ?

l'intérieur des cellules se comporte comme une page web normale, tu peux donc y mettre les memes éléments, texte, image, centré , a gauche, a droite, en bas, de la couleur, un fond ... tout ce que tu fais déja sur ton blog en fait. mais ça n'affectera que la cellule. pas ses voisines.

si tu veux par exemple qu'un fond noir affecte une seule cellule : tu écriras sa balise <td> comme ça :

<td background="black"> intérieur de la cellule </td>

seule cette cellule sera noire.

si par contre dans la première balise <table> , tu mets :

<table background="black">
c'est tout le fond de ton tableau qui sera noir.

pour controler l'espacement entre les cellules, tu auras besoin de ces balises là, a mettre dans la balise table :

cellpadding> taille du tour de cellule.
cellspacing> espacement des cellules entre elles.

ça se note comme ça :

<table cellpadding="20" cellspacing="1">
( la par exemple ça te donne un tableau avec beaucoup d'espace entre le contenu et le bord, dans chaque cellule, mais 1 pixel seulement d'espace entre les cellules, à l'extérieur )

je sais que tout ça peut sembler confus mais ...

je te propose de poser tes questions à la suite de ce message, et de m'expliquer exactement quel genre de tableau tu veux faire ( => pour donner quel aspect final ? )

je t'aiderai à le créer, et puis je t'apprendrai comment le modifier si necessaire :D
_________________
Lew a dit ( le 19/4/05) : " et pourquoi l'anonymous ? parce que Mario Bross "