C'est rien, c'est le métier qui rentre ^^
C'est parfait en tout cas (:

Partie 2 : Les balise " Tr" et "Td"
constituent l'intérieur du tableau .
La balise "tr" marque une ligne de votre tableau , la balise "td" marque une cellule .

Je vais te montré avec un exemple :

le code :

Code:

<table cellspacing='20' >
<tr><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td></tr>

<tr><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td></tr></table>

J'adore le Gleek Club!	J'adore le Gleek Club!
J'adore le Gleek Club!	J'adore le Gleek Club!

J'ouvre une balise "tr" pour créer une ligne et je la ferme pour passer à une autre.
Ici j'ai mis deux cellules ("td") par ligne mais vous pouvez en mettre beaucoup plus.

Quelques éléments pour mieux comprendre:


• Tu remarqueras que j'ai mis "cellspacing='20'" dans la balise table , cette propriété permet d'espacer les cellules du tableau entre elles , ici de 20 px.

• La propriété "padding" accroché aux balises "Td" permet de créer une marge entre le bords de la cellule, ici en gris, et les éléments que vous souhaitez mettre à l'intérieur , ici le texte "J'adore le Gleek Club!".

• Pour certaines couleurs, il n'est pas nécessaire de mettre le code couleur , tu peux simplement mettre le nom comme c'est le cas ici avec la bordure "Grey". Ca marche aussi avec "Pink" ou "Blue" par exemple , des couleurs simples.

• Tu peux mettre tout un tas d'éléments dans les cellules. Tu peux même intégrer un sous tableau dans une cellule. Ex :

J'adore le Gleek Club!	J'adore le Gleek Club! J'adore le Gleek Club! J'adore le Gleek Club! J'adore le Gleek Club!
J'adore le Gleek Club!	J'adore le Gleek Club!

Code:

<table cellspacing='20' >
<tr><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; "><table cellspacing='10' >
<tr><td style="padding: 20px; border: 3px solid pink;  ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid pink; ">J'adore le  Gleek Club!</td></tr>

<tr><td style="padding: 20px; border: 3px solid pink;  ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid pink;  ">J'adore le Gleek Club!</td></tr></table></td></tr>

<tr><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td><td style="padding: 20px; border: 3px solid grey; width: 200px ; height: 150px; ">J'adore le Gleek Club!</td></tr></table>

La seule limite est ton imagination.

• N'oublie pas de toujours fermer vos balises table , tr et td !!

Compris?

Voilà voilà :

Croque la vie à pleines dents...

Tant que tu le peux encore...

Bleu un jour, bleu pour toujours!	Bleu un jour, bleu pour toujours! Bleu un jour, bleu pour toujours! Violet, violet, violet ♥ Violet, violet, violet ♥
Vocal Adrenaline is winner !	Vocal Adrenaline is winner !

Tu progresses vite, c'est bien x)

Maintenant tu vas me faire:

• un tableau à deux lignes et trois cellules chacune.
• avec un contours bleu, en pointillé pour chaque cellule.
• une marge intérieur des cellules de 40 px et un espacement entre les cellules de 10 px.
• Un petit texte dans chaque cellule.

Bonne chance ^^

Voila

Bleu comme le ciel…	Bleu comme tes yeux…	Bleu comme la mer…
Bleu comme de l’eau…	Bleu comme un myosotis…	Bleu comme la nuit…

C'est P.A.R.F.A.I.T

Partie 3 : Créer sa propre fiche de personnage

J'ai choisi un feuille de perso assez classique, j'espère qu'elle t'ira
Voilà un plan de ce que tu auras au final :

Spoiler:

En regardant , avec les notions que tu as vu plus haut , tu peux voir que la fiche se divise en trois :

Spoiler:

• A : Cette partie est constituée d'un tableau à une ligne et deux cellules .

• B: Cette partie est constituée d'une simple balise "div" que tu as pas encore vu. Mais qui est très simple , c'est comme si tu avez une cellule.

• C : Il y a tout d'abord un texte. Puis en dessous il y a un tableau à une ligne et deux cellules. Dans la première cellule , il y a un sous-tableau.


Nous allons construire notre fiche étape par étape


Tout d'abord il faut construire le squelette du tableau. Une ligne et deux cellules, distante chacune d'une 50 ène de pixels (cellspacing='50') .

Code:

<table cellspacing='50'><tr><td></td><td></td></tr></table>

Une fois construit , il faut remplir le tableau !
Les deux cellules ont le même fond rouge (propriètés "background" ), sont arrondi ("-moz-border-radius") , et ont la même taille ( "Width"& "height"). Je leur applique :

Code:

<table cellspacing='50' ><tr><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td></tr></table>

Maintenant il va falloir remplir tout ça
Nous allons commencer par la première cellule qui comporte un texte et une image .
On commence par l'image , pour cette fiche j'utilise la balise :

Code:

<img src="ADRESSE DE L'IMAGE" >

Je la met entre ma balise td et ma balise /td :

Code:

<table cellspacing='50' ><tr><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><img src="http://i44.tinypic.com/2mwgzzm.jpg" ></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td></tr></table>

Maintenant ajoutons un texte au dessus de l'avatar , pour commencer on va simplement l'écrire avant la balise img :

Code:

<table cellspacing='50' ><tr><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; ">Nom prénom<img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td></tr></table>

Mais comme tu peux voir visuellement c'est pas ça !

Nom prénom

On va déjà ajouter un propriété "Text-align" à notre cellule ("td") pour que le texte soit centré :

Code:

 <table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; ">Nom prénom<img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td></tr></table>

Nom prénom

Ensuite nous allons ajouter une balise :

Code:

<font face="NOM DE LA POLICE" size=TAILLE DE LA POLICE ></FONT>

autour de notre texte . J'ai choisi la police "Impact" pour une taille de 10 :

Nom prénom

Code:

<table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><font face="impact" size=5 >Nom prénom</FONT><img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "></td></tr></table>

Voilà pour la première cellule ,passons à la deuxième
Ici on va inséré une balise :

Code:

<div></div>

à l'intérieur de notre cellule pour mettre le texte dedans et que ce soit sympa à regarder. Tu vas comprendre
Nous allons d'abord construire cette div :

Code:

<table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><font face="impact" size=5 >Nom prénom</FONT><img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><div ></div></td></tr></table>

Je lui ajoute une taille ("width" & "height"), une couleur de fond (background), un arrondi ("-moz border-radius"), une marge interne (padding) ainsi qu'une marge externe ("margin") :

Code:

<table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><font face="impact" size=5 >Nom prénom</FONT><img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><div style="margin: 10px; padding: 20px; background:  #ffffff; -moz-border-radius: 20px; width : 210px ; height: 320px; "></div></td></tr></table>

Nom prénom

j'écris un texte dans cette div :

Code:

<table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><font face="impact" size=5 >Nom prénom</FONT><img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><div style="margin: 10px; padding: 20px; background:  #ffffff; -moz-border-radius: 20px; width : 210px ; height: 320px; ">




Age:

Nom:

Statut :

Groupe : </div></td></tr></table>

Nom prénom

Age: Nom: Statut : Groupe :

Voilà pour la partie A ! C'est pas magnifique mais c'est pas le but ^^ C'est pour te montrer le fonctionnement .
Comme exercice j'aimerais que tu me fais une partie A avec tes propres couleurs, fond , arrondis (ou pas) ... Prends ton temps, je sais que ca peux être long
La partie B sera plus simple , et le partie C plus compliqué


J'espère que tu as bien , si tu as des questions n'hésitez pas

Travail fini pour la partie A

Deschanels Zooey

Identity Age : Statut : Date de naissance : Groupe :

Je pourrais avoir le code s'il te plait?

Code:

<table cellspacing=’30’><tr><td style=" text-align: center; background: #00CCCC; -moz-border-radius: 10px; width: 230px ; height: 350px; "><font face=" Comic sans MS" size=5 color=#000066>Deschanels Zooey</font><img src="http://i32.servimg.com/u/f32/09/02/43/72/zoeyde10.png" style=" margin: 10px; border: 6px dotted white; -moz-border-radius:10px;"></td><td style=" text-align: center; background: #00CCCC; -moz-border-radius: 10px; width: 200px; height: 320px; "><font face=" Georgia" size=3 color=#006666>Identity</font><div style=" width 210px ; height: 320px; margin: 15px; padding: 20px; background: #FFFFFF; -moz-border-radius: 15px;  ">

[color=#009999]Age :


Statut :


Date de naissance :


Groupe : [/color]</div></td></tr></table>

Il y a une erreur dans ton code car dans la fiche il y a un espace entre l'avatar et l'histoire.
J'en es refait un autre. Prend le même modéle mais change les couleurs, les fonds et les arrondis

Nom Prénom

Age : Nom: Statut: Groupe:

Code:

<table cellspacing='50' ><tr><td style=" text-align: center;  background: red; -moz-border-radius: 20px; width: 240px; height: 350px; "><font face="georgia" size=5 >Nom Prénom</FONT><img src="http://i42.tinypic.com/2yw91uh.jpg" style=" margin: 10px; border: 8px double #1C86EE; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 240px; height: 350px; "><div style="margin: 10px; padding: 20px; background: #ffffff; -moz-border-radius: 20px; width : 230px ; height: 350px; ">

Age :

Nom:

Statut:

Groupe: </div></td></tr></table>

Zooey Deschanels

Age : Nom: Statut: Groupe:

Là c'est mieux ?

Beaucoup beaucoup mieux, félicitation

Section 2 : Morceau B :

Dans cette partie , pas besoin de tableau. Quand on à qu'une seule cellule on utilise la balise :

Code:

<div></div>

Comme d'habitude on lui rajoute des propriétés "style=". On commence par lui mettre une largeur/longueur et un fond. C'est à dire les propriétés "width/height " et "background":

Code:

<div style=" background: red;  width: 370px ;height: 250px; "></div>

Et un petit contour arrondie pour aller avec le reste , "-moz-border-radius" :

Code:

div style="background: red;  width: 370px ;height: 250px;  -moz-border-radius: 20px; "></div>

On rajoute un "text-align" pour que notre texte soit aligné à l'intérieur de cette div , et on écrit "Histoire":

Code:

<div  style="background: red; text-align: center;  width: 370px ;height: 250px;  -moz-border-radius: 20px; ">Histoire</div>

J'ajoute au texte une balise "font" , comme pour la partie A, pour qu'il ai la même typo que le reste de la fiche :

Code:

<div  style="background: red; text-align: center;  width: 370px ;height: 250px;  -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT></div>

Maintenant , pour le cadre blanc à l'intérieur , ce qu'on va faire c'est mettre une balise div à l'intérieur de notre première balise div. On la place juste après la balise "font". Mettait lui déjà un fond blanc et une longeur/largeur pour bien comprendre :

Code:

<div  style="background: red; text-align: center;  width: 370px ;height: 250px;  -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px;"></div></div>

Pour que cette div ne soit pas coller au bord de la première on lui applique une marge externe; "margin":

Code du cadre précédent

Code:

<div  style="background: red; text-align: center; width: 370px ;height: 250px;  -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px; margin: 20px; "></div>

Ce qu'on va faire maintenant c'est mettre un texte dans ce cadre blanc :

Code:

<div  style="background: red; text-align: center;  width: 370px ;height: 250px;  -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px; margin: 20px; ">Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla</div></div>

Comme tu peux levoir , c'est tout moche et ca dépasse de partout. Mais la bonne nouvelle c'est qu'on peux arranger ça

Pour faire ça on rajoute déjà une marge interne , "padding" , pour que le texte et le bord de la div blanche ne soient pas collé :

Code:

<div  style="background: red; text-align: center;  width: 370px ;height: 250px;  -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px; margin: 20px; padding: 10px; ">Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla</div></div>

Le texte dépasse en bas ... pas terrible. Tu peux augmenté la longueur de tes balises. Mais il y a une autre plus sympa. Et qui peut être utile si tu ne connaissais pas la longueur du texte qui sera insérée C'est la barre de défilement !

Pour ça on utilise la propriété :

Code:

overflow: auto

Que l'on ajoute au style de la div blanche :

Code:

<div  style="background: red; text-align: center; width: 370px ;height: 250px; -moz-border-radius: 20px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px; margin: 20px; padding: 10px; overflow: auto; ">Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla</div></div>

Pas mal non? On ajoute le tout à ce qui a été fait dans la section 1 et on aligne le tout avec une marge externe spéciale à gauche, sur la div rouge ("margin-left")

Code:

margin-left: 80px;

Ce qui donne :

Nom prénom

Age: Nom: Statut : Groupe :

Code:

<table cellspacing='50' ><tr><td style=" text-align: center; background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><font face="impact" size=5 >Nom prénom</FONT><img src="http://i44.tinypic.com/2mwgzzm.jpg" style=" margin: 10px; border: 8px solid #ffffff; -moz-border-radius: 20px;"></td><td style=" background: red; -moz-border-radius: 20px; width: 230px; height: 350px; "><div style="margin: 10px; padding: 20px; background:  #ffffff; -moz-border-radius: 20px; width : 210px ; height: 320px; ">




Age:

Nom:

Statut :

Groupe : </div></td></tr></table>

<div  style="background: red; text-align: center; width: 370px ;height: 250px; -moz-border-radius: 20px; margin-left: 100px; "><font face="impact" size=5 >Histoire</FONT><div  style="background: white; width: 310px ; height: 150px; margin: 20px; padding: 10px; overflow: auto; ">Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla bla bla bla bla Blabla bla bla bla bla bla bla bla bla bla bla bla bla blaBlabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla</div></div>

Comme exercice j'aimerais que tu me fais cette partie B en harmonie avec la partie A que tu as faites plus tôt !

J'adore le résultat !

Zooey Deschanels

Age : Nom: Statut: Groupe:

Tu as pas encore vu la suite ^^

Section 2 : Morceau C:

Je commence par mettre l'écriture dans la même typo qu'avant :

Vous

Code:

<font face="impact" size=5 >Vous</FONT>

Je lui applique une div avec une bordure grise en bas (border-bottom):

Code:

<div style="border-bottom: 3px solid grey;"><font face="impact" size=5 >Vous</FONT></div>

Je centre le texte (text-align) et je lui met une taille (width) :

Code:

<div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div>

Je veux une double bordure de couleur différente , pour cela j'ajoute une div avec une bordure de même taille mais cette fois en haut (border-top):

Code:

<div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>

Pour la partie du dessous il va falloir faire un tableau :

On commence par le construire :

Code:

 <div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td></td><td></td></tr></table>

J'ajoute une bordure droite à la première cellule :

Code:

 <div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "></td><td></td></tr></table>

On va ajouter les images dans la première cellule , pour faire ça simplement , j'utilise un tableau. Même si pour le moment on ne voit rien , je commence par le construire. 2lignes pour deux cellules chacune :

Code:

 <div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "><table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table></td><td></td></tr></table>

J'ajoute les images, dans la première et 4éme cellule :




J'ajoute une bordure aux images (border) , une marge externe (margin) et un arrondi (-moz-border-radius):

Code:

<div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "><table><tr><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px; border: 10px solid red; -moz-border-radius : 10px; "></td><td></td></tr><tr><td></td><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px;  border: 10px solid red; -moz-border-radius : 10px; "></td></tr></table></td><td></td></tr></table>

Dans la partie droite du tableau j'ajoute une div , dans laquelle j'insère mon texte :

bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla

Code:

<div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "><table><tr><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px; border: 10px solid red; -moz-border-radius : 10px; "></td><td></td></tr><tr><td></td><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px;  border: 10px solid red; -moz-border-radius : 10px; "></td></tr></table></td><td><div>bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla </div></td></tr></table>

J'ajoute une taille à la div ( width et height) ainsi qu'une marge externe (margin) ainsi qu'une slidebar (overflow):

bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla

Code:

<div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "><table><tr><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px; border: 10px solid red; -moz-border-radius : 10px; "></td><td></td></tr><tr><td></td><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px;  border: 10px solid red; -moz-border-radius : 10px; "></td></tr></table></td><td><div style=" width: 350px; height: 200px; overflow: auto; margin: 10px;">bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla </div></td></tr></table>

Je centre le tout :

Vous

bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla

Code:

<center><div style="border-bottom: 3px solid grey; text-align:center; width: 200px; "><font face="impact" size=5 >Vous</FONT></div><div style="border-top: 3px solid red;  width: 200px; "></div>
<table><tr><td style=" height: 180px; border-right: 3px solid grey; "><table><tr><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px; border: 10px solid red; -moz-border-radius : 10px; "></td><td></td></tr><tr><td></td><td><img src="http://i56.tinypic.com/4l4u2f.png" style=" margin: 10px;  border: 10px solid red; -moz-border-radius : 10px; "></td></tr></table></td><td><div style=" width: 350px; height: 200px; overflow: auto; margin: 10px;">bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla </div></td></tr></table></center>

Et j'ajoute à la première partie :

Spoiler:

Et voila le résultat

C'est là galère pour moi...

Vous