How can I get this
out of this: ?
<input type="radio" name="one" checked="checked" id="1"/>
<label for="1">1</label>
<input type="radio" name="one" id="2"/>
<label for="2">2</label>
<input type="radio" name="one" id="3"/>
<label for="3">2.1.</label>
<input type="radio" name="one" id="4"/>
<label for="4">2.2.</label>
<input type="radio" name="one" id="54"/>
<label for="5">2.3.</label>
You can start with this
table { empty-cells: hide;}
td { border:1px solid orange; padding:10px 15px 10px 15px }
<table>
<tr>
<td>
<input type="radio" name="one" checked="checked" id="1" />
<label for="1">1</label>
</td>
<td colspan="3">
<input type="radio" name="one" id="2" />
<label for="2">2</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="one" id="3" />
<label for="3">2.1.</label>
</td>
<td>
<input type="radio" name="one" id="4" />
<label for="4">2.2.</label>
</td>
<td>
<input type="radio" name="one" id="54" />
<label for="5">2.3.</label>
</td>
</tr>
</table>
Related
I am dealing with a really weird error, this is my table:
But if i select something in the first row, and if i want to select something in the second row, then my selection in the first row goes away. so basically i need each row to be a separate radio group. Here is my code:
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Test" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Test" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="D" /></label>
</td>
</tr>
You have only to change the name of inputs, like that.
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Tes" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Tes" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Tes" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Tes" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Te" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="D" /></label>
</td>
</tr>
You have to keep only name different for different set of radio button.
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2" />
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3" />
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test_1" type="radio" value="A" id="Same4" />
</td>
<td>
<input name="Test_1" type="radio" value="B" id="Same5" />
</td>
<td>
<input name="Test_1" type="radio" value="C" id="Same6" />
</td>
<td>
<input name="Test_1" type="radio" value="D" id="Same7" />
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test_2" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="D" /></label>
</td>
</tr>
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="id_radio"/>ID
</td>
<td>
<input type="radio" name="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>
Because name attribute in radio button must be the same in radio group.
Try this:
<input type="radio" name="somename" value="id_radio"/>ID
<input type="radio" name="somename" value="surname_radio"/>Surname
<input type="radio" name="somename" value="dob_radio"/>DoB
More info at w3c
The name attribute is what links radio buttons into a group. Use value for the actual value of each button.
<td>
<input type="radio" value="id_radio" name="btn_group"/>ID
</td>
<td>
<input type="radio" value="surname_radio" name="btn_group"/>Surname
</td>
<td>
<input type="radio" value="dob_radio" name="btn_group"/>DoB
</td>
It is because they all have a different name. Give them 1 name and they will act as a group:
<input type="radio" name="radioGroup" value='id'/>ID
<input type="radio" name="radioGroup" value='surname'/>Surname
<input type="radio" name="radioGroup" value='dob'/>DoB
http://www.echoecho.com/htmlforms10.htm
You have to have the same name for all of the radio inputs.
Your problem is that you have different names for each radio button in order for them to group together, they must have the same name, it looks like you are confusing name and value.
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="searchType" value="id_radio"/>ID
</td>
<td>
<input type="radio" name="searchType" value="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="searchType" value="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>
I need to center these 2 columns of radio's and bring them closer together in the middle.
Can you help?
<table class="layout_table">
<tr>
<td style="width: 25%; text-align: left; padding-right: 25px;">
<fieldset class="icons" style="width: 120px; text-align: center;">
<legend>QS Actions</legend>
<img src="../images/icon_back.gif" border="0" alt="Back to Scenario View"/>
</fieldset>
</td>
<td style="width: 50%;">
<h2>
Quarter Spreads
</h2>
</td>
<td style="width: 25%;; text-align: left; padding-left: 30px;">
<br/>
<table class="legend_table" style="width: 300px;">
<tr>
<td colspan="2" class="shaded">Legend</td>
</tr>
<tr>
<td style="background-color: #ffff99;">Yellow: Modified during the current session</td>
</tr>
<tr>
<td class="critical_text" style="background: #ccccff;">Red MMC QS: Varies from sum of SMC/ELMP F/UF</td>
</tr>
<tr>
<td class="critical_text" style="background: #ffffff;">Red Current Scenario QS: Varies from MMC</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="layout_table">
<tr>
<table style="float: left;">
<strong>Column A:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</table>
<table>
<strong>Column B:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</table>
</tr>
</table>
<table class="layout_table">
<tr>
<td>
<strong>Column A:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</td>
<td>
<strong>Column B:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</td>
</tr>
</table>
http://jsfiddle.net/LCmrp/
<table>
<tr style="background:#CCCCCC">
<td>
<input id="Radio1" name="G1M" value="1" type="radio" /><br />
<input id="Radio2" name="G1M" value="2" type="radio" /><br />
<input id="Radio3" name="G1M" value="3" type="radio" /><br />
<input id="Radio4" name="G1M" value="4" type="radio" />
</td>
<td>
<input id="Radio5" name="G1L" value="1" type="radio" />Gentle or kindly<br />
<input id="Radio6" name="G1L" value="2" type="radio" />Persuasive, convincing<br />
<input id="Radio7" name="G1L" value="3" type="radio" />Humble, reserved, modest<br />
<input id="Radio8" name="G1L" value="4" type="radio" />Original, inventive, individualistic
</td>
</tr>
</table>
In the page, the two sets of radio buttons appear by each other, each 1 column tall and 4 rows deep. However, since the second set has text after it, the spread between the radio buttons are wider than the spread between the first set of buttons. I don't want to add text after the first set and I've tried just using a blank space. Is there a better way to format these two side-by-side radio button sets?
Maybe you should use more columns to your table, and more rows as well. And you should be using something else (like CSS instead), but don't get me started on that.
<table>
<tr>
<td><input id="Radio1" name="G1M" value="1" type="radio" /></td>
<td><input id="Radio5" name="G1L" value="1" type="radio" /></td>
<td>Gentle or kindly</td>
</tr>
<tr>
<td><input id="Radio2" name="G1M" value="2" type="radio" /></td>
<td><input id="Radio6" name="G1L" value="2" type="radio" /></td>
<td>Persuasive, convincing</td>
</tr>
<tr>
<td><input id="Radio3" name="G1M" value="3" type="radio" /></td>
<td><input id="Radio7" name="G1L" value="3" type="radio" /></td>
<td>Humble, reserved, modest</td>
</tr>
<tr>
<td><input id="Radio4" name="G1M" value="4" type="radio" /></td>
<td><input id="Radio8" name="G1L" value="4" type="radio" /></td>
<td>Original, inventive, individualistic</td>
</tr>
</table>
This <table> has one row for each option, and has one <td> for each radio button, and one <td> for the text.
You could also get off using CSS and <div>s instead.
<style>
input[type='radio'].spaceRight {
margin-right: 10px;
}
</style>
<!-- do this for each row -->
<div>
<input class="spaceRight" id="Radio1" name="G1M" value="1" type="radio" />
<input class="spaceRight" id="Radio2" name="G1M" value="2" type="radio" />
Gentle or kindly
</div>
Put them in separate <tr>s.
<table>
<tbody><tr style="background: none repeat scroll 0% 0% rgb(204, 204, 204);">
<td>
<input type="radio" id="Radio1" name="G1M" value="1"> <br>
<input type="radio" id="Radio2" name="G1M" value="2"> <br>
<input type="radio" id="Radio3" name="G1M" value="3"> <br>
<input type="radio" id="Radio4" name="G1M" value="4">
</td>
<td>
<input type="radio" value="1" name="G1L" id="Radio5">Gentle or kindly<br>
<input type="radio" value="2" name="G1L" id="Radio6">Persuasive, convincing<br>
<input type="radio" value="3" name="G1L" id="Radio7">Humble, reserved, modest<br>
<input type="radio" value="4" name="G1L" id="Radio8">Original, inventive, individualistic
</td>
</tr>
Set the width of the first <td>. If your 2nd <td> width is less than the actual text width after the radio button then putting them in separate <tr> is what you need to do.
But i like what #zneak says, you might just get someone started here on saying why you shouldn't use tables? :)
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 http://img535.imageshack.us/img535/8224/gooddq.png
And not like this:
alt text http://img30.imageshack.us/img30/2972/bady.png
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ó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ón</h1>
<p>Por favor, tome unos minutos para llenar esta evaluació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ón Linux</option>
<option value="AJAX">AJAX</option>
<option value="Cmasmas">C++</option>
<option value="Cisco">Cisco</option>
<option value="DisenioWeb">Diseñ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é Julio Garagorry">José Julio Garagorry</option>
<option value="Carlos Forero">Carlos Forero</option>
<option value="Daniel Garagorry">Daniel Garagorry</option>
</select>
</td>
</tr>
</table>
<div>
<h2>Valoración Global del Curso</h2>
<table>
<p></p>
¿El curso respondió a sus expectativas iniciales? <br />
Nada(1) / Totalmente(10)<br />
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ón del curso <br />
Muy Corta(1) / Excesiva(10) / Ideal (5)<br />
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>¿Qué opinión le mereció el contenido general del curso?</b><br />
Deficiente(1) / Excelente(10)<br />
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ón al Profesor</h2>
<p>Califique del 1 al 10 las siguientes aptitudes del profesor. <br /> <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ó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étodos de enseñ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ó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ó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ón profesional que le interesen.</p>
<p>
<table>
<tr><td><label><b>Desarrollo</b></label></td> <td></td> <td> </td>
<td><label><b>Bases de Datos</b></label></td> <td></td> <td> </td>
<td><label><b>Redes y Seguridad</b></label></td> <td></td> <td> </td>
<td><label><b>Ofimática</b></b></label></td> <td></td>
</tr>
<tr><td><label>AJAX</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="AJAX"></td> <td> </td>
<td><label>MySQL</label> </td><td> <input type="checkbox" name="cursosDeInteres[]" value="MySQL"></td> <td> </td>
<td><label>Cisco</label> </td> <td><input type="checkbox" name="cursosDeInteres[]" value="Cisco"></td> <td> </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> </td>
<td><label>Oracle</label></td> <td> <input type="checkbox" name="cursosDeInteres[]" value="Oracle"></td> <td> </td>
<td><label>Linux(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="LinuxRedes"></td> <td> </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> </td>
<td><label>PostgreSQL</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="PostgreSQL"></td> <td> </td>
<td><label>Linux(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="LinuxSeguridad"></td> <td> </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> </td>
<td><label>SQL Server</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SQL Server"></td> <td> </td>
<td><label>Solaris(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SolarisRedes"></td> <td> </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> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label>Solaris(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="SolarisSeguridad"></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>J2EE</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="J2EE"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label>Windows(Redes)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="WindowsRedes"></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>JavaScript</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="JavaScript"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label>Windows(Seguridad)</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="WindowsSeguridad"></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>.NET</label></td> <td><input type="checkbox" name="cursosDeInteres[]" value="dotNet"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>PHP</label></td> <td><input type="checkbox" name="programacionShell[]" value="PHP"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>Programación Shell</label></td> <td><input type="checkbox" name="programacionShell[]" value="dotNet"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>Ruby</label></td> <td><input type="checkbox" name="programacionShell[]" value="Ruby"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </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> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td>
</tr>
<tr><td><label>XML</label></td> <td><input type="checkbox" name="programacionShell[]" value="XML"></td> <td> </td>
<td><label></label></td> <td></td> <td> </td>
<td><label></label></td> <td></td> <td> </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á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>¿Le gustaría recibir información por e-mail cuando ofertemos los cursos de su interés?<br />
<table>
<td>Sí</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>¿Qué le gustó del curso? ¿Qué no le gustó?<br />
¿Cómo cree que podría mejorarse?
</p>
<textarea name="comentarios" rows="10" cols="60"></textarea>
<p></p>
<p></p>
<p>¿Nos permite publicar publicar sus comentarios de experiencia con nosotros en nuestra página web, web mail, brochure u otro medio?<br />
<table>
<td>Sí</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ón"/>
</p>
</table>
</form>
</body>
</html>
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