Diseñado sin tablas

Mucha gente suele usar tablas para diseñar webs... eso lo hacen por ser, en principio, más fácil de desarollar y porque así lo hacen los editores web. Yo no he querido usar tablas y el diseño de toda la web esta hecho sin ellos. Si bien es cierto, que el diseño principal no es mio si que lo es el de la sección de programas, en el se puede ver como los elementos quedan perfectamente alineados y no usa tablas.

Yo siempre trabajo con un archivo .css externo, por su utilidad que tiene poder hacer cambios en un único archivo y modificar toda la web de golpe.

Código

El código que he añadido es:

div.tabla
{
	clear: none;
	overflow: auto;
}

div.fila
{
	clear: both;
}

div.col_titulo
{
	float: left;
	padding: 5px;
	background: #F0E0A0;
	border-color: #F0E0A0;
	border-style: solid;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 1px;
}

div.col
{
	float: left;
	padding: 5px;
	border-color: #F0E0A0;
	border-style: solid;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 1px;
}

Como vemos son cuatro elementos div.

El primero de ellos define el compartamiento de todo lo que sería la tabla, clear: none; me sirve para posicionar correctamente la tabla dentro de todo "el lio" de capas que tengo. overflow: auto; es para el control de flujo y que no de problemas por no entrar.

Después tengo el código que inserto para crear la sensación de filas, clear: both; me rompe la continuidad que deberían tener las capas.
Después hay dos bloques practicamente iguales, son los que hacen las columnas, el primero de ello sería para la fila de título y el otro para el resto de las filas. float: left; va indicando que las capas tienen continuidad horizontal a la izquierda. El resto son cosas estéticas.... que aunque no se nada de estetica no queda mal.

La aplicación

Saltandome los detalles de programación de PHP...

<div class="tabla">

<div class="fila">
<div class="col_titulo" style="width:200px">Programa</div>
<div class="col_titulo" style="width:200px">Comentario</div>
<div class="col_titulo" style="width:100px">Licencia</div>
<div class="col_titulo" style="width:50px">Visitas</div>
</div>

<div class="fila">
<div class="col" style="width:200px">1 BY 1 1.43</div>
<div class="col" style="width:200px">Reproductor MP3</div>
<div class="col" style="width:100px">freeware</div>
<div class="col" style="width:50px">325</div>
</div>

</div>

Primero indico la abertura de la tabla con <div class="tabla"> que después no tendré que olvidarme cerrar... después con <div class="fila"> indico el inicio de una fila, la primera de ella tendra que ser la de presentación por eso su clase (class en inglés) es col_titulo. Y aquí viene lo interesante... como cada columna puede tener un ancho variable podría definir un tipo de clase para cada ancho, pero no me pareció práctico, por lo que decide poner a mano la anchura correspondiente style="width:200px", es obvio que mantendre una correspondencia entre lo que ponga en cada fila.

Y creo que eso es todo... realmente algo sencillo y fácil. Por cierto, es tan sencillo que se ve bien hasta en un mal navegador como es Internet Explorer.



Navegación: Manuales » Diseñado sin tablas