CSS: how can I make this table fit the border when resized?


Tags: html,css

Problem :

I would like to make the table with the three images fit inside the border when the page is resized (using CTRL + in the browser), so it looks like this:

alt text

And not like this:

alt text

How do I do this?

This is the body and table CSS code:

 body {
         background-color: #CC7722;
         margin-left:20%;
         margin-right:20%;
         border:3px dotted gray;
         padding: 10px 10px 10px 10px;
         font-family:sans-serif;

    }

    tabla {
          width=303px;
          height=123px;

    }

Here's the full html file:

<html>

 <head>

   <meta http-equiv="Content-Type"
         content="text/html; charset=ISO-8859-1" />

    <title>Evaluaci&oacute;n de Curso</title>
    <style type="text/css">
    body {
         background-color: #CC7722;
         margin-left:20%;
         margin-right:20%;
         border:3px dotted gray;
         padding: 10px 10px 10px 10px;
         font-family:sans-serif;

    }

    tabla {
          width=303px;
          height=123px;

    }

     </style>

 </head>

<body>
<form>


<!--img src='http://img690.imageshack.us/img690/4338/softrain2.jpg' width="408" height="123"border='0'/-->

<div-class="tabla">
<table>
<tr>

<td>
<img src='http://img690.imageshack.us/img690/4338/softrain2.jpg' width="300" height="123"border='0'/>
</td>

<td>
<img src='http://img204.imageshack.us/img204/671/oportuniti.png' width="300" height="123"border='0'/>
</td>

<td>
<img src='http://img530.imageshack.us/img530/4852/easytest.png' width="300" height="123" border='0'/>
</td>

</tr>
</table>
</div>









<h1>Evaluaci&oacute;n</h1>


<p>Por favor, tome unos minutos para llenar esta evaluaci&oacute;n. </p>

<p> </p>

<form action="http://localhost/aplicacion.php" method="POST">

    <p> 

        <!--h3>Info Personal</h3-->
        <table>


        <tr><td>Nombre y Apellido:</td> <td> <input type="text" name="nombre" value="" /> </td></tr>


        <tr><td>Empresa:</td> <td> <input type="text" name="empresa" value="" /> </td></tr>

        <tr><td>E-mail:</td> <td><input type="text" name="email" value="" cols="234" /> </td></tr>

       </table> 




        <h2>Curso</h2>

       <table> 
       <tr>
        <td>Nombre del Curso:</td> 
        <td>
        <select name="cursos">
          <option value="NA"></option>

          <option value="AdminLinux">Administraci&oacute;n Linux</option>
          <option value="AJAX">AJAX</option>
          <option value="Cmasmas">C++</option>
          <option value="Cisco">Cisco</option>
          <option value="DisenioWeb">Dise&ntilde;o Web</option>
          <option value="SCJP">SCJP</option>
          <option value="J2EE">J2EE</option>
          <option value="JavaFundamentals">Java Fundamentals</option>
          <option value="JavaScript">JavaScript</option>
          <option value="JSPServlets">JSPs y Servlets</option>
          <option value="MySQL">MySQL</option>
          <option value="SCWCD">SCWCD</option>

           <option value="PHP">PHP</option>
           <option value="Photoshop">Photoshop</option>
           <option value="PostgreSQL">PostgreSQL</option>
           <option value="Ruby">Ruby</option> 
           <option value="XML">XML</option>

          </select>

       </td>
       </tr>



        <td>Nombre del Instructor:</td> 
        <td>
        <select name="intructores">
           <option value="NA"></option>
          <option value="Antonio Rueda">Antonio Rueda</option>
          <option value="Jos&eacute; Julio Garagorry">Jos&eacute; Julio Garagorry</option>
          <option value="Carlos Forero">Carlos Forero</option>
          <option value="Daniel Garagorry">Daniel Garagorry</option>
        </select>
        </td>
         </tr>
         </table>

        <div>
    <h2>Valoraci&oacute;n Global del Curso</h2>



        <table>
        <p></p>
         &#191;El curso respondi&oacute; a sus expectativas iniciales? <br />
        &nbsp; &nbsp; Nada(1) / Totalmente(10)<br />
         &nbsp;
         1 <input type="checkbox" name="respondioExpectativasIniciales" value="1" /> 
         2 <input type="checkbox" name="respondioExpectativasIniciales" value="2" />
         3 <input type="checkbox" name="respondioExpectativasIniciales" value="3" /> 
         4 <input type="checkbox" name="respondioExpectativasIniciales" value="4" />
         5 <input type="checkbox" name="respondioExpectativasIniciales" value="5" />
         6 <input type="checkbox" name="respondioExpectativasIniciales" value="6" />
         7 <input type="checkbox" name="respondioExpectativasIniciales" value="7" />
         8 <input type="checkbox" name="respondioExpectativasIniciales" value="8" />
         9 <input type="checkbox" name="respondioExpectativasIniciales" value="9" />
         10 <input type="checkbox" name="respondioExpectativasIniciales" value="10" />

        </table>

        <table>
        <p></p>
         Duraci&oacute;n del curso <br />
        &nbsp; &nbsp; Muy Corta(1) / Excesiva(10) / Ideal (5)<br />
         &nbsp;
         1 <input type="checkbox" name="duracionDelCurso" value="1" /> 
         2 <input type="checkbox" name="duracionDelCurso" value="2" />
         3 <input type="checkbox" name="duracionDelCurso" value="3" /> 
         4 <input type="checkbox" name="duracionDelCurso" value="4" />
         5 <input type="checkbox" name="duracionDelCurso" value="5" />
         6 <input type="checkbox" name="duracionDelCurso" value="6" />
         7 <input type="checkbox" name="duracionDelCurso" value="7" />
         8 <input type="checkbox" name="duracionDelCurso" value="8" />
         9 <input type="checkbox" name="duracionDelCurso" value="9" />
         10 <input type="checkbox" name="duracionDelCurso" value="10" />

        </table>

<p></p>
<table>
<p></p>
         <b>&#191;Qu&eacute; opini&oacute;n le mereci&oacute; el contenido general del curso?</b><br />

         &nbsp; &nbsp;Deficiente(1) / Excelente(10)<br />


         &nbsp;1 <input type="checkbox" name="opinionContenido" value="1" /> 
         2 <input type="checkbox" name="opinionContenido" value="2" />
         3 <input type="checkbox" name="opinionContenido" value="3" /> 
         4 <input type="checkbox" name="opinionContenido" value="4" />
         5 <input type="checkbox" name="opinionContenido" value="5" />
         6 <input type="checkbox" name="opinionContenido" value="6" />
         7 <input type="checkbox" name="opinionContenido" value="7" />
         8 <input type="checkbox" name="opinionContenido" value="8" />
         9 <input type="checkbox" name="opinionContenido" value="9" />
         10 <input type="checkbox" name="opinionContenido" value="10" />

      </table>


        <h2>Evaluaci&oacute;n al Profesor</h2>
        <p>Califique del 1 al 10 las siguientes aptitudes del profesor. <br />&nbsp; &nbsp;<b>Deficiente(1) / Excelente(10)</b>.</p>

        <table>
        <tr><td>Claridad Expositiva</td></tr>
        <tr><td> 1 <input type="checkbox" name="claridadExpositoria" value="1" /> 
         2 <input type="checkbox" name="claridadExpositoria" value="2" />
         3 <input type="checkbox" name="claridadExpositoria" value="3" /> 
         4 <input type="checkbox" name="claridadExpositoria" value="4" />
         5 <input type="checkbox" name="claridadExpositoria" value="5" />
         6 <input type="checkbox" name="claridadExpositoria" value="6" />
         7 <input type="checkbox" name="claridadExpositoria" value="7" />
         8 <input type="checkbox" name="claridadExpositoria" value="8" />
         9 <input type="checkbox" name="claridadExpositoria" value="9" />
         10 <input type="checkbox" name="claridadExpositoria" value="10" />
        </td></tr>
        </table> 
        <p></p>
        <table>
        <tr><td>Capacidad de Motivaci&oacute;n</td></tr>
        <tr><td> 1 <input type="checkbox" name="capacidadDeMotivacion" value="1" /> 
         2 <input type="checkbox" name="capacidadDeMotivacion" value="2" />
         3 <input type="checkbox" name="capacidadDeMotivacion" value="3" /> 
         4 <input type="checkbox" name="capacidadDeMotivacion" value="4" />
         5 <input type="checkbox" name="capacidadDeMotivacion" value="5" />
         6 <input type="checkbox" name="capacidadDeMotivacion" value="6" />
         7 <input type="checkbox" name="capacidadDeMotivacion" value="7" />
         8 <input type="checkbox" name="capacidadDeMotivacion" value="8" />
         9 <input type="checkbox" name="capacidadDeMotivacion" value="9" />
         10 <input type="checkbox" name="capacidadDeMotivacion" value="10" />
        </td></tr>
        </table> 

        <p></p>
        <table>
        <tr><td>Dominio de m&eacute;todos de ense&ntilde;anza</td></tr>
        <tr><td> 1 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="1" /> 
         2 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="2" />
         3 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="3" /> 
         4 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="4" />
         5 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="5" />
         6 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="6" />
         7 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="7" />
         8 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="8" />
         9 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="9" />
         10 <input type="checkbox" name="dominioDeMetodosDeEnsenianza" value="10" />
        </td></tr>
        </table> 

        <p></p>
        <table>
        <tr><td>Dominio del contenido</td></tr>
        <tr><td> 1 <input type="checkbox" name="dominioDelContenido" value="1" /> 
         2 <input type="checkbox" name="dominioDelContenido" value="2" />
         3 <input type="checkbox" name="dominioDelContenido" value="3" /> 
         4 <input type="checkbox" name="dominioDelContenido" value="4" />
         5 <input type="checkbox" name="dominioDelContenido" value="5" />
         6 <input type="checkbox" name="dominioDelContenido" value="6" />
         7 <input type="checkbox" name="dominioDelContenido" value="7" />
         8 <input type="checkbox" name="dominioDelContenido" value="8" />
         9 <input type="checkbox" name="dominioDelContenido" value="9" />
         10 <input type="checkbox" name="dominioDelContenido" value="10" />
        </td></tr>
        </table> 

        <p></p>
        <table>
        <tr><td><b>Evaluaci&oacute;n general al profesor</b></td></tr>
        <tr><td> 1 <input type="checkbox" name="evaluacionGralProfesor" value="1" /> 
         2 <input type="checkbox" name="evaluacionGralProfesor" value="2" />
         3 <input type="checkbox" name="evaluacionGralProfesor" value="3" /> 
         4 <input type="checkbox" name="evaluacionGralProfesor" value="4" />
         5 <input type="checkbox" name="evaluacionGralProfesor" value="5" />
         6 <input type="checkbox" name="evaluacionGralProfesor" value="6" />
         7 <input type="checkbox" name="evaluacionGralProfesor" value="7" />
         8 <input type="checkbox" name="evaluacionGralProfesor" value="8" />
         9 <input type="checkbox" name="evaluacionGralProfesor" value="9" />
         10 <input type="checkbox" name="evaluacionGralProfesor" value="10" />
        </td></tr>
        </table> 


       <h2>Ambiente del Curso y Materiales</h2> 

        <table>
        <tr><td>Calidad de la infraestructura</td></tr>
        <tr><td> 1 <input type="checkbox" name="calidadInfraestructura" value="1" /> 
         2 <input type="checkbox" name="calidadInfraestructura" value="2" />
         3 <input type="checkbox" name="calidadInfraestructura" value="3" /> 
         4 <input type="checkbox" name="calidadInfraestructura" value="4" />
         5 <input type="checkbox" name="calidadInfraestructura" value="5" />
         6 <input type="checkbox" name="calidadInfraestructura" value="6" />
         7 <input type="checkbox" name="calidadInfraestructura" value="7" />
         8 <input type="checkbox" name="calidadInfraestructura" value="8" />
         9 <input type="checkbox" name="calidadInfraestructura" value="9" />
         10 <input type="checkbox" name="calidadInfraestructura" value="10" />
        </td></tr>
        </table> 

        <!--p></p>
        <table>
        <tr><td>Higiene de la infraestructura</td></tr>
        <tr><td> 1 <input type="checkbox" name="higiene" value="1" /> 
         2 <input type="checkbox" name="higiene" value="2" />
         3 <input type="checkbox" name="higiene" value="3" /> 
         4 <input type="checkbox" name="higiene" value="4" />
         5 <input type="checkbox" name="higiene" value="5" />
         6 <input type="checkbox" name="higiene" value="6" />
         7 <input type="checkbox" name="higiene" value="7" />
         8 <input type="checkbox" name="higiene" value="8" />
         9 <input type="checkbox" name="higiene" value="9" />
         10 <input type="checkbox" name="higiene" value="10" />
        </td></tr>
        </table--> 

        <p></p>
        <table>
        <tr><td>Calidad de los refrigerios</td></tr>
        <tr><td> 1 <input type="checkbox" name="refrigerios" value="1" /> 
         2 <input type="checkbox" name="refrigerios" value="2" />
         3 <input type="checkbox" name="refrigerios" value="3" /> 
         4 <input type="checkbox" name="refrigerios" value="4" />
         5 <input type="checkbox" name="refrigerios" value="5" />
         6 <input type="checkbox" name="refrigerios" value="6" />
         7 <input type="checkbox" name="refrigerios" value="7" />
         8 <input type="checkbox" name="refrigerios" value="8" />
         9 <input type="checkbox" name="refrigerios" value="9" />
         10 <input type="checkbox" name="refrigerios" value="10" />
         No hubo <input type="checkbox" name="refrigerios" value="noHubo" />
        </td></tr>
        </table>  

        <p></p>
        <table>
        <tr><td>Calidad y nivel de los materiales del curso</td></tr>
        <tr><td> 1 <input type="checkbox" name="calidadMateriales" value="1" /> 
         2 <input type="checkbox" name="calidadMateriales" value="2" />
         3 <input type="checkbox" name="calidadMateriales" value="3" /> 
         4 <input type="checkbox" name="calidadMateriales" value="4" />
         5 <input type="checkbox" name="calidadMateriales" value="5" />
         6 <input type="checkbox" name="calidadMateriales" value="6" />
         7 <input type="checkbox" name="calidadMateriales" value="7" />
         8 <input type="checkbox" name="calidadMateriales" value="8" />
         9 <input type="checkbox" name="calidadMateriales" value="9" />
         10 <input type="checkbox" name="calidadMateriales" value="10" />
        </td></tr>
        </table> 


        <p></p>
        <table>
        <tr><td><b>Nivel de organizaci&oacute;n del curso</b></td></tr>
        <tr><td> 1 <input type="checkbox" name="nivelOrganizacion" value="1" /> 
         2 <input type="checkbox" name="nivelOrganizacion" value="2" />
         3 <input type="checkbox" name="nivelOrganizacion" value="3" /> 
         4 <input type="checkbox" name="nivelOrganizacion" value="4" />
         5 <input type="checkbox" name="nivelOrganizacion" value="5" />
         6 <input type="checkbox" name="nivelOrganizacion" value="6" />
         7 <input type="checkbox" name="nivelOrganizacion" value="7" />
         8 <input type="checkbox" name="nivelOrganizacion" value="8" />
         9 <input type="checkbox" name="nivelOrganizacion" value="9" />
         10 <input type="checkbox" name="nivelOrganizacion" value="10" />
        </td></tr>
        </table>  



        <div>
        <h2>Otros Cursos</h2>
        <p>Marque otros cursos de capacitaci&oacute;n profesional que le interesen.</p>

        <p>
        <table>

<tr><td><label><b>Desarrollo</b></label></td> <td></td> <td>&nbsp;</td> 
             <td><label><b>Bases de Datos</b></label></td> <td></td> <td>&nbsp;</td> 
             <td><label><b>Redes y Seguridad</b></label></td> <td></td> <td>&nbsp;</td> 
             <td><label><b>Ofim&aacute;tica</b></b></label></td> <td></td>
        </tr>       




         <tr><td><label>AJAX</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="AJAX"></td> <td>&nbsp;</td> 
             <td><label>MySQL</label> </td><td>  <input type="checkbox" name="cursosDeInteres[]" value="MySQL"></td> <td>&nbsp;</td> 
             <td><label>Cisco</label> </td> <td><input type="checkbox" name="cursosDeInteres[]" value="Cisco"></td> <td>&nbsp;</td> 
             <td><label>Office 2007</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="Office2007"></td>
        </tr>

         <tr><td><label>C#</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="C#"></td> <td>&nbsp;</td> 
             <td><label>Oracle</label></td> <td> <input type="checkbox" name="cursosDeInteres[]" value="Oracle"></td> <td>&nbsp;</td> 
             <td><label>Linux(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="LinuxRedes"></td> <td>&nbsp;</td> 
             <td><label>Office 2010</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="Office2010"></td>
        </tr>


        <tr><td><label>C++</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="Cmasmas"></td> <td>&nbsp;</td> 
             <td><label>PostgreSQL</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="PostgreSQL"></td> <td>&nbsp;</td> 
             <td><label>Linux(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="LinuxSeguridad"></td> <td>&nbsp;</td> 
             <td><label>OpenOffice</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="OpenOffice"></td>
        </tr>

<tr><td><label>HTML y CSS</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="HTMLCSS"></td> <td>&nbsp;</td> 
             <td><label>SQL Server</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SQL Server"></td> <td>&nbsp;</td> 
             <td><label>Solaris(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SolarisRedes"></td> <td>&nbsp;</td> 
             <td><label>Photoshop</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="Photoshop"></td>
        </tr>


<tr><td><label>Java</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="Java"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label>Solaris(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SolarisSeguridad"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>J2EE</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="J2EE"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label>Windows(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="WindowsRedes"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>JavaScript</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="JavaScript"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label>Windows(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="WindowsSeguridad"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>


<tr><td><label>.NET</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="dotNet"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>PHP</label></td> <td><input type="checkbox" name="programacionShell[]" value="PHP"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>



<tr><td><label>Programaci&oacute;n Shell</label></td> <td><input type="checkbox" name="programacionShell[]" value="dotNet"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>Ruby</label></td> <td><input type="checkbox" name="programacionShell[]" value="Ruby"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>Visual Basic</label></td> <td><input type="checkbox" name="programacionShell[]" value="Visual Basic"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>

<tr><td><label>XML</label></td> <td><input type="checkbox" name="programacionShell[]" value="XML"></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td> <td>&nbsp;</td> 
             <td><label></label></td> <td></td>
        </tr>



         </table>









         </table>




         </table>





        <!--tr><td>AJAX</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Ajax" /></td></tr>
        <tr><td>C++</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Ajax" /></td></tr>
         <tr><td>Cisco</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Cisco" /></td></tr>
         <tr><td>Fireworks</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Fireworks" /></td></tr>
         <tr><td>J2EE</td> <td><input type="checkbox" name="cursosDeInteres[]" value="J2EE" /></td></tr>

         <tr><td>HTML & CSS</td> <td><input type="checkbox" name="cursosDeInteres[]" value="HTML&CSS" /></td></tr>  
         <tr><td>Java (b&aacute;sico)</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Java" /></td></tr>
         <tr><td>Javascript</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Javascript" /></td></tr>
         <tr><td>JSPs y Servlets<td><input type="checkbox" name="cursosDeInteres[]" value = "JSPServlet" /></td></tr>   
        <tr><td>Linux</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Linux" /></td></tr> 
         <tr><td>MySQL</td> <td><input type="checkbox" name="cursosDeInteres[]" value="MySQL" /></td></tr>
        <tr><td>Oracle (BD)</td> <td><input type="checkbox" name="cursosDeInteres[]" value="OracleBD" /></td></tr>
         <tr><td>Photoshop</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Photoshop" /></td></tr>
        <tr><td>PHP</td> <td><input type="checkbox" name="cursosDeInteres[]" value="PHP" /></td></tr>
         <tr><td>PostgreSQL</td> <td><input type="checkbox" name="cursosDeInteres[]" value="PostgreSQL" /></td></tr>
         <tr><td>Python</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Python" /></td></tr>

         <tr><td>Ruby</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Ruby" /></td></tr> 
        <tr><td>SCJP</td> <td> <input type="checkbox" name="cursosDeInteres[]" value="SCJP" /> </td></tr>
        <tr><td>SCWCD</td> <td><input type="checkbox" name="cursosDeInteres[]" value="SCWCD" /> </td></tr>
         <tr><td>Solaris</td> <td><input type="checkbox" name="cursosDeInteres[]" value="Solaris" /> </td></tr>
        <tr><td>XML</td> <td><input type="checkbox" name="cursosDeInteres[]" value="XML" /> </td></tr-->





        </table>
        </p> 
        </div> 


        <p></p>
<p>&#191;Le gustar&iacute;a recibir informaci&oacute;n por e-mail cuando ofertemos los cursos de su inter&eacute;s?<br />
          <table>
          <td>S&iacute;</td> <td><input type="radio" name="recibeMailsCursos" value="si" /> </td>
          <td>No</td> <td><input type="radio" name="recibeMailsCursos" value="no" /> </td>
          </table>
        </p>




        <h2>Comentarios</h2> 
         <p>&#191;Qu&eacute; le gust&oacute; del curso? &#191;Qu&eacute; no le gust&oacute;?<br />
            &#191;C&oacute;mo cree que podr&iacute;a mejorarse?
         </p>



<textarea name="comentarios" rows="10" cols="60"></textarea>
        <p></p>

<p></p>
<p>&#191;Nos permite publicar publicar sus comentarios de experiencia con nosotros en nuestra p&aacute;gina web, web mail, brochure u otro medio?<br />
          <table>
          <td>S&iacute;</td> <td><input type="radio" name="publicar" value="si" /> </td>
          <td>No</td> <td><input type="radio" name="publicar" value="no" /> </td>
          </table>
        </p>
        <p></p>
        <input type="submit" value="Enviar Evaluaci&oacute;n"/>



        </p>

    </table>
  </form>





  </body>


</html>


Solution :

I've fixed it and tested it with Firefox.

Here are little instructions:

  • set width of columns to (width/height)*(height which you want have images) to be images of same height
  • set width of all images in table to 100%
  • don't set height of images

And here's changed code:

<style type="text/css">
body {
     background-color: #CC7722;
     margin-left:20%;
     margin-right:20%;
     border:3px dotted gray;
     padding: 10px 10px 10px 10px;
     font-family:sans-serif;

}


.tabla img {
  width:100%;
}

 </style>

    <div class="tabla">
<table>
<tr>

<td width="408">
<img src='http://img690.imageshack.us/img690/4338/softrain2.jpg'  border='0'/>
</td>

<td width="407">
<img src='http://img204.imageshack.us/img204/671/oportuniti.png'  border='0'/>
</td>

<td width="241">
<img src='http://img530.imageshack.us/img530/4852/easytest.png'   border='0'/>
</td>

</tr>
</table>
</div>

EDIT: because it will not work in Chrome:

  • set width of columns to (width/height)*(height which you want have images) to be images of same height

    CSS Howto..

    How to disable and enable css rule

    Infuriating gap: How do you get rid of a gap between IMG and surrounding content

    How to customize the HTML5 input range type looks using CSS?

    how to pass context value to css

    How to add css class to an element inside nav element

    How to show local html file into webview?

    Always show hover text in an appropriate position

    How to use css linear gradients in IE10?

    How to prevent the scroll of table when click to header on Chrome?

    How to get maximum compatibility with most of the devices for a Mobile Website?

    How to dynamically change CSS style attribute of DIV tag?

    How to set height?

    How to center a span in a div

    how to position an element on top of another element?

    links are showing up on each line, instead of inline

    How to get rid of text form borders in Chrome and Firefox?

    How to blur the div below the section with CSS 3 without background image?

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to make value text in form be italic

    How can I use CSS to add a blank column between paired column groupings?

    How to margin div inside other div?

    How to show blocks for progressbar using CSS

    CSS - How do you make text overflow out both ends of a div?

    How to create a loading image sprite using background position

    How do I use the alignment of one class and the font of another?

    How to Grab an Icon Image

    How do I reference host element in CSS of an Angular2 component?

    How can I align multiple lists in the same row?

    How do I get
    margin working?

    contenteditable does not show pseudoselector :before in safari