Crear tabla con capas y css

Estreno blog con un post que en mi opinión es bastante interesante. Varias personas se han quedado desactualizadas en lo que a front-end se refiere, algunas porque terminaron su andadura con html4 y se pasaron a programar en lenguajes que no eran para webs y otros debido a que la situación les ha visto obligados a dedicarse a otro trabajo diferente. También estoy cansado de ver personas que les enseñan nociones tan básicas de código que cuando quieren enfrentarse a algo “más complejo” no saben por dónde guiarse. Para todos ellos les dedico el siguiente post.

Hay varias opiniones sobre si usar tablas perjudica o no al posicionamiento seo, algo que toda web quiere obtener. Ya que sin posicionamiento seo, no existes. La cuestión está, en que cada vez en el trabajo y webs se ven menos estructuras de tablas con html.

Mostraré como pasar el fragmento de código anterior en html, a una estructura con html5 y css3 basada en capas. Empezaremos con la definición en html de la estructura a utilizar:

Si comparamos las estructuras veremos que son muy parecidas. Los nombres de los ids y clases se los he dado de forma muy descriptiva para que se entienda el cambio correctamente. A continuación veremos el fragmento de código css para convertir las capas en un aspecto similar a la tabla de html:

Cómo podéis comprobar, el propio código css tiene atributos de tablas en su elemento “display” para convertir fácilmente una serie de capas en una tabla html y css.

Espero que os haya servido de ayuda este minitutorial.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *