span significado etiquetas etiqueta estilos ejemplos div html css xhtml html-table

html - significado - ¿Por qué es mejor usar etiquetas DIV o spans que usar un diseño de tabla?



etiquetas html (7)

Es justo la semántica de HTML correcta para usar DIV y SPAN para diseñar una página y usar TAB para representar datos tabulares, como en hojas de datos, listas de usuarios, etc.

Posible duplicado:
¿Por qué no usar tablas para maquetar en HTML?

¿Por qué el uso de marcas con divs que definen todo (contenedor, encabezado, contenido, etc.) ES MEJOR que usar tablas? Entiendo que cuando construyes tu página con tablas, luce muy fea, incluso UGLIER cuando estás anidada, debido al mayor volumen de mierda: un tiempo de carga de la página ligeramente mayor y un código menos legible.

PERO. Usar tablas es muy fácil y ahorra tanto tiempo al tratar de lograr lo que parece ser algo fácil, pero con la advertencia de hacerlo funcionar en todos los navegadores .

Lo que estoy preguntando es si un diseño algo complejo (o cualquier diseño que normalmente no sería fácil de lograr solo con divs y css) se resolvería mejor con una combinación de tablas y css con algunos divs que ajusten los elementos necesarios ( para lidiar con la anidación) para que pueda desarrollar rápidamente su aplicación y NO se preocupe de que se vea como una mierda en navegadores no compatibles?

*! EDITAR! * También estoy completamente de acuerdo en que sí, las tablas son para datos tabulares, y solo en semántica siento que debería usar etiquetas de no hacer nada, luego nombrarlas y diseñarlas, pero para MÍ, juro tantas veces que simplemente construyo algo rápidamente rápido, utilizando las tablas BEATS que intentan personalizarlo perfectamente para funcionar en TODOS los navegadores.


Hay algunas ventajas que no puedes lograr usando tablas. Piense en las miniaturas: puede mostrar tantas como sea posible en una fila, si no hay más espacio, los demás pasarán a la siguiente línea (sobre la marcha).

Ver también:

http://www.csszengarden.com/ -> y elija un diseño diferente en la barra lateral "elegir un diseño"

O un mejor enfoque para los menús / barras de navegación: http://css.maxdesign.com.au/listamatic/


La gente odia las tablas porque disminuye el SEO (optimización de motores de búsqueda).

Sobre todo, es una cuestión de semántica. Una tabla está diseñada para mostrar datos tabulares, datos que se deben presentar en un formato tabular. Usarlo para cualquier otra cosa es como usar Excel para dar formato a su Folleto: puede que en algún momento funcione, pero en realidad use Word. Los elementos HTML5 más nuevos, así como algunos de los elementos HTML4 más antiguos, se adaptan semánticamente mejor a la ocasión: una división de contenido requiere un div, una sección para una sección, un artículo para un artículo, navegación para navegación. Otros elementos junto a las tablas también permiten una mayor flexibilidad y pueden ser incluso más fáciles que las tablas cuando se usan correctamente. En última instancia, todo se reduce a la practicabilidad. Si es algo parecido a un dato tabular en la naturaleza, usa una tabla. Pero si se trata de columnas o navegación, use li o divs flotantes o secciones.

EDIT: Compare el HTML requerido para dos situaciones idénticas, btw: http://jsfiddle.net/gbXFG/3/ vs. http://jsfiddle.net/uJ2LG/


La mejor respuesta que puedo dar es que un navegador no sabe qué tan amplia debe ser una columna de tabla hasta que procesa completamente la página, lo que puede resultar en un marcado retraso en la carga visible de la página. Al usar un div, el contenido se mostrará de inmediato y si otro elemento lo obliga a cambiar el tamaño, lo hará, pero no hay ningún retraso en las cosas que se muestran. Así que es una mejor experiencia de usuario.


Una buena razón es la separación de preocupaciones. HTML es para expresar información. CSS es para tratar con la presentación y JavaScript es para el comportamiento. Al separar estas preocupaciones, el contenido puede interpretarse mejor como dice el marcado, es decir, que una tabla está expresando datos tabulares, donde los divs y spans expresan un bloque de contenido y una extensión de texto.

Si quieres más buenas razones:

  • Los usuarios discapacitados que usan software como un lector de pantalla pueden entender mejor su contenido. De lo contrario, toda su página podría interpretarse como datos tabulares. Lo harás más accesible usando divs y spans.
  • Los navegadores pueden ser capaces de renderizar tu página más rápido.
  • Hacer ajustes puede ser mucho más fácil.
  • Es más fácil ser consistente en todo su sitio web.

Usa tablas cuando surja la necesidad de ellas. Cuando los datos deben estar ordenados, limpios y en un orden específico que se repita. No debes evitar las tablas por el simple hecho de hacerlo.


Creo que es sobre todo sobre la semántica. Una <table> está diseñada para representar datos tabulares, y su uso para diseñar elementos viola eso. Además, todo lo que se puede hacer con <table> se puede hacer con la misma facilidad o facilidad con CSS 99.9% del tiempo. No es mucho más fácil en los otros casos, y como usted dice, hace que el marcado sea feo y difícil de seguir. También viola la separación de contenido, comportamiento y presentación fundamentales para el desarrollo web.