tuto un petit bloc avec des onglets.

SCRIPT
center&gt;
<table cellspacing="1" border="0" style="width: 776px; height: 278px;" class="forumline">
    <tbody>
        <tr>
            <th nowrap="nowrap" class="thTop"> </th>
        </tr>
        <tr>
            <td class="row1"><center>        <style type="text/css">
.colonnechamp {
   BORDER-TOP: 1px inset #F5F8FA;
   BORDER-BOTTOM: medium inset;
   BORDER-LEFT: 1px inset #F5F8FA;
   BORDER-RIGHT: 1px inset #26313B; 
   BORDER-BOTTOM: medium none;
   FONT-SIZE: 11px;
   COLOR: #000000;
   FONT-FAMILY: verdana;
   BACKGROUND-COLOR: #FFCC66;
   TEXT-ALIGN: left
}
.tableheader1 {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   font-style: normal;
   line-height: normal;

   font-weight: bold;
   color: #FFFF00;
   height:30px;
   text-align: center;
   white-space: normal;
   border: 1px Aucune;
   background-color: #CCD9EC;
}


.colonnechamp2 {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   BORDER-TOP: #F5F8FA 1px solid;
   BORDER-BOTTOM: #26313B 1px solid;
   BORDER-LEFT: #F5F8FA 1px solid;
   BORDER-RIGHT: #26313B 1px solid; 
   border-bottom: 1px solid #7D7D7D;
   FONT-SIZE: 11px; COLOR: #000000;
   FONT-FAMILY: verdana;
   BACKGROUND-COLOR: #EAEFF7;
}


input, textarea
{
   border:1px solid #EAEFF7; background-image :url('/images/bgin_tEX.gif');
   background-color :#F0F3F9;
   color :#000;
   font-family :Verdana,Arial,Helvetica,sans-serif;
   font-size :11px;
   
}


.tablegen2 {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   color: #000000;
   background-color: #CCD9EC;
   text-align: left;
   border-top: 1px;
   border-right: 1px;
   border-bottom: 1px dotted #DEE7F3;
   border-left: 1px;
}


.tablegen2b {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   color: #000000;
   background-color: #CCD9EC;
   text-align: left;
   border-top: 1px;


   border-bottom: 1px;
   border-left: 1px;
}


.tablegen2c {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   color: #000000;
   background-color: #CCD9EC;
   text-align: left;
   border-top: 1px;
   border-right: 1px inset;
   border-bottom: 1px;
   border-left: 1px;
}




.tablegenleft {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   color: #000000;
   background-color: #CCD9EC;
   text-align: left;
   border-top: 1px Aucune;
   border-right: 0px inset;
   border-bottom: 1px dotted #DEE7F3;
   border-left: 1px inset;
}
select {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 10px;
   font-style: normal;
   line-height: 1px;
   background-image: url('admin/modules/topics_ex/bgin.gif');
   border: 1px solid #EAEFF7;
   height: auto;
   width: auto
}
.tableonglet {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   border: 0px solid;
   margin: 0px;
   padding: 0px;
   width: 100%;
   color: #000000;
   border-collapse: collapse;
}
.tableheader2 {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   BORDER-TOP: #F5F8FA 1px solid;
   BORDER-BOTTOM: #26313B 1px solid;
   BORDER-LEFT: #F5F8FA 1px solid;
   BORDER-RIGHT: #26313B 1px solid;
   border-bottom: 1px solid #7D7D7D;
   FONT-SIZE: 11px;
   COLOR: #000000;
   FONT-FAMILY: verdana;
   BACKGROUND-COLOR: #EAEFF7;

   font-style: normal;
   font-variant: small-caps;
   text-align: center;
}
.fontadmintoics {
   font-family: "Microsoft Sans Serif", Arial, Verdana;
   font-size: 12px;
   font-style: normal;
   text-align: justify;
}
</style> <SCRIPT language="javascript" type="text/javascript">
<!-- Definir les Styles des onglets -->
<!--BEG_HEAD
   function Onglet(nom, tailleX, tailleY, tailleXOg, tailleYOg, initOg ){
         this.nom = nom;
         this.tailleX = tailleX;
         this.tailleY = tailleY;
         this.tailleXOg = tailleXOg;
         this.tailleYOg = tailleYOg;
         this.onglets = new Array();
         this.currentOnglet = null;
         this.currentSelOnglet = null;
         this.initOg = initOg;
         this.clsEna = "ongletTextEna";
         this.clsDis = "ongletTextDis";
         this.clsSp = "ongletSpace";
         this.clsMiddle = "ongletMiddle";
         this.clsMain = "ongletMain";
         this.colorOver = "#F7810F";
         this.add = addOnglet;      
         this.displayHeader = displayOngletHeader;
         this.displayFooter = displayOngletFooter;
   
         this.changeOnglet = changeOnglet;
         this.onOngletOver = onOngletOver;
         this.onOngletOut = onOngletOut;
   }
      
   function addOnglet( og ){
      this.onglets[this.onglets.length] = og;
   }
      
   function displayOngletHeader(){
      var html = "";
      html += "<TABLE width=" + this.tailleX + " height=" + this.tailleY + " cellspacing=0 cellpadding=0>";
      html += "<TR><TD><TABLE cellpadding=0 cellspacing=0 height=" + this.tailleYOg + " width=100%><TR>";
         
      for( var i=0; i < this.onglets.length; i++ ){
          html += "<TD width=" + this.tailleXOg + " height=" + this.tailleYOg + " title="" + this.onglets[i].libOg + "" id=ogO" + this.nom + i + " class=" + ((this.initOg == i)?this.clsEna:this.clsDis) + " onclick="" + this.nom + ".changeOnglet(this, 'og_" + this.nom + i + "')" onmouseover="" + this.nom + ".onOngletOver(this)" onmouseout="" + this.nom + ".onOngletOut(this)">" + this.onglets[i].titreOg + "</TD>";
          html += "<TD class=" + this.clsSp + " width=5>&nbsp;</TD>";
      }
      html += "<TD class=" + this.clsSp + ">&nbsp;</TD></TR><TR><TD height=5 colspan=" + (this.onglets.length*2 + 1) + " class=" + this.clsMiddle + ">&nbsp;</TD></TR></TABLE></TD></TR><TR><TD class=" + this.clsMain + " height=" + (this.tailleY - this.tailleYOg)+ ">";
      document.write(html);
   }
      
   function displayOngletFooter(){
      var html = "";
      html += "</TD></TR></TABLE>";
      document.getElementById("og_" + this.nom + this.initOg).style.display = "";
      this.currentOnglet = document.getElementById("og_" + this.nom + this.initOg);
      this.currentSelOnglet = document.getElementById("ogO" + this.nom + this.initOg);
      document.write(html);
   }
      
   function OngletItem(titreOg, libOg ){
      this.titreOg = titreOg;
      this.libOg = libOg;
   }
      
   function changeOnglet( srcOg, srcTab ){
      this.currentSelOnglet.className = this.clsDis;
      this.currentOnglet.style.display = "none";
      this.currentSelOnglet.style.color="";
      this.currentSelOnglet = srcOg;
      this.currentOnglet = document.getElementById(srcTab);
      this.currentSelOnglet.className = this.clsEna;
      this.currentOnglet.style.display = "";
   }
      
   function onOngletOver( srcOg ){
      if( srcOg != this.currentSelOnglet ){
         srcOg.style.cursor = "hand";
         srcOg.style.color = this.colorOver;
      }else{
         srcOg.style.cursor='default';
         srcOg.style.color = "";
      }
   }
   
   function onOngletOut( srcOg ){
      srcOg.style.color="";
   }
   
   function ongletstyle(){
   // Ici définition et personnalisation de l'onglet !
      mystyle="<STYLE>";
      
      // Les entete d'onglet
      // Définition onglet sélectionné
      mystyle +=".ongletTextEna {BORDER-TOP: #F5F8FA 1px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid;  BORDER-BOTTOM: medium none; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #CCD9EC; TEXT-ALIGN: left}";
      // Définition Onglet non sélectionné
      mystyle +=".ongletTextDis {BORDER-TOP: #F5F8FA 1px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid;  BORDER-BOTTOM: medium none; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #EAEFF7; TEXT-ALIGN: left}";
      // Milieu
      // Trait espace entre entete onglet et espace entre corpt et enetete
      mystyle +=".ongletSpace {BORDER-BOTTOM: #80add6 1px solid}";
      //espace entre entete onglet et corp des onglets !
      mystyle +=".ongletMiddle {BORDER-RIGHT: #26313B 1px solid; BORDER-TOP: medium none; FONT-SIZE: 1px; BORDER-LEFT: #F5F8FA 1px solid; BORDER-BOTTOM: #000 0px solid; BACKGROUND-COLOR: #CCD9EC}";
      // corp de l'onglet
      // Corp de l'onglet
      mystyle +=".ongletMain {BORDER-TOP: #26313B 0px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BACKGROUND-COLOR: #CCD9EC}";
      mystyle +="</STYLE>";
      // Les valeurs de ces éléments sont modifiable à souhait sauf le nom de la classe !
      document.write(mystyle);
   } // fin de func JS
   ongletstyle();
   var monOnglet = new Onglet("monOnglet", 500, 100, 150, 20, 0);


   monOnglet.add(new OngletItem("&nbsp;Accueil&nbsp;", "Accueil"));
   monOnglet.add(new OngletItem("&nbsp;Votre titre ICI&nbsp;", "Cat&eacute;gorie"));
   monOnglet.add(new OngletItem("&nbsp;Téléchargements gratuit !", "Article"));
   monOnglet.add(new OngletItem("&nbsp;Le sploutch-site&nbsp;", "Options"));


    //monOnglet.displayHeader();
//  End -->
    </SCRIPT>    <SCRIPT language="javascript" type="text/javascript">
   
    monOnglet.displayHeader();
//  End -->
    </SCRIPT>   <!--  onglet 0-->
            <div id="og_monOnglet0" style="display: none; top: 0px; left: 0px; width: auto; height: auto;">
            <table cellspacing="0" cellpadding="3" border="0" align="center">
                <tbody>
                    <tr>
                        <td valign="top">    Inscrivez ici votre texte ! comme sur les autres onglets.    </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--  fin onglet 0 -->   <!--  onglet 1-->
            <div id="og_monOnglet1" style="display: none; top: 0px; left: 0px; width: auto; height: auto;">
            <table cellspacing="0" cellpadding="3" border="0" align="center">
                <tbody>
                    <tr>
                        <td valign="top">    Inscrivez ici votre texte !    </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--  fin onglet 1 -->    <!--  onglet 2-->
            <div id="og_monOnglet2" style="display: none; top: 0px; left: 0px; width: auto; height: auto;">
            <table cellspacing="0" cellpadding="3" border="0" align="center">
                <tbody>
                    <tr>
                        <td valign="top">    Le site de tout vos t&eacute;l&eacute;chargements 100% gratuit et l&eacute;gaux !         <a href="http://deco-oriental.wifeo.com/services-gratuits.php" target="_blank"> Cliquez-ICI</a><a>    </a></td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--  fin onglet 2 -->   <!--  onglet 3-->
            <div id="og_monOnglet3" style="display: none; top: 0px; left: 0px; width: auto; height: auto;">
            <table cellspacing="0" cellpadding="3" border="0" align="center">
                <tbody>
                    <tr>
                        <td valign="top">    Le sploutch-site !              <a href="http://deco-oriental.wifeo.com/services-gratuits.php" target="_blank"> Cliquez-ICI</a><a>    </a></td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--  fin onglet 3 -->       <script language="javascript" type="text/javascript">
monOnglet.displayFooter();
</script></center>   </td>
        </tr>
    </tbody>
</table>
Créer un site gratuitement et facilement
