Tableau sur la page d'accueil

[Le quacker]

Bonsoir,

Voilà, j'aimerais faire un tableau du type de ce forum là
http://www.never-utopia.com/forum.htm


Mais j'ai juste réussis à faire çà :
http://op-strong-world.forum-pro.fr/index.htm


Pas besoin de mettre les tirets etc, j'aimerais juste avoir le code, pour avoir quelque chose de facilement modifiable et (c'est important) il faut que je puisse choisir la couleur de fond des en-tête.

Merci d'avance

[Irina]

Bonjour,

Nous ne fournissons pas de code tout prêt !
C'est pas l'usine ou le mac drive.

Si vous voulez faire ça il faut l'apprendre : il y a un tutoriel qui aide à faire les tableaux dans les trucs et astuces : utilisez le.


Cordialement,

[Le quacker]

Merci pour votre réponse
donc j'ai installé le tableau, problème : il est 0% personnalisable (enfin, comme je m'y connais pas du tout en code --')
j'aimerais pouvoir changer la couleur de fond et séparer les lignes et les colonnes

merci d'avance

[Irina]

Ok

Montrez moi ce que vous avez fait, en me copiant le code ici, et je vous apprends à le personnaliser ! Mais faut etre prêt à suivre, ça va pas forcément être du tout cuit

[Le quacker]

Pas de problème, voici le code que j'ai utilisé

Code:

<span class="genmed"><table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">TON TITRE</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">TON TITRE</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">TON TITRE</th>
</tr>

<span class="postbody"></span></td>

<td class="row3" colspan="1" rowspan="1" align="center" valign="top"><span class="postbody">
TON TEXTE</span></td>


<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">TON TEXTE.
</span></td>
</table>

[Irina]

Bon ok, en fait c'était pas une bonne idée le tableau du tuto, il est tout prêt, ça va pas trop.

Je reprends depuis le début :

Pour faire un tableau en html :
Il faut ouvrir une balise <table>
Puis ouvrir une ligne, puis ouvrir des cellules.
On peut faire plusieurs lignes, et mettre tant de cellule que l'on veut.

Une ligne = <tr>
une cellule = <td>

La règle à retenir très important en HTML c'est : j'ouvre et je ferme les balise dans le même ordre :

exemple voici un tableau à une ligne et 3 cellules :

Code:

<table><tr><td> cellule 1</td><td> cellule 2</td><td> cellule 3</td></tr></table>

Visuellement : (j'ai mis des bordures sur celui là pour que vous le voyez)

cellule 1

cellule 2

cellule 3

L'ordre des cellules est très important, si vous mettez :

Code:

<table><tr><td> cellule 1</td><td> cellule 2</td><td> cellule 3[color=red]</tr></td>[/color]</table>

Le tableau sera faux, il y aura des erreurs.

Un tableau avec 2 lignes, avec deux cellules (colonnes) par ligne ça donnerait :

Code:

<table><tr><td> cellule 1</td><td> cellule 2</td></tr><tr><td> cellule 1</td><td> cellule 2</td></tr></table>

cellule 1	cellule 2
cellule 1	cellule 2

Voilà pour la structure HTML ! Maintenant il faut appliquer du style : c'est comme ça qu'on le personnalise.

Pour les tailles on le met directement dans le HTML, comme ceci :

Code:

<table width="100%"><tr><td> cellule 1</td><td> cellule 2</td><td> cellule 3</td></tr></table>

Width = la largeur, vous pouvez la mettre en pixel ou en pourcentage, pensez à bien ouvrir les " et les fermer.
On peut mettre des largeurs sur les cellules (td) mais pas sur les tr, on ne peut pas mettre de style dessus.

Ensuite le style direct de votre cellule ou du tableau : vous avez deux moyens d'en mettre :
soit passer par une class

c'est à dire donner une identité à votre cellule ou tableau : comme ceci :

Code:

<table class="montableau"><tr><td> cellule 1</td><td> cellule 2</td><td> cellule 3</td></tr></table>

Dans ce cas là, il vous suffit d'aller mettre dans votre feuille de style css (PA > affichage > couleurs > onglet feuille de style css) le style que vous voulez sur les class

comme ceci :

Code:

.montableau {
color:#000000;/** couleur de la police des elements qui ont cette class**/
background-color:#fddedf;/**couleur de fond de l element**/
margin:10px; /** marge de 10 pixel a linterieur de l element **/
}

Tout ce qui est entre /** et **/ sont des commentaires qui ne sont pas indispensable, qui peuvent être enlevé.

Vous pouvez aussi mettre votre style directement dans le code HTML, pour cela il faut ouvrir un style et entrer les paramètres directement ici :
Par exemple :

Code:

<table width="90%" style="border:3px solid #000000; background-color:#C39300; color:#000000;"><tr><td> cellule 1</td><td> cellule 2</td><td> cellule 3</td></tr></table>

Vous pouvez mettre tous les éléments de style que vous voulez, soit sur les cellules soit sur le tableau.

Voici ce que donnerait ce que je vous mets au dessus :

cellule 1

cellule 2

cellule 3

Vous pouvez trouver de l'aide pour savoir comment utiliser le css :
http://www.esperantomondo.net/documents/css.pdf


Cordialement,

[Le quacker]

Merci infiniment, je vais essayer et je vous montre le résultat

[Le quacker]

Et voilà un magnifique raté :
http://bleachpowa.rpg-dynasty.net/index.htm

impossible de séparer (avec un trait) les colonnes, l'alignement à gache ou a droite ne marche pas et j'ai été obligé de faire deux tableaux, un pour la première ligne, un pour la seconde --'

[Irina]

c'est pas grave on vas y arriver

Montrez moi votre code et expliquez ce que vous voudriez faire précisément.

Pour séparer les colonnes (c'est à dire les cellules)

il faut mettre dans le style de la cellule : syle="border:1px solid #000000;"

Ce n'est pas grave de rater, l'important c'est que vous compreniez ce que vous faites, vos erreurs, et que vous réussissiez à coder du HTML juste.

On va y arriver courage

[Le quacker]

Code:


<TABLE style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; BORDER-LEFT: #000000 3px solid; WIDTH: 550px; COLOR: #000000; BORDER-BOTTOM: #000000 3px solid; HEIGHT: 30px; BACKGROUND-COLOR: #a86364" width=550>
<TR>
<TD width="25%">cellule 1</TD>
<TD width="50%">cellule 2</TD>
<TD width="25%">cellule 3</TD></TR></TABLE>
<TABLE style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; BORDER-LEFT: #000000 3px solid; COLOR: #000000; BORDER-BOTTOM: #000000 3px solid; BACKGROUND-COLOR: #b56667" cellSpacing=80 width="80%">
<TR>
<TD width="25%"><LEFT>texte de la premiere cellule</LEFT></TD>
<TD width="50%">
<CENTER>texte de la seconde cellule</CENTER></TD>
<TD width="25%"><RIGHT>texte de la troisième cellule</RIGHT></TD></TR></TABLE>

Ce que j'aimerais avoir :
Un tableau du style celui du forum que j'ai nommé plus haut :

Donc :
les colonnes séparées
La colonne de droite et celle de gauche de la même taille, celle du milieu plus grande.

Un espace entre la première ligne et la seconde
Pas de déformation du tableau quand on écrit à l'intérieur (il faut que ce soit facilement modifiable)

Je crois que c'est tout

[Le quacker]

up

[Le quacker]

up please

[Irina]

<TABLE style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; BORDER-LEFT: #000000 3px solid; WIDTH: 550px; COLOR: #000000; BORDER-BOTTOM: #000000 3px solid; HEIGHT: 30px; BACKGROUND-COLOR: #a86364" width=550>
<TR>
<TD width="25%">cellule 1</TD>
<TD width="50%">cellule 2</TD>
<TD width="25%">cellule 3</TD></TR></TABLE>
<TABLE style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; BORDER-LEFT: #000000 3px solid; COLOR: #000000; BORDER-BOTTOM: #000000 3px solid; BACKGROUND-COLOR: #b56667" cellSpacing=80 width="80%">
<TR>
<TD width="25%"><LEFT>texte de la premiere cellule</LEFT></TD>
<TD width="50%">
<CENTER>texte de la seconde cellule</CENTER></TD>
<TD width="25%"><RIGHT>texte de la troisième cellule</RIGHT></TD></TR></TABLE>

Bonjour,

Je commence par vous corriger les fautes :
-Il ne faut pas mettre de majuscule en HTML

-Ce que j'ai souligné en orange :
Vous réglez vos bordures une à une : ceci est utile lorsqu'on veut mettre des bordures différentes de chaque côté; dans votre cas vu que les 4 sont identiques il suffit simplement de mettre :
border: 3px solid #000000;

-En rouge : vous avez mis dans votre premier tableau :
La largeur une fois dans le style, puis une autre fois directement dans la balise html : il ne faut pas, c'est l'un ou l'autre : pas les deux.
A savoir que vous avez mis dans la balise : width=550
et que ceci est faux, il faut mettre : width="550px"

-En rouge : je vous ai souligné LEFT et RIGHT : ceci n'es tps très "propre" si j'ose dire : il faut mettre votre texte dans un <span>
où vous mettez le style :
<span style="text-align:left"> texte </span>


-Enfin pour séparer vos cellules avec une marge, vous pouvez mettre dans la balise d'ouverture table du tableau :

<table cellspacing="10px" style etc etc....>

ce qui mettra une marge de 10 pixel entre vos cellules

Voici une très bonne page d'aide : http://www.allhtml.com/articles/detail/369
Notamment le paragraphe : Arrière plan, mise en page, espacement


Bonne journée

[Ea]

Bonjour, Où en est votre problème ? Est il résolu ? _____________________ Si vous n'avez pas eu de solutions, relancer régulièrement votre sujet (toutes les 24 heures au minimum). Et pensez à expliquer votre problème règulièrement, à chercher par vous même et montrez que vous cherchez de votre côté et pas que vous attendez simplement d'une réponse. _____________________ Lorsqu'un sujet est résolu : Cliquez sur le bouton de votre premier message du sujet. Cochez en dessous de la zone de message Enfin validez avec le bouton Pour remercier ceux qui vous ont aidés vous pouvez cliquer sur A bientôt sur ForumActif