Pouvez vous m'aider à simplifier ce code ?

[Guilde-Egregore]

Bonjour, j'ai besoin d'aide pour simplifier ce code. À vrais dire j'ai ajouté beaucoup trop de tableau pour faire la mise en forme que j'avais envie mais j'ai vu qu'il y a une méthode plus simple mais que je n'arrive pas à reproduire.

Au final j'ai besoin de cette mise en page pour reproduire plusieurs tableau.

Merci bonne fin de weekend !

Code:

<table border="1">
                            
   <tbody>
      <tr>
                                
         <td>
                                 
            <table _moz_resizing="true" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png'); background-repeat: repeat; width: 100%;" cellpadding="10" cellspacing="10">
                                                                                                                                                                                                                                                                                                                                                                                                                      
               <tbody>
                  <tr>
                                                                                                                                                                                                                                                                                                                                      
                     <td align="justify">
                                                                                                                                                                                <img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" />                                                                                                                                                       
                     </td>
                                                                                                                                                                                                                                                                                                                                        
                     <td style="font-size: 16px;" align="justify">
                                                                                                                                                                                <em><strong>  « Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</strong></em>                                                                                                                                                       
                     </td>
                                                                                                                                                                                                                                                                                                                                      
                  </tr>
                                                                                                                                                                                                                                                                                                                                                                                                             
               </tbody>
            </table>
                                 
            <table _moz_resizing="true" style="background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 100%;" cellpadding="20" cellspacing="20">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
               <tbody>
                  <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                     <td align="justify">
                                                                                                                                                                                                                                                                                                                                        <span style="font-size: 16px;">« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.<br /><br />Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</span><br /> <br />     
                        <div align="center">
                               <span style="font-size: 16px;"><em>Tu viens de sortir et les marchandises sont à ta droite.</em></span>   
                        </div>
                               
                        <hr />
                                             
                        <table style="width: 100%;">
                                                                                                                                                                                                                                                                                                                                                        
                           <tbody>
                              <tr>
                                                                                                                                                                                                                                                                                                                                                                                                            
                                 <td align="center">
                                                      <br />    <a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter.">    <img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';" /></a>                                                                                                                                                                                                                               
                                 </td>
                                                                                                                                                                                                                                                                                                      
                              </tr>
                                                                                                                                                                                                                                                                                                                                                                       
                           </tbody>
                        </table>
                                                                                                                                                                                                                                                                                                                                                                         
                     </td>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
                  </tr>
                                                                                                                                                                 
               </tbody>
            </table>
                                                                                 
         </td>
                                
      </tr>
                           
   </tbody>
</table>

[demeter1]

En utilisant html validator, voici ce que l'on obtient. Maintenant, à savoir quel résultat final tu souhaites avoir.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title></title>

<style type="text/css">
 table.c6 {background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png'); background-repeat: repeat; width: 100%;}
 table.c5 {width: 100%;}
 div.c4 {text-align: center}
 span.c3 {font-size: 16px;}
 table.c2 {background-image: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png'); background-repeat: repeat; width: 100%;}
 td.c1 {font-size: 16px;}
</style>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>
<table class="c2" cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td align="justify"><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td class="c1" align="justify"><em><strong>« Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</strong></em></td>
</tr>
</tbody>
</table>
<table class="c6" cellpadding="20" cellspacing="20">
<tbody>
<tr>
<td align="justify"><span class="c3">« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.<br>
<br>
Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</span><br>
<br>
<div class="c4"><span class="c3"><em>Tu viens de sortir et les marchandises sont à ta droite.</em></span></div>
<hr>
<table class="c5">
<tbody>
<tr>
<td align="center"><br>
<a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter."><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

[Guilde-Egregore]

Merci pour cette réponse aussi rapide.

Je vais essayer ça et pour l'ensemble aussi.

Édition : Le code est toujours aussi compliqué, même plus car il y a des codes que je ne connais pas. Merci tout de même.

#MlleAlys avait fait une super réduction d'un de mes tableaux.

Voici ce que je dois mettre en page correctement mais vu le boulguiboulgua que c'est j'ai un peu de mal.

http://guilde-egregore.forumactif.org/h4-rendez-vous-en-quatre-moins-dix-sept

C'est enfaite le code avec les images :

Code:

<table style="table-layout: fixed; width: 100%; height: 600px;" border="1">
                                                                                              
   <tbody>
             
      <tr>
                                                                                                        
         <td rowspan="2" style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/statue13.jpg'); background-size:cover; background-position: center center; width:250px; position:relative;">
                                                                                      <img src="http://i38.servimg.com/u/f38/18/73/48/08/teteoi11.gif" style="position:absolute; top:60px; left:80px;" />                                                                     
            <div style="font-size:24px; font-family:gigi,georgia; color:#FFFFFF; text-align:center; font-style:italic; font-weight:bold; background:rgba(255,255,255,0.3); position:absolute; left:0; right:0; top:400px; padding:5px;">
                                                                                             « Astrub, la cité de la paix.<br />Rendez-vous des oiseaux migrateurs... »                                                                         
            </div>
                                                                                                               
         </td>
                                                                                                        
         <td style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/laport12.jpg'); background-size:cover; background-position: right top; width:450px; height:350px;">
                                                                             
         </td>
                                                                                                        
         <td rowspan="2" style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/audess12.jpg'); background-size:cover; background-position:  left center;">
                                                                                                                       
            <div class="marquee">
                                       <img src="http://img11.hostingpics.net/pics/884365audessusastrubnuages1600x600.png" />                                   
            </div>
                                                                                                               
         </td>
                                                                                                    
      </tr>
                                                                                               
      <tr>
                                                                                                      
         <td style="background-image:url('http://i38.servimg.com/u/f38/18/73/48/08/enchan13.png'); background-size:cover; background-position: left center; height: 250px;">
                                                                             
         </td>
                                                                                                    
      </tr>
                                                                                           
   </tbody>
</table>

[Scoubifitz]

Bonjour,

un code sans aucun tableau :

Code:

<div style="border:3px double #aaa;max-width:800px;margin:auto;font-size:16px;">

  <div style="background: url('http://i38.servimg.com/u/f38/18/73/48/08/t15mar10.png');padding:10px 0 20px;">
<img src="http://i38.servimg.com/u/f38/18/73/48/08/hdv_gr11.png" align="left" hspace="20"/>
    <p style="font-weight:bold;font-style:italic;"> « Je souhaite consulter le catalogue de l'hôtel des trocs et des ventes du groupement Égrégore ! »</p>
  </div>

  <div style="background:url('http://i38.servimg.com/u/f38/18/73/48/08/t15lig10.png');padding:20px;text-align:justify">
    <p>« Gleps ! Regarde à droite en sortant de la maison dans les marchandises, tu le trouvera sans doute.</p>
    <p>Et ne fais pas comme tout les autres, rapporte le moi ! Et ne pique rien, de toute manière je peux te voir de la fenêtre ! Eh ! Tu m'écoutes quand... »</p>

    <div style="text-align:center;margin:30px 0 20px;font-style:italic;">
      Tu viens de sortir et les marchandises sont à ta droite.
    </div>

    <hr/>

    <div style="text-align:center;margin:30px 0 20px">
      <a href="http://guilde-egregore.forumactif.org/t282-hotel-des-trocs-et-des-ventes-du-groupement-egregore#1116" target="_blank" title="Chercher le catalogue dans les marchandises, le trouver puis le consulter."><img src="http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png" alt="L'affichage de l'image ne se fait pas correctement veuillez contacter l'administrateur pour obtenir de l'aide." onmouseout="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvre10.png';" onmouseover="javascript:this.src='http://i38.servimg.com/u/f38/18/73/48/08/hdtvtr10.png';"/></a>
    </div>

  </div>
</div>

un cadre principal , un cadre pour l'image et le fond beige , un cadre pour le texte et le fond "cahier" ...

[Guilde-Egregore]

Merci je vais tester ça. Pardonnez-moi pour le temps de réponse !

Édition : C'est beaucoup plus compréhensible de cette manière ! Merci !