se ve mal la tabla al momento de cargar pagina

[BekoxD]

Hola,
Tengo un problema con la tabla para la categoría de mi web, al momento de carga cada pagina se muestra así, tal como esta la imagen. (el sitio esta en html puro)



ya cuando se termina de cargar la pagina se muestra normal, tal como dejo en esta imagen, claro así se debería de mostrar al momento de cargar la web.

Código HTML:

<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody><tr>

  </tr>
  <tr>
    <td valign="top" width="100%" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/iz_fnd.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody><tr>

<!-- menu_top2-->

        <td></td>
      </tr>
      <tr>
        <td><img src="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/busca_titulo.jpg" width="180" height="50" /></td>

 <!-- menu_top2-->
      </tr>
      <tr>
        <td>
                <!-- SiteSearch Google -->
              <table border="0">
                <tbody><tr><td width="173" height="32" align="left" valign="top" nowrap="nowrap"> 
  
<form action="resultadosgoogle.html" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-2486901089830076:87bauqb3in5" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="14" />
    <input type="submit" name="sa" value="IR" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=es"></script> 
  
  {lang_registered_user}  </p>
<p>{user_box} </p></td>
                </tr>
                <tr> </tr></tbody></table>
                <!-- SiteSearch Google -->        
                  
	<center>  
				
	 <!-- Webs amigas -->

	 <!-- Photobucket -->
	
        <!-- Photobucket -->
      <tr>
        <td><img src="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/titulo_categ.png" width="180" height="52"></td>
      </tr>
      <tr>
        <td>
        
        
           <div class="firsthead" align="center"><a href="javascript:myMenu.expandAll();">Expander</a> | <a href="javascript:myMenu.collapseAll();">Contraer</a></div>
 
            <div class="firsthead" align="center"></div>
             <div style="float: left" id="my_menu" class="sdmenu"> 
      <div></div>
             </div>
                    
        
    <div align="center">
       
             <p>Disponibles {lang_site_stats}<br>
               
               
               {banner_b}
               
               
                    <br>
                  <br>
                            <span align="left"><strong>Puedes Econtrarme:</strong></span>


</div> </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody></table></td>

<!-- Menu Horizontal nuevo -->


<td style="" padding-right:="" 10px="" valign="top" align="right" nowrap="nowrap"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td width="87" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg">&nbsp;</td>
        <td width="99" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg">&nbsp;</td>
        <td width="96" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg">&nbsp;</td>
        <td width="90" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg">&nbsp;</td>
       
	   <td width="87" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg">&nbsp;</td>
	   
	   
        <td width="99%" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/menu_fnd_botones.jpg"></td>
      </tr>
    </tbody></table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>

          <td colspan="3" style="padding: 0px;">

	<img src="http://www.zonawebin.com/templates/zonawebin/images/headerbj.jpg" />


<!-- Menu Horizontal nuevo -->
          
          
<!-- INICIA EL CONTENIDO -->
      


<!-- Menu Horizontal Viejo-->
<!-- Adsense 728 x 90-->
<center></center>
<!-- Adsense 728 x 90--></td></tr><tr><td colspan="3" align="center" height="1">


<!-- Adsense 728x15 -->
</br>
<center></center>
<!-- Adsense 728x15 -->

 



</td></tr>

        <tr>
          <td colspan="3" bgcolor="#adadad" height="1"><img src="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/spacer.gif" width="100" height="2"></td>
        </tr>

<tr><td colspan="3" align="center" height="1">

{if msg}<b>{msg}</b><br>
<br>
{endif msg}
</td></tr>


        <tr>
          <td style="padding: 10px;" valign="top">
          <table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(3c2, 3c2, 3c2);"><tbody><tr valign="top"><td width="300" height="25" align="left">{clickstream}</td>
                            </tr>
                      </tbody>
                </table>
           {if categories} 
           <table border="0" cellpadding="3" cellspacing="0" width="100%">
                          <tbody><tr> 
                            <td class="" valign="top">{lang_sub_categories}</td>
                          </tr>
                          <tr> 
                            <td class="row2" valign="top">{categories}</td>
                          </tr>
                        </tbody></table>
          
            <br>
				  {endif categories}
				  <br>
				  {paging_stats}
				  <br>
				  <br>
                  {if msg}<b>{msg}</b><br><br>{endif msg}
                                    <div align="right">{paging} </div>
                  {if thumbnails}
                  
                  <table width="93%" height="14" border="0" cellpadding="0" cellspacing="0">
                    <tbody><tr> 
                      <td class="">{thumbnails}</td>
                    </tr>
                  </tbody></table>
            {endif thumbnails}
                  <br>
				  <div align="right"><div class="pagination">{paging}</div> </div> 
          <table width="300" border="0" align="center" cellpadding="3" cellspacing="0" style="border: 1px solid rgb(51, 51, 51); background-color: rgb(3c2, 3c2, 3c2);"><tbody><tr valign="top"><td width="300" height="25" align="left"><center></center></td>
                            </tr>
                      </tbody>
                      </table> </td>
          <td width="1" bgcolor="#eaeaea"></td>
          <td valign="top" width="174"><img src="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/publicidad.gif" width="174" height="30"><br>


<!-- BEGIN SMOWTION TAG - 160x600 - comentarios para hi5 imagenes para hi5 y plantillas hi5 comentarios imagenes para myspace: entretenimiento - DO NOT MODIFY -->

<!-- END SMOWTION TAG - 160x600 - comentarios para hi5 imagenes para hi5 y plantillas hi5 comentarios imagenes para myspace: entretenimiento - DO NOT MODIFY --></td>
        </tr>




        <!-- termina el contenido -->
        
        
        
        
        
        <tr>
          <td colspan="3" align="right"> </td>
        </tr>

<tr><td colspan="3" align="right">
 </td></tr>


        <tr>
          <td colspan="3" class="copy" align="right" bgcolor="#d3d3d3"><r>
</r></td>
        </tr>
    </tbody></table>
                <br></td>

    <td valign="top" width="30" background="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/de_fnd.gif"><img src="http://i611.photobucket.com/albums/tt197/zonawebin/imgtheme/esquina.gif" width="8" height="32"></td>
  </tr>
</tbody></table> 

tengo que agregar o quitar algo, para que se muestre tal como quiero.

Saludos.

[hades87]

Yo quitaría el div que tienes dentro del form, que eso rompe la estructura y no se si es muy correcto, hay otros métodos para poner un formulario decente.

Realmente yo quitaría todas las tablas y lo haría integro a divs y CSS, además de separar los scripts a un archivo .js específico además de organizar y optimizar mucho la página, por que realmente no se entiende nada!

[BekoxD]

Muchas gracias por lo que dijiste.

Haber si me pasa un datito sobre 4images, este template lo estoy haciendo para 4images, ¿pero se puede desarrollar templates4images con css y div, dejando de lado las tablas?

Claro si la respuesta es si, entonces sin perder el tiempo lo hago con css y divs.

Gracias.

[Corneja]

Por supuesto que se puede, no porque el template se haga con 4 imágenes (seguro que no necesitas cortar tu imagen en 4 ) sino porque casi todo se puede hacer con DIV y CSS

[hades87]

Si, todo, absolutamente todo se puede lograr con CSS y HTML, las tablas son específicas para datos tabulares y por lo tanto no sirven para crear páginas web. Es un mal hábito que se ha de erradicar, si vas algo perdido en CSS tienes unas estupendas guías hechas por Mikmoro

[BekoxD]

muchas gracias, por sus respuestas, entonces no queda mejor remedio que realizar un template con css.

Claro ya volveré a preguntar algo segun vaya realizando el template.

un saludo y gracias