[déplacé] faire un zoli tableau

Euh... c'est de l'écriture codée, de l'HTML.
Quand j'étais sur RYZOM, j'avais créé un forum pour ma guilde : les Enfants de la Sève. J'ai du apprendre sur le tas, en fouillant sur le net.

Juste pour ce tableau, j'ai du écrire ça :

Code:

<table border="2"><tr><td colspan="2"align="center" bgcolor="#FFE4B5">[b][color=red]IORWEEN[/color][/b]</td></tr><tr><td align="center" bgcolor="#99ffcc">[color=indigo]Vertus[/color]</td><td align="center" bgcolor="#99ffcc">[color=indigo]Rang[/color]</td></tr><tr><td bgcolor="#ccffff">Empathie</td><td align="center" bgcolor="#99ffff">10</td></tr><tr><td bgcolor="#ccffff">Idéalisme</td><td align="center" bgcolor="#99ffff">10</td></tr><tr><td bgcolor="#ccffff">Justice</td><td align="center" bgcolor="#99ffff">7</td></tr><tr><td bgcolor="#ccffff">Loyauté</td><td align="center" bgcolor="#99ffff">10</td><tr><td bgcolor="#ccffff">Sagesse</td><td align="center" bgcolor="#99ffff">9</td></tr></table>

Si tu veux, tu peux recopier ça et changer "IORWEEN", les noms des vertus et les chiffres des rangs (pas les chiffres entre # et des lettres genre #99ffff qui sont les codes d'une couleur) par les tiens. Comme ça, tu auras le même tableau

Yop

Pour en revenir au tableau, ce n'est pas si compliqué qu'il n'y parait. Tu as du le remarquer, quand tu veux apporter des modifications à ton texte (couleur, taille ou autre), il faut que tu mette ce que l'on appel des balises. Les balises sont divers mots qui se trouvent entre crochets comme ceci -> [balise] et il en faut toujours 2 pour montrer où la modification apporté commence et où elle se fini, comme ceci : [balise] <- début - fin -> [/balise] , tout ce qui se trouve entre ces deux balises sera modifié.

Venons en au tableau, mais à partir de maintenant et pour des raisons technique je vais remplacé les [] par des ().
Pour commencer, il faut définir comment sera le cadre de ton tableau, c'est la première balise et tu as le choix entre :

1/ un tableau sans cadre :

(table) (/table)

2/ un tableau avec un cadre creux :

(table border=1) (/table)

3/ un tableau avec un cadre plein :

(table cellspacing=0 border=1) (/table)

Maintenant que tu as choisis le cadre de ton tableau (on va dire cadre creux), on va passer aux lignes (en 1er) et aux colonnes (en second) :

On signal toujours la ligne en premier par la balise --> (tr) pour ouvrir puis (/tr) pour fermer. On va dire que tu veux 3 lignes, 3 lignes qu'il te faut placer à l'intérieur du tableau ce qui va te donner donc :

(table border=1)
(tr)(/tr)
(tr)(/tr)
(tr)(/tr)
(/table)

Maintenant, il faut placer les colonnes, on va dire que tu en veux 3 aussi. La balise de colonne s'ouvre comme ceci -> (td), puis se ferme comme cela -> (/td). C'est entre c'est deux balises que tu va pouvoir insérer ton texte comme ceci -> (td)texte(/td). Les balises de colonne se placent entre les balises de ligne, ce qui va donner :

(table border=1)
(tr)
(td)(/td)(td)(/td)(td)(/td)
(/tr)
(tr)
(td)(/td)(td)(/td)(td)(/td)
(/tr)
(tr)
(td)(/td)(td)(/td)(td)(/td)
(/tr)
(/table)

Le tableau avec 3 lignes et 3 colonnes est terminé, il faut maintenant ajouté le texte entre les balises de colonnes car se sont elles qui représentent les cases du tableau. On a donc un tableau de 9 cases (3x3), idéal pour jouer au morpion ^^, ce qui va donner en ajoutant les "X" et les "O" ceci :

(table border=1)
(tr)
(td)X(/td)(td)O(/td)(td)X(/td)
(/tr)
(tr)
(td)O(/td)(td)X(/td)(td)O(/td)
(/tr)
(tr)
(td)X(/td)(td)O(/td)(td)X(/td)
(/tr)
(/table)

Le tableau est maintenant complètement terminé, reste plus qu'à te montrer ce que cela donne en remettant les [] à la place des () :

X	O	X
O	X	O
X	O	X

Dans l'exemple le texte et noir, mais tu peux aussi le mettre en couleur ou en gras, ou en gros, mais ça tu sais déjà le faire . A toi de jouer, pense que tu peux "prévisualiser" avant "d'envoyer", ça permet de corriger les erreurs avant de poster mais aussi de s'entraîner

En effet, c'est bien plus simple que mes explications. Bravo Cyril !

Bravo Monique

Comme le dit Sophie, il doit te manquer une balise de ligne (tr)(/tr)
parce que, si tu regarde bien ton tableau, tu as le double de cases sur la ligne du bas.
Les premiers temps, pour t'habituer à bien reconnaître les balises et retrouver d'éventuelles erreurs ou oublies, décompose ton tableau (ou autre) comme je te l'ai montrer ou comme l'exemple ci-dessous :

[début tableau]
[début ligne]
[début colonne] texte [/fin colonne]
[début colonne] texte [/fin colonne]
[début colonne] texte [/fin colonne]
[/fin ligne]
etc etc ....
[/fin tableau]

@Monique :
Pour mettre un fond de couleur , tu dois ajouter dans (td) le code bgcolor="nom_ou_code_de_la_couleur".

En fait, c'est toujours dans les balises d'ouverture (c'est à dire sans le /) qu'on met des infos comme une bordure pour le tableau indiqué par (table border="1"), un mot centré dans la case par (td align="center")... ou un fond de couleur par (td bgcolor="xxxx"). Tu remarqueras qu'il faut toujours mettre les guillemets.

Exemple :
(td bgcolor="green") ou (td bgcolor="#008000")
Le même résultat est obtenu par les commandes : bgcolor="green" ou bgcolor="#008000" . Donc, les chiffres, tu t'en fous

Voilà un des nombreux sites qui listent les couleurs et leur code. Tu n'as plus qu'à choisir et recopier
http://www.dsi.univ-paris5.fr/cocoul3t.html

Donc imaginons un petit tableau avec un fond de couleur.

X	O	X
X	O	X
X	O	X

Le code est tout simplement ceci :

Code:

[table border="1"]
[tr]
[td bgcolor="cyan"]X[/td]      [td bgcolor="navajowhite" ]O[/td]      [td bgcolor="fuchsia"]X[/td]
[/tr]
[tr]
[td bgcolor="cyan"]X[/td]      [td bgcolor="navajowhite" ]O[/td]      [td bgcolor="fuchsia"]X[/td]
[/tr]
[tr]
[td bgcolor="cyan"]X[/td]      [td bgcolor="navajowhite" ]O[/td]      [td bgcolor="fuchsia"]X[/td]
[/tr]
[/table]

Messages déplacés dans le forum commun.

Merci Will, c'est vrai que c'est nettement mieux de l'avoir déplacé ; ça reste plus clair pour la compréhension et pour la lecture des vertus des persos sur l'autre section.
Gégé