Faire un tableau

[Aina13]

bonjour, euh je ne sais pas si un poste comme celui ci a été poster car en mettant dans la recherche ce que je cherchais je tombais sur autre chose ><
alors voila quand je veux faire un tableau comme celui ci :



j'obtiens ca :



ou encore ca




si tu veux une idée de ce que ca donne sur mon fofo quand je le fais dis le moi je ferai une capture d'image

merci de votre aide

[Anzu]

Bonjour et Bienvenue sur le Forum des Forums ForumActif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : Mail de fondation - Ce qu'il ne faut pas faire Listing - Questions/Réponses fréquentes Listing - Trucs et astuces La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour,

Pourrais je avoir le code de votre tableau ?
Il suffit de mettre des "width" dans les td pour pouvoir diminuer la largeur des colonnes.

Cordialement.

[Aina13]

merci pour les sujets
euh j'ai obtenu ca :


et le code :

Code:

[table border="1"][tr][td] [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
[/td][td valign="top"]chapitre 1
chapitre 2
chapitre 3[/td][/tr][tr][td][img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
[/td][td valign="top"]chapitre 4
chapitre 5
chapitre 6
[/td][/tr][/table]

je ne connais rien au reste
désolée et merci a vous

[Anzu]

Bonsoir,

Remplacez votre code par celui ci:

Code:

    [table border="1" width="100%"][tr][td width="50%"] [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
    [/td][td valign="top" width="50%"]chapitre 1
    chapitre 2
    chapitre 3[/td][/tr][tr][td width="50%"][img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
    [/td][td valign="top" width="50%"]chapitre 4
    chapitre 5
    chapitre 6
    [/td][/tr][/table]

Vous pouvez modifier la valeur des width dans les td. J'ai mis 50% partout pour équilibrer les colonnes, à vous de faire les modifications selon ce que vous voulez obtenir. Le width dans le table c'est pour la largeur du tableau, donc inutile d'y toucher.

Cordialement.

[Aina13]

merci beaucoup a vous

[Aina13]

désolée du double post mais j'ai mis ton code et j'obtiens toujours ce que je veux enlever (les cercle noir c'est les espaces qui m'envers):

Spoiler:

[MlleAlys]

comme ça ?

Code:

[table border="1"][tr][td] [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
    [/td][td valign="top" width="50%"]chapitre 1
    chapitre 2
    chapitre 3[/td][/tr][tr][td][img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
    [/td][td valign="top" width="50%"]chapitre 4
    chapitre 5
    chapitre 6
    [/td][/tr][/table]

[Aina13]

toujours la meme chose ><

[MlleAlys]

Ah oui mince, c'est celui de départ, désolée ! ><"
Celui là ? :

Code:

[table border="1"]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
    [/td]
    [td]
        chapitre 1
        chapitre 2
        chapitre 3
    [/td]
  [/tr]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
    [/td]
    [td]
        chapitre 4
        chapitre 5
        chapitre 6
    [/td]
  [/tr]
[/table]

[Aina13]

non ><
desolée de vous embeter

[MlleAlys]

c'est étrange normalement par défaut le tableau s'adapte au contenu des cellules (et ça fonctionne chez moi ><")... y aurait-il un autre code, dans le post ou dans le css, qui bloque la largeur à 100%, ou interfère avec les tableaux ou messages ?

[Aina13]

euh j'en ai aucune idée on ma donnée le CSS quand on m'a filer le thème et j'y connait rien du tout mais je peux te coller le CSS ici si tu veux ?

[MlleAlys]

heu... ben vas y, je vais essayer d'y jeter un oeil xD

[Aina13]

Code:

#pun-navlinks li a {
padding: 0px;
margin: 0px;
text-decoration: none;
}
#pun-navlinks a:hover{
 margin-right: 4px;
margin-top: 1px;
}
.pun table.table th {
   padding: 0.5em 0;
   border-style: none;
   border-color: #;
   background-image: url('http://img823.imageshack.us/img823/2332/fondko.jpg');
   }
#onlinelist {
   border-top: 1px dashed #b7cdd7;
   padding: 0.6em 1em;
   background-color: #E4EBF0;
   }
button.button2, input.button2 {
   font-size: 0.9em;
   border: 1px solid #004866;
   width: auto !important;
   margin: 0px 0.25em 0;
   padding: 2px 3px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   color: #000000;
   background-repeat: repeat-x;
   background-color: #FAFAFA;
   background-image: url('http://img823.imageshack.us/img823/2332/fondko.jpg');
   background-position: top;
   overflow: visible;
   vertical-align:middle;
   }
button.button2:hover, input.button2:hover {
   border: 1px solid #063d57;
   color: #063d57;
        background-image: url('http://img823.imageshack.us/img823/2332/fondko.jpg');
   background-position: top;
   background-position: 0 100%;
   }
#pun-about {
   border-style: nonne;
   border-width: 0px;
   border-color: #;
   text-align: left;
   line-height: 55px;
   padding: 0.6em 1em;
   background-color: #E4EBF0;
      background-image: url("http://i62.servimg.com/u/f62/13/52/25/78/cadre_17.png");
        background-repeat: no-repeat;
        background-position: bottom right;
   }

.bodylinewidth
{
width: 1200px;
margin: auto;
}


a
{
font-variant: small-caps;
text-decoration: none;
outline:none;
}

a
{
letter-spacing: 1px;
outline: none;
text-decoration: none !important;
}

a:hover
{
text-decoration: none !important;
}

th
{
text-align: left;
font-variant: small-caps;
}

a.forumlink
{
display: block;
font-weight: normal;
font-style: italic;
text-align: center;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 6px;
margin-top: -2px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
background-image: url('http://img89.xooimage.com/files/5/3/c/long-fond1-373836d.jpg');
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 0px 0px 10px 10px;
border-bottom: 4px dotted #f7b9df;

}

a.forumlink:hover
{
text-decoration: none !important;
letter-spacing: 2px;
font-variant: small-caps;
font-weight: bold;
}

table
{
    margin-left: auto;
    margin-right: auto;
    width: 93%;
}

.bodylinewidth
{
width: 1200px;
margin: auto;
}

.forumline
{
max-width: 1200px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 4px;
background: url(http://img89.xooimage.com/files/0/6/d/fond-trans-37382c8.png) top left repeat;
border: 2px solid #0a6d91;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-htm-border-radius: 10px;
-webkit-border-radius: 10px;
font-size: 11px;
color: transparant;
font-family: helvetica;
}
.forumline a
{
text-decoration: none !important;
fotn-weight: bold;
color:  transparant;
}
.forumline a:hover
{
text-decoration: none !important;
fotn-weight: bold;
color: #f18e11 !important;
}


.row1,.row2,.row3
{
border-bottom: 1px dotted #000000;
}

a
{
letter-spacing: 1px;
outline: none;
text-decoration: none !important;
}

a:hover
{
text-decoration: none !important;
}

.cattitle
{
display: block;
font-variant: small-caps;
text-align: center;
}

a.cattitle
{
display: block;
color: #e9e3dd;
padding-left: 30px;
font-variant: small-caps;
}




.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}


.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: none;
margin: auto;
margin-bottom:auto;
width:1200px;
}

.onglet {
display:inline-block; 
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
border :none;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:inline-block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background: url('http://img638.imageshack.us/img638/53/barre2.jpg') no-repeat;
color: #000000;
width:200px; /*Largeur de l'onglet étant actif*/
height:30px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
text-shadow: #4A4A4A 0px 0px 3px;
padding: 5px 20px;
margin: 0;
}

.onglet_nactif {
background:url('http://img832.imageshack.us/img832/6998/barre2l.jpg') no-repeat; /*URL de l'onglet étant inactif*/
color: #000000;
width:200px; /*Largeur de l'onglet étant inactif*/
height:30px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px; /* pour Chrome */
-webkit-border-top-right-radius: 10px; /* pour Chrome */
padding: 5px 20px;
margin: 0;
}

.infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1200px;
visibility: hidden;
color: none;}

.infobulle span img{
border: 2px;
padding: 5px;}


.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "ChatBox de Angel's Paradise"; }
body.chatbox {
background: url(http://img338.imageshack.us/img338/2662/sanstitre1bfb.png) top left repeat;
border: 2px solid #666666;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-htm-border-radius: 10px;
-webkit-border-radius: 10px;
 color: transparant;
}

.chatbox_row_1, .chatbox_row_2, .chatbox_row_3{
background: transparent;
}

.code
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.quote
{
-moz-border-radius: 15px;
padding-left: 10px;
}
.button2{ -moz-border-radius: 5px;}
.bodyline{ -moz-border-radius: 10px;}
input,textarea, select {
border-radius: 10px 10px;
-moz-border-radius: 10px;
padding-left: 3px;
}




/* accordeon */


.mainmenu
 {    filter:alpha(opacity=85);    -moz-opacity:0.85;    -khtml-opacity: 0.85;    opacity: 0.85; }

#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post {
background: url(http://img11.hostingpics.net/pics/730538noir50.png) top left repeat;
}
.spoiler_content {
  background: url(http://img11.hostingpics.net/pics/730538noir50.png) top left repeat;
  filter:alpha(opacity=85);    -moz-opacity:0.85;    -khtml-opacity: 0.85;    opacity: 0.85;
}
.spoiler_closed {
  background: url(http://img11.hostingpics.net/pics/730538noir50.png) top left repeat;
}

#text_editor_iframe, input, select, textarea {
  background: url(http://img338.imageshack.us/img338/2662/sanstitre1bfb.png) top left repeat;
}


[MlleAlys]

je ne vois rien... c'est possible de voir le post en question ?

[Aina13]

euh quel post ?

[MlleAlys]

celui avec le tableau qui n'est pas comme tu veux

[Aina13]

euh oui je vais le recréer comme je l'ai fait avec le code qu'on ma donner au debut

voila : http://angelsparadise.forumsfamille.com/t13-discussion-sur-le-shojo#4026

[MlleAlys]

ok, tu peux faire avec le dernier code que je t'ai donné ?

[Aina13]

http://angelsparadise.forumsfamille.com/t13-discussion-sur-le-shojo#4027

[MlleAlys]

peut être comme ça, on ne sait jamais =S :

Code:

[table border="1"; width="auto"]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
    [/td]
    [td]
        chapitre 1
        chapitre 2
        chapitre 3
    [/td]
  [/tr]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
    [/td]
    [td]
        chapitre 4
        chapitre 5
        chapitre 6
    [/td]
  [/tr]
[/table]

si non, tu peux écrire quelque chose dans le message juste avant le tableau ? ^^"
(désolée, je bricole un peu, je ne suis pas très douée ><")

[Aina13]

toujours pas le bon ><

[Anzu]

Bonsoir,

Remplacez votre code par celui ci:

Code:

        <table border="1" width="75%"><tr><td width="107px"> <img src="http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg"/>
        </td><td valign="top">chapitre 1
        chapitre 2
        chapitre 3</td></tr><tr><td width="107px"><img src="http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg"/>
        </td><td valign="top">chapitre 4
        chapitre 5
        chapitre 6
        </td></tr></table>

J'ai mis la largeur de vos images et pour la largeur du tableau, je l'ai par conséquent réduite à 75%. Si c'est trop grand, vous pouvez la réduire ..

Cordialement.

[Aina13]

euh ca me donne ca en mettant votre code
http://angelsparadise.forumsfamille.com/t13-discussion-sur-le-shojo#4029

[MlleAlys]

Ah !! je pense avoir trouvé, ça venait bien du css en fait, je l'avais raté tout à l'heure, désolée ! ><"

Dans ton css, il y a une partie qui dit :

Code:

table
{
    margin-left: auto;
    margin-right: auto;
    width: 93%;
}

Ce code, pour n'importe quel tableau ("table") fixe sa largeur à 93%, d'où la disparition de la largeur automatique...
Enlève donc cette partie, et normalement c'est bon avec le code de base que je t'avais donné :

Code:

[table border="1"]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/df1010.jpg[/img]
    [/td]
    [td]
        chapitre 1
        chapitre 2
        chapitre 3
    [/td]
  [/tr]
  [tr]
    [td]
        [img]http://i42.servimg.com/u/f42/16/22/78/02/dyn00811.jpg[/img]
    [/td]
    [td]
        chapitre 4
        chapitre 5
        chapitre 6
    [/td]
  [/tr]
[/table]

Cependant, il y aura peut être d'autres tableaux quelque part sur le forum qui du coup reviendront en largeur automatique, et qu'il faudra modifier ^^"


...

est ce que ça fonctionne ? =D
où est ce que je me suis encore plantée ? ^^"

[Anzu]

Il faut activer le html sur votre forum =>

https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle#2522474

[Aina13]

euh je suis perdue la ><
je fais la quelle solution ?

[Anzu]

Le code que je vous ai donné fonctionne de mon côté mais vous devez activer le html.

Après étant donné que vous avez des propriétés qui affectent la largeur de tous les tableaux, il faut les retirer, comme expliqué plus haut.

Cordialement.

[Aina13]

d'accord je vais essayer merci

[Aina13]

merci a vous deux ca fonctionne maintenant ^^
par contre la partie que j'ai supprimée dans le CSS va pas touché le theme du forum ?