Desarrollo de Software

8 razones para no maquetar con tablas

Cuando nos disponemos a desarrollar una página web una de las primeras tareas que realizamos es definir la estructura de la página. Básicamente hay 2 formas de hacerla: usando tablas o CSS. Hace poco tiempo, la forma más utilizada era haciéndolo con tablas, aunque por suerte esta tendencia se va eliminando. Pero por si acaso hay algún despistado, hoy vamos a ver varias razones por las que deberíamos optar por la segunda forma y maquetar con CSS.

css vs tablas

1. No es su cometido.

Las tablas fueron creadas para tabular datos. Ni más ni menos. Al igual que en las hojas de cálculo, las tablas sirven para presentar los datos de una forma ordenada. Pero se usaron para maquetar webs debida a la facilidad de poder controlar la disposición de todos sus elementos donde querí­amos. No obstante, al no ser éste su cometido, hay una serie de desventajas que seguiremos viendo en este artículo.

2. Separar el contenido de la presentación.

Al utilizar tablas para el diseño estamos metiendo en un mismo archivo la presentación y el contenido. Si utilizamos hojas de estilo externas podremos realizar la separación de las dos partes. Y esto no es trivial, porque esta separación nos proporciona muchas ventajas.

3. Rapidez de descarga.

Si no se utilizan tablas y se realiza correctamente la maquetación, nos ahorramos un montón de tags innecesarios. Este código que se elimina, hace que los ficheros html que se descargan en el navegador del usuario pesen mucho menos y por tanto puedan verse mucho más rápido. Además, los ficheros CSS externos se quedan guardados en la caché del navegador.

4. Mayor accesibilidad.

Como tenemos separado el contenido de la presentación, nuestra página será más semántica, por lo que será rastreada mucho mejor por los robots de los buscadores. Además, podemos tener varios ficheros CSS dependiendo del dispositivo que lea la página, por lo que puede ser mostrada de una u otra forma sin modificar la estructura de la página. Esto es muy útil para personas discapacitadas que utilicen lectores de pantalla.

5. Diseño más rápido.

Al realizar el diseño de una página es posible que maquetando con tablas se tarde menos que con CSS, pero si estás diseñando varias páginas que van a tener una misma estructura, el trabajo que tardes en diseñar con CSS en la primera podrás aprovecharlo en las siguientes porque no tendrás que modificar nada más. Sin embargo, al hacerlo con tablas, vas a tener que ir replicando la estructura en cada una de las páginas. ¡Y no se te ocurra modificar el diseño una vez hecho!

6. Mejor mantenimiento.

El tener separados el contenido de la presentación nos permite poder cambiar el diseño de la misma sin tocar la estructura de la página. Y si queremos modificar el contenido, podemos localizar los cambios a realizar mucho antes al no tener que buscar entre tantas etiquetas superfluas. Además, tanto presentación como contenido podrían modificarse por personas distintas. Y como vimos en el punto anterior, realizando un solo cambio en el CSS, modificarás todas las páginas que lo utilicen por lo que los cambios en el diseño serán muy rápidos.

7. Mejor posicionamiento.

Si en la página html sólo tenemos el contenido de la página, con las etiquetas html necesarias, nos permitirá posicionarnos mejor en los buscadores. Ya sabes que el contenido es el rey. Los robots de los buscadores podrán encontrar mejor el contenido importante de tu web, al ser ésta más semántica.

8. Más diversión.

Además de todas las ventajas que hemos visto, maquetar con tablas… ¡es aburrido! Ahora con CSS3 podemos hacer casi cualquier cosa que imaginemos.

6 comentarios en “8 razones para no maquetar con tablas

  1. Una consulta y si tengo que maquetar un reporte donde tengo muchas filas y celdas de diferentes datos, cómo maqueto eso con HTML5? con divs o en este caso si seria valido maquetar con tablas? Podria usar en este caso las etiquetas o no es valido maquetar en HTML5 con tablas, podrian despejar mis dudas por favor, gracias!

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>