Este es mi codigo:
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.tabla {width:550px;border:0;font:12px Arial;}
table.tabla td {height:35px;border-bottom:1px solid #000000;}
table.tabla td.tit {width:250px;background:#DD0000;}
table.tabla td.des {width:200px;background:#00CCCC;text-align:center;}
table.tabla td.link {width:100px;background:#E5E5E5;text-align:right;}
div.tabla {width:550px;border:0;font:12px Arial;position:relative;}
div.tabla span.tit {width:250px;font-weight:bold;position:absolute;top:0;left:0;background:#DD0000;}
div.tabla span.speech {width:250px;position:absolute;top:15px;left:0;background:#DD0000;}
div.tabla span.des {width:200px;position:absolute;top:0;left:250px;text-align:center;background:#00CCCC;}
div.tabla span.link {width:100px;position:absolute;top:0;left:450px;text-align:right;background:#E5E5E5;}
div.tabla span.link2 {width:100px;position:absolute;top:15px;left:450px;text-align:right;background:#E5E5E5;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="tabla">
<tr>
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba</td>
<td class="link">Prueba</a></td>
</tr>
<tr>
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba 1<br>Prueba 2</td>
<td class="link">Prueba 1<br>Prueba 2</a></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<div class="tabla">
<span class="tit">TITULO DE PRUEBA</span>
<span class="speech">Descripción de prueba</span>
<span class="des">Prueba 1</span>
<span class="link">Prueba 2</span>
<span class="link2">Prueba 3</span>
</div>
</body>
</html> Tengo una tabla, la cual la quiero pasar a div, ul, span o lo que haga falta, solamente quiero que esté realizado sin tablas.
Entonces tratando de imitar al funcionamiento de la tabla, hice mi prueba con el llamado div.tabla.... pero hay cosas que no sabría realizar, por ejemplo:
1) está bien usar solo span y no ul ?
2) En el span.des al tener un solo renglon, quiero que aparezca a media altura, como el ejemplo de la tabla.
3) lo mismo con el span.link, y que si llega a tener el span.link2, se acomode solo como el otro ejemplo de la tabla.
4) en la tabla tengo solo la td.tit y a lo que quiero remarcarse debo agregarle la etiqueta <b>, entonces al pasarlo a CSS quiero hacerlo desde el archivo .css y por eso lo puse en otro span, está bien ?
me entiendo ?
bueno, perdón por lo extenso y desde ya agradezco sus ayudas.
PD: puse varios colores para distinguirlos