Ver Mensaje Individual
  #11 (permalink)  
Antiguo 08/01/2008, 07:00
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 16 años, 8 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&oacute;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&eacute;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&oacute;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">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</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>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</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}