08/01/2008, 07:00
|
| | Fecha de Ingreso: agosto-2007 Ubicación: Chile
Mensajes: 23
Antigüedad: 17 años, 4 meses Puntos: 0 | |
Re: div v/s tabla De acuerdo:
html:
Código:
<div id="right">
<div class="caja-titulos-cotizar">
<h2 class="text-h2">COTIZACION</h2>
</div>
<div class="columna-riht-contenido">
<form>
<fieldset>
<label for="nombre">Nombres:
<input name="nombre" type="text" class="form-1" id="nombre" title="Escriba su nombre" />
</label>
<label for="apellido">Apellidos:
<input type="text" class="form-1" id="apellido" title="Escriba su apellido" />
</label>
<label for="modelo">Región:</label>
<select name="region" class="form-2" id="region" title="Selecione una región">
<option>asdasdasd</option>
</select>
<label for="comuna">Comuna: </label>
<select name="region" class="form-2" id="comuna"title="Selecione una comuna">
</select>
<label for="telefono">Teléfono:
<input name="telefono" type="text" class="form-1" id="telefono" title="Escriba su número teléfonico"/>
</label>
<label for="email">E-mail:
<input name="email" type="text" class="form-1" id="email" title="Escriba su correo electrónico"/>
</label>
<label for="modelo">Modelo a cotizar:</label>
<select name="modelo" class="form-2" id="modelo" title="Secciones el modelo a cotizar">
</select>
<label for="comentario">Comentario:
<textarea name="comentario" rows="9" class="form-3" id="comentario" title="Escriba su mensaje"></textarea>
</label>
</fieldset>
<div class="text-link-az">
<input name="Submit22" type="submit" class="boton-enviar" value="Enviar" title="Presione el boton, para enviar su cotización"/>
</div>
</form>
</div>
</div>
<div id="contenido-izq">
<div id="contenido-izq-columnas">
<table border="0" cellpadding="0" cellspacing="0" id="tabla-resumen" summary=" Listado de especificaciones técnicas">
<tr>
<th class="fondo"></th>
<th class="fondo">Version 01</th>
<th class="fondo">Version 2 </th>
<th class="fondo">Version 3</th>
<th class="fondo">Version 4</th>
<th class="fondo">Version 5</th>
<th class="fondo">Version 6</th>
<th class="fondo">Version 7</th>
</tr>
<tr>
<th>Motor</th>
<td>DOHC</td>
<td>DOHC</td>
<td>DOHC</td>
<td>DOHC</td>
<td>DOHC</td>
<td>DOHC</td>
<td>DOHC</td>
</tr>
<tr>
<th>Potencia</th>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
<td>112 HP/6.000Rpm </td>
</tr>
<tr>
<th >Torque</th>
<td>Dato </td>
<td>Dato </td>
<td>Dato </td>
<td>Dato </td>
<td>Dato </td>
<td>Dato </td>
<td>Dato </td>
</tr>
<tr>
<th class="fondo">Transmisión</th>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
<td class="fondo">Dato </td>
</tr>
<tr>
<th class="sub-categoria">Sub-categoria</th>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
<td class="sub-categoria"> </td>
</tr>
<tr >
<th>Otro dato </th>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
<td>$12.000.000 </td>
</tr>
<tr>
<th>Otro dato</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p class="text-link-az"><a href="#subir">Subir</a></p>
<div class="borrar"></div>
</div>
</div>
CSS:
Código:
#right{
float:right;
width:210px;
padding-bottom: 10px;
}
.columna-riht-contenido{
width: 198px;
margin-left: 6px;
float: none;
}
#contenido-izq{
padding-right:211px;
}
#contenido-izq-columnas{
background-color: #FFFFFF;
padding-bottom: 1px;
padding-right: 12px;
padding-top: 1px;
}
/*Tablas*/
#tabla-resumen{
width: 98%;
margin:15px auto 10px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-left-color: #cccccc;
}
#tabla-resumen th{
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
padding:5px 7px 5px 7px;
color: #565656;
}
#tabla-resumen td{
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
padding: 5px 7px 5px 7px;
color: #565656;
}
#tabla-resumen .fondo{
background-color: #cccccc;
font-weight: bold;
white-space: nowrap;
}
#tabla-resumen .sub-categoria{
background-color: #eaeaea}
|