Faire un tableau html

Voilà j'ai créer un forum pour mon TPE en tant que production, mais le problême est que j'aimerais pourvoir le rendre plus esthétique (que un forum de base), mais je n'ai absolument aucune, de chez aucune idée pour ça. (le design n'est pas encore fait.) Donc si jamais vous avez des suggestions pour m'aider, se serait gentil =).
Je sais que j'aide pas du tout, mais là, je sais vraiment pas sur quoi partir, et comment...
Surtout que c'est la première fois que je me lance vraiment dans le CSS.
Pour le XHTML, autant faire un seul et même sujet, je voudrais juste savoir qu'elle est le code qui permet de faire des tableaux ou des parties différentes pour la PA, car j'ai cherché, mais j'ai pas trouvé grande chose =/. Quand je dit tableau, c'est surtout pour pouvoir faire des paragraphes distincts sur une même ligne comme ceci:

00000000000000

000000000000000000000

00000000000000000

0000000000000

000000000000000000000

00000000000000000

etc...
Voilà, je crois que j'ai tout dit.

Code:: <table>
<caption>TITRE DU TABLEAU</caption>

<thead> 
<tr>
<th>Titre colonne 1</th>
<th>Titre colonne 2</th>
<th>Titre colonne 3</th>
</tr>
</thead>

<tfoot> 
<tr>
<th>Pied colonne 1</th>
<th>Pied colonne 2</th>
<th>Pied colonne 3</th>
</tr>
</tfoot>

<tbody> 
<tr>
<td>Ligne 1 gauche</td>
<td>Ligne 1 milieu</td>
<td>Ligne 1 droite</td>
</tr>
<tr>
<td>Ligne 2 gauche</td>
<td>Ligne 2 milieu</td>
<td>Ligne 2 droite</td>
</tr>
<tr>
<td>Ligne 3 gauche</td>
<td>Ligne 3 milieu</td>
<td>Ligne 3 droite</td>
</tr>
<tr>
<td>Ligne 4 gauche</td>
<td>Ligne 4 milieu</td>
<td>Ligne 4 droite</td>
</tr>

</tbody>
</table>

<table>

</table>

<thead>

<tfoot>

<thead>

<tfoot>

<table>

<tr>

<td>

<th>

Code:: td
{
border: 1px solid black; /* toutes tes cellules auront une bordure d'1 pixel noir */
text-align: center; /* les textes seront centrés */
padding: 5px; /* marge intérieure pour éviter que le texte touche les bords */
background-color: #006699;
}

Code:: table
{
margin: auto;
border: 3px double #006699;
border-collapse: collapse;
background:url("http://sd-2.archive-host.com/membres/images/134568121656250658/Fondquotecode.jpg") no-repeat top center;

}

td
{
border: 1px dotted #006699;
font-family: "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
color: #FFFFFF;
}

th
{
border: 1px dotted #006699;
font-family: "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
color: #FFFFFF;
font-variant: small-caps;}

Code:: <table>
<thead>
<tr>
<th colspan="3"><img src="http://2img.net/i/fa/admin/icones/small_ico/point_and_reputation.png" alt="*" /> Mon titre principaaaal <img src="http://2img.net/i/fa/admin/icones/small_ico/point_and_reputation.png" alt="*" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://i88.servimg.com/u/f88/10/08/11/18/pdlr10.jpg" alt="PDL" /></td>
<td>Ligne 1 milieu</td>
<td>Ligne 1 droite</td>
</tr>
<tr>
<td>Ligne 2 gauche</td>
<td><img src="http://img220.imageshack.us/img220/374/bannireonyop3.png" alt="Onyx's" /> </td>
<td>Ligne 2 droite</td>
</tr>
<tr>
<td>Ligne 3 gauche</td>
<td>Ligne 3 milieu</td>
<td><img src="http://img80.imageshack.us/img80/5682/bannambrefj1.png" alt="Ambres" /> </td>
</tr>
</tbody>
</table>

EDIT : Voilà une fois de plus je remarque que l'affichage n'est pas le même sous firefox et sous internet explorer ... Forcément Mozilla est mieux ^^"
Bref je conseille une fois de plus à tous ceux qui lisent ce post : firefox est vraiment mieux comme navigateur, prenez le si vous en avez la possibilité !
Et je te conseille à toi aussi de tester le forum sous différents navigateurs car tu peux avoir de mauvaises surprises sur les ordis de ton lycée ou sur les ordis des profs qui vont le voir :S

Merci beaucoup, tu m'enlève un épine du pied là =)
Toi aussi tu fait ton TPE, tu le fais sur quoi ?
Nous on le fait sur les dangers de l'univers pour la Terre (astéroïde, comète, trous noirs et soleils), et on est dans avancées scientifiques et réalisations techniques. Comme production on fait un site internet, un forum et des panneaux. et on passe pour le 28 mars.
Le plus drôle c'est que quand la classe a sut qu'on faisait un forum plus de la moitié était épaté et les profs savaient pas vraiment la vrai définition d'un forum xD
C'était à ce moment là que je me suis rendu compte à quel point j'étais accro à l'ordi... 'Bref passons.
Tu le fait sur quoi ton TPE ?
( je risque fortement de poser d'autres questions vue que le fow est loin d'être finit,
donc peut être serait-il préférable de ne pas le verrouiller tout de suite et que je pose mes questions dans un seul et même topic x) )

Sujet: Re: Faire un tableau html Mer 02 Mar 2011, 17:57

J'ai une nouvelle question:
Comment on créer sur la page d'accueil,
On a une image, et quand on passe la souris dessus ça affiche des info généralement on voit ça sur les forum pour le staff.

Ce que je voulais savoir aussi, c'est comment faire (au lieux d'un tableau), par exemple trois mini page sur la page d'accueil, on voit une, et pour aller sur une autre, on appuie sur un bouton comme par exemple "nos partenaire" "le forum" "le staff" des trucs comme ça.
Est-ce que tu vois ? Sinon je montrerais en image.

Sujet: Re: Faire un tableau html Sam 12 Mar 2011, 13:23

Pour les image, et quand on passe la souris dessus ça affiche des info généralement on voit ça sur les forum pour le staff, il s'agit des infobulles, pour la petite info.

Dans ton css, tu dois mettre :

Code:

/* CSS INFOBULLE */
a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 2px; /* on positionne notre infobulle */
left: 15px;

background-color: #635151;

color: #421212; /* texte dans l'infobulle */
font-size: 10px;
padding: 3px;

/* bordures de votre infobulle*/
border: 2px solid #421212;
}

N'hésite pas à bidouiller, style changer les bordures, les couleurs, etc.

Et pour le code à mettre sur ta page d'accueil, c'est le suivant :

Code:

<a href="http://morsmordre.forums-actifs.com/profile.forum?mode=viewprofile&u=1" class="infobulle">Image, lien ou texte sur lequel il faut passer sa souris
<span>Informations qui apparaissent dans l'infobulle au passage de la souris</span></a>

Pour la seconde question, personnellement je ne comprends pas du tout ce que tu veux dire. A moins que tu parles d'une page d'accueil à onglet ? J'en avais fait une pour le forum Morsmordre, je mets ici le lien de mon forum de test pour que tu voies si c'est bel et bien ça à quoi tu pensais : http://made-in-wonderland.exprimetoi.net/
Si c'est vraiment ce que tu veux faire ... Je crois que tu vas être obligé de chercher "onglet html" sur google comme j'avais fait, parce que je serais totalement incapable d'expliquer clairement comment se construise ces onglets, vu qu'en plus du HTML un nouveau langage se mêle lors de leur conception, à savoir le javascript, que je ne connais pas du tout, mais absolument pas. En tout cas, il m'a fallu trois ou quatre bonnes heures pour faire la page d'accueil de Morsmordre, donc un conseil, prépare toi un bon thermos de café, mets une chanson qui te détend et prend ton courage - et ta patience ! - à deux mains. (:

Sujet: Re: Faire un tableau html Sam 12 Mar 2011, 15:38

Merci beaucoup, c'est exactement ce dont j'avais besoin, pour les onglets, je crois que je ferais ça un peut plus tard xD
Heureusement que vous êtes, sinon j'étais vraiment pommée, surtout que je comprends pas grand chose au CSS...
Merci =)

Sujet: Re: Faire un tableau html Dim 13 Mar 2011, 12:29

Sujet: Re: Faire un tableau html Dim 13 Mar 2011, 14:01

Pour les onglets, je préfèr quand il faut cliquer pour y accéder, je sais pas pourquoi, mais je préfère, si jamais tu trouve, j'accepte avec joie =)
Par contre, je crois qu'il y a un problême quand je passe la souris entre "Staff" et "Partenaire", ça change, je sais pas si tu l'avais remarquée.

Sujet: Re: Faire un tableau html Dim 13 Mar 2011, 14:09

EDIT : Finalement c'était tout simple à modifier x) Là ça marche

Sujet: Re: Faire un tableau html Dim 13 Mar 2011, 19:33

Moi par contre, je serais interessée de voir les codes de ta présentation Ella', enfin, si ça ne te dérange pas, bien sûr.

Sujet: Re: Faire un tableau html Lun 14 Mar 2011, 07:23

Pour que ce soit au moment du clic c'est tout simple en fait, tu remplaces le "hover" par "onclick" je crois. Je suis pas vraiment sûre de l'orthographe, donc hésite pas à chercher sur internet pour confirmer (genre alsacréation ou le site du zéro, j'ai tout appris chez eux), mais je pense que c'est un truc dans ces eaux-là.

Au fait là je suis sur le pc de mes parents, qui tourne sous Explorer 8, et j'ai exactement le même rendu que sur mon pc avec Google Chrome. De toute façon, entre Chrome, Explorer, Safari et Firefox, j'ai plus souvent de différence de codage avec Firefox qu'avec tous les autres. x) En tout cas pour arrondir les angles sous tous les navigateurs, il faut mettre -webkit-border-radius: tes valeurs; et -moz-border-radius: tes valeurs;.

Sujet: Re: Faire un tableau html Lun 14 Mar 2011, 10:39

"Pour que ce soit au moment du clic c'est tout simple en fait, tu remplaces le "hover" par "onclick" je crois."

"En tout cas pour arrondir les angles sous tous les navigateurs, il faut mettre -webkit-border-radius: tes valeurs; et -moz-border-radius: tes valeurs;."

Pandora voilà le code si tu veux, j'explique par pour le moment par manque de temps et je te donnerais un exemple un peu plus court et plus facile a comprendre après ok ? =) ( c'est long ^^")

Et je précise que, c'est du BIDOUILLAGE donc les codes sont peut être pas valide... Je suis encore novice et je ne sais pas trop si c'est bon ou pas :S Le résultat est là ok mais les codes sont peut être vraiment loupés...

... LE HTML ...

Code:: <table id="tablo">
<tr>

   <td colspan="2">
         <div class="gensmall">
            <script type="text/javascript">
         function patonglet1() { document.getElementById('onglet1').style.display='block'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none'; }

         function patonglet2() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none'; }

         function patonglet3() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none'; }

         function patonglet4() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='block';
document.getElementById('onglet5').style.display='none'; }

         function patonglet5() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='block'; }</script>
            </script>


            <table width="100%">
               <tr>
                  <td width="33%"><div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/news_et_infos.png" alt="news & infos" class="onglet" onmouseover="javascript:patonglet1()"></div></td>

                  <td width="34"><div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/clans.png" alt="clans" class="onglet" onmouseover="javascript:patonglet2()"></div></td>

                  <td width="33%"><div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/news_du_mois.png" alt="news du mois" class="onglet" onmouseover="javascript:patonglet3()"></div></td>
               </tr>
            </table>
</td>

</tr>
<tr>
      <td style=" width: 380px;">

<img src="http://sd-2.archive-host.com/membres/images/134568121656250658/welcometo.png" alt="Welcome To GraphikART" />

</td>
   <td id="modulo">


                  <div id="onglet1">
                     <div style="z-index: 5; ">
                     <br/><br/>
                     <div class="titremodulo"> . News & Infos . </div>
                     <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br /><br /> Pellentesque a bibendum tellus. Ut eget nisl tellus, nec mattis eros. Ut metus odio, pretium at tempus eu, malesuada vel tellus.
<br />Quisque ac nunc eget nisi facilisis condimentum id in purus. Suspendisse potenti. Fusce convallis est eget sem pellentesque nec mattis tellus consequat.
<br /><br />Ut semper consequat lobortis. Aliquam interdum condimentum posuere.
<br /> Suspendisse vitae est nisi.

                     </div>
                  </div>


                  <div id="onglet2" style="display: none;">
                     <div id="div_2" style="z-index: 5; ">
                        <br/><br/>
                     <div class="titremodulo"> . Clans du forum . </div>
                     <br />Curabitur laoreet pharetra elit, non fringilla ipsum hendrerit eu.
<br /><br />Donec lorem ligula, scelerisque ac pretium nec, pellentesque vitae mauris. Proin blandit, est eget accumsan ullamcorper, leo massa euismod nulla, eu sodales sem dolor eu erat.
<br /><br />Mauris quam lectus, hendrerit a adipiscing a, pellentesque at lectus. Nam vestibulum sodales faucibus. Maecenas ut mauris eget felis rhoncus rutrum. Ut diam velit, convallis quis ornare nec, sagittis eget nisi.
<br /> Nulla vehicula, justo sed interdum aliquam
                     </div>
                  </div>


                  <div id="onglet3" style="display: none;">
                     <div id="div_3" style="z-index: 14; ">
                        <br/><br/>
                     <div class="titremodulo"> . Citation et Membre du mois . </div>
                     <br />In hac habitasse platea dictumst. Fusce ligula est, pulvinar quis ultricies eu, luctus eu magna.
<br /><br /> Cras odio ipsum, venenatis eu dignissim feugiat, consectetur at sem. Vestibulum faucibus condimentum purus, venenatis sodales ligula sagittis id. Nam vel ipsum sed nulla placerat consequat.
<br /><br /> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas et quam id sem volutpat vulputate sit amet nec ligula.
<br /> Aliquam erat volutpat.
                     </div>
                  </div>


                  <div id="onglet4" style="display: none;">
                     <div id="div_4" style="z-index: 5; ">
                        <br/><br/>
                     <div class="titremodulo"> . Staff . </div>

                     <br /><center>
                        <div class="infobulle"><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff1.png" class="transparence" />
                           <span>TEXTE1 <div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff1g.png" /></div>
                           <div><a href="#">Voir le profil</a></div>
                           <br /><div><a href="#"> Envoyer un Mp</a></div>

                           </span>
                        </div>
                        <div class="infobulle"><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2.png" class="transparence" />
                           <span>TEXTE1 <div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2g.png" /></div>
                           <div><a href="#">Voir le profil</a></div>
                           <br /><div><a href="#"> Envoyer un Mp</a></div>

                           </span>
                        </div>
                                                   <div class="infobulle"><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2.png" class="transparence" />
                           <span>TEXTE1 <div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2g.png" /></div>
                           <div><a href="#">Voir le profil</a></div>
                           <br /><div><a href="#"> Envoyer un Mp</a></div>

                           </span>
                        </div>
                                                   <div class="infobulle"><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2.png" class="transparence" />
                           <span>TEXTE1 <div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff2g.png" /></div>
                           <div><a href="#">Voir le profil</a></div>
                           <br /><div><a href="#"> Envoyer un Mp</a></div>

                           </span>
                        </div>

                        </center>
                     </div>
                  </div>


                  <div id="onglet5" style="display: none;">
                     <div id="div_5" style="z-index: 14; ">
                        <br/><br/>
                     <div class="titremodulo"> . Partenaires . </div>
                     <br />Phasellus sit amet felis ac neque gravida eleifend a a arcu.
<br /> <br /> Integer gravida, urna id pulvinar rutrum, nibh purus mollis tortor, non iaculis enim enim ut neque.
<br /> <br /> Donec at odio eu odio ultrices dapibus. Sed eget risus et tellus rhoncus aliquet.
<br /> At sodales tortor aliquam eu.
<br > <img src="http://img130.imageshack.us/img130/4500/logogcl.gif" class="transparence" /> <img src="http://img130.imageshack.us/img130/4500/logogcl.gif" class="transparence" /> <img src="http://img130.imageshack.us/img130/4500/logogcl.gif" class="transparence" /> <img src="http://img130.imageshack.us/img130/4500/logogcl.gif" class="transparence" />
                     </div>
                  </div>

         </div>
   </td>

</tr>
<tr>
   <td colspan="2">
            <table width="100%">
               <tr>
                  <td width="50%"><div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/staff.png" alt="Staff" class="onglet" onmouseover="javascript:patonglet4()"></div></td>

                  <td width="50"><div><img src="http://sd-2.archive-host.com/membres/images/134568121656250658/partenaires.png" alt="Partenaires" class="onglet" onmouseover="javascript:patonglet5()"></div></td>

               </tr>
            </table>

   </td>
</tr>
</table>

... LE CSS ...

Code:: #tablo{
border: 0px;
width:700px;
height: 500px;
text-align: center;
box-shadow: 0px 0px 2px #000000;
background-color:#6bd0e2;
}

#modulo{
height:380px;
width: 320px;
background:url("http://sd-2.archive-host.com/membres/images/134568121656250658/welcomederriere.png") no-repeat bottom right;
vertical-align: top;
color: #006699;
}

.titremodulo {
vertical-align: top;
margin-left: auto;
margin-right: auto;
width: 90%;
font-family: "Trebuchet MS",impact, serif;
font-size: 16px;
text-transform: uppercase;
border-bottom: 1px dashed #006699;
color: #006699;
text-align: center;
border-left: 3px solid #006699;
border-right: 3px solid #006699;
}

.titremodulo:hover{
vertical-align: top;
margin-left: auto;
margin-right: auto;
width: 90%;
font-family: "Trebuchet MS",impact, serif;
font-size: 16px;
text-transform: uppercase;
border-bottom: 1px dashed #2087bb;
color: #2087bb;
text-align: center;
border-left: 3px solid #2087bb;
border-right: 3px solid #2087bb;
}

.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}

.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}

div.infobulle
{
text-align: center;
position: relative;
float: left;
margin:8px;
}

div.infobulle span
{
display: none;

}

div.infobulle:hover
{
background: none;
z-index: 999;
color: #00699;

}

div.infobulle:hover span
{
display: inline;
position: absolute;
top: 30px;
background-color: #44b3c7;
color: #006699;
padding: 12px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
border: #FFFFFF 1px;
}

Sujet: Re: Faire un tableau html Jeu 17 Mar 2011, 19:11

Merci beaucoup pour l'information de comment bloquet un onglet =)
Maintenant, faut que je continue de m'atteler à la tâche x)

Sujet: Re: Faire un tableau html Dim 20 Mar 2011, 13:37

Merci Ella'

Salut Ella', je me suis décidée à utiliser ton code mais j'ai un petit problème avec la partie "staff"
Pour que tu puisses constater : http://deathschool.forumactif.org/.

En effet l'affichage ne marche pas bien, tu n'as pas oublié d'ajouter le CSS ?

C'est fort possible en effet^^ Je vais le rajouter.

edit : Ah c'est vrai que ça marche beaucoup avec le CSS^^ Merci !

Oui voilà, il ne te reste qu'a changer les couleurs et les images =) si t'as un soucis avec les codes n'hésite pas j'essaierai de trouver avec toi ;)

Merci encore^^

» html d'une page d'accueil
» Titres de Fiches + tableau
» Un tableau pour une 'tite Pierre ? :)