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 Cufon on certain elements?

    How to align form at the center of the page in html/css

    How to create smaller CSS files for easier handling while developing [closed]

    How to set font family and size in html/css

    How can I expand this picture to cover the width of my page?

    How to get border radius and gradient background working together in IE 9

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to make multiple breaks using CSS?

    How to make pop up div locked to the page coordinates in jQuery

    How to apply a complex style to the selection of a Select2 component?

    How to extend the border-top on my nav_bar class

    User agent, how to have diferent css files for diferent devices automaticly

    How to get a CSS selector using Selenium WebDriver?

    How to set auto-margin boxes in flexible-width design using CSS?

    Bootstrap with custom css how to align text vertically?

    how to put text on the middle of an image

    How can I align my HTML components with CSS?

    How To Adjust CSS List On Hover Image

    making div inside div and put it right-bottom corner how?

    How do you organize your template structure in CodeIgniter?

    How to share js/css/images across Rails applications?

    Ascii character codes shown as text in browser [duplicate]

    How to have a multiline CSS horizontal scroll?

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

    how to set height of a 'td' inside a array in javascript using CSS

    In CSS, how to scale multiple overlayed images responsively?

    How to add CSS stylesheet to aspx.vb table

    How to find if a request is for js or css in httpHandler

    How to create desktop widgets [closed]

    How to only use jquery .css() on a specific media query?