Tablas en lugar de DIV [duplicado]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Posible duplicado:
¿Por qué no utilizar tablas para el diseño en HTML?
¿En qué condiciones debería elegir tablas en lugar de DIV en la codificación HTML?
Solución
Todo el asunto de "Tablas vs Divs" apenas falla.No es "tabla" o "div".Se trata de utilizar HTML semántico.
Incluso la etiqueta div juega sólo un pequeño papel en una página bien diseñada.No lo uses en exceso.No deberías necesitar tantos si creas tu html correctamente.Cosas como listas, conjuntos de campos, leyendas, etiquetas, párrafos, etc. pueden reemplazar gran parte de lo que a menudo se usa para lograr un div o span.Div debe usarse principalmente cuando tiene sentido indicar una lógica division, y solo se apropia para un diseño adicional cuando sea absolutamente necesario.Lo mismo ocurre con la mesa;Úselo cuando tenga datos tabulares, pero no de otra manera.
Entonces tienes una página más semántica y no necesitas tantas clases definidas en tu CSS;en su lugar, puede orientar sus anuncios directamente a las etiquetas.Posiblemente lo más importante es que tiene una página que obtendrá una puntuación mucho mejor en Google (anecdóticamente) que la tabla equivalente o la página con muchos divs.Sobre todo, te ayudará a conectarte mejor con una parte de tu audiencia.
Entonces, si volvemos atrás y lo vemos en términos de tabla versus div, en mi opinión hemos llegado al punto en el que div se usa en exceso y la tabla se usa poco.¿Por qué?Porque cuando realmente lo piensas, hay muchas cosas que entran en la categoría de "datos tabulares" que tienden a pasarse por alto.Respuestas y comentarios en esta misma página web, por ejemplo.Consisten en varios registros, cada uno con el mismo conjunto de campos.Incluso están almacenados en una tabla de servidor SQL, por Dios.Ésta es la definición exacta de datos tabulares.Esto significa que una etiqueta de tabla html sería absolutamente una buena opción semántica para diseñar algo como las publicaciones aquí en Stack Overflow.El mismo principio se aplica también a muchas otras cosas.Puede que no sea una buena idea usar una etiqueta de tabla para configurar un diseño de tres columnas, pero ciertamente está bien usarla para cuadrículas y listas...excepto, por supuesto, cuando realmente puedes usar las etiquetas ol o ul (lista).
Otros consejos
Cuando los datos que presento son, efectivamente, tabulares.
Me parece ridículo que algunos diseñadores web utilicen divs en datos tabulares en algunos sitios.
Otro uso que le daría serían los formularios, en particular la etiqueta:pares de cuadros de texto.Técnicamente, esto podría hacerse en cuadros div, pero es mucho, mucho más fácil hacerlo en tablas, y se puede argumentar que los pares etiqueta:cuadro de texto son, de hecho, de naturaleza tabular.
Solía hacer CSS puro, pero abandoné esa búsqueda en favor del enfoque híbrido de tabla/css como el enfoque más pragmático.Irónicamente, también se debe a la accesibilidad.¿Alguna vez intentaste hacer CSS en Sidekick?¡Qué pesadilla!¿Alguna vez has visto cómo se muestran los sitios web basados en CSS en los nuevos navegadores?Los elementos se superponían o simplemente no se mostraban correctamente y tuve que desactivar el CSS.¿Alguna vez has intentado cambiar el tamaño de sitios web basados en CSS?¡Se ven horribles y, a menudo, perjudiciales para los ciegos si usan funciones de zoom en el navegador!Si haces eso con tablas, se escalan mucho mejor.Cuando la gente habla de accesibilidad, encuentro que muchos no tienen ni idea y me molesta porque yo soy discapacitado y ellos no.¿Realmente han trabajado con ciegos?¿El sordo?Si la accesibilidad es una preocupación principal, ¿por qué diablos el 99% de los vídeos no tienen subtítulos?Muchos puristas de CSS usan AJAX pero no se dan cuenta de que AJAX a menudo hace que el contenido sea inaccesible.
Pragmáticamente, está bien usar una sola tabla como diseño principal siempre que proporcione la información en un flujo lógico si las celdas están apiladas (algo que vería en los móviles).La teoría CSS suena genial pero parcialmente viable en la vida real con demasiados trucos, algo que va en contra de los ideales de "pureza".
Desde que utilicé el enfoque CSS con tablas, he ahorrado mucho tiempo diseñando un sitio web y el mantenimiento es mucho más fácil.Menos hacks, más intuitivo.Recibo menos llamadas de personas que dicen: "¡Inserté un DIV y ahora se ve todo!" Y lo que es más importante, absolutamente NO hay problemas de accesibilidad.
Por lo general, siempre que no esté utilizando la tabla para proporcionar un diseño.
Tablas -> datos
divs -> diseño
(principalmente)
Nota:En el momento en que se formuló la pregunta, había razones prácticas para utilizar tablas para algunos fines de diseño.Esto ya no es necesario debido a las mejoras del navegador, así que actualicé la respuesta.
HTML <table>-Los elementos deben usarse cuando los datos tienen lógicamente una estructura bidimensional.Si los datos se pueden estructurar en filas y columnas y puede aplicar encabezados de manera significativa tanto a las filas como a las columnas, entonces probablemente tenga datos tabulares.
Si solo tiene una sola fila o columna de datos, entonces no son datos tabulares, es solo contenido lineal.Necesita al menos dos filas y dos columnas antes de que puedan considerarse datos tabulares.
Algunos ejemplos:
Usar tablas para colocar barras laterales y encabezados/pies de página.No se trata de datos tabulares sino de un diseño de página.Algo como css grid o flexbox es más apropiado.
Usar tablas para columnas estilo periódico.Estos no son datos tabulares; aún así los leerías linealmente.Algo así como columnas CSS es más apropiado.
Haría una distinción entre HTML para sitios web públicos (tablas no-no-no, divs sí-sí-sí) y HTML para aplicaciones web semipúblicas o privadas, donde tiendo a preferir las tablas incluso para el diseño de páginas.
La mayoría de las razones respetables por las que "las tablas son malas" suelen ser un problema sólo para los sitios web públicos, pero no tanto con las aplicaciones web.Si puedo obtener el mismo diseño y tener una apariencia más consistente en todos los navegadores usando una TABLA que un CSS+DIV complicado, entonces normalmente sigo adelante y apruebo la TABLA.
Como ya han mencionado muchos carteles, debe utilizar tablas para mostrar datos tabulares.
Se introdujeron tablas en HTML 3.2 aquí está el párrafo relevante de la especificación sobre su uso:
[tablas] se pueden utilizar para marcar material tabular o para fines de diseño...
De acuerdo con Thomas: la regla general es que si tiene sentido en una hoja de cálculo, puedes usar una mesa.De otra forma no.
Simplemente no uses tablas como diseño de la página, ese es el principal problema que la gente tiene con ellas.
Puedo ver el argumento a favor de tablas para formularios, pero hay una alternativa mejor...sólo tienes que arremangarte y aprender CSS.
Por ejemplo:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
Puede tomar ese html y diseñar el formulario con etiquetas una al lado de la otra o etiquetas encima de los cuadros de texto (lo cual es más fácil).Tener flexibilidad realmente ayuda.También es menos HTML que el equivalente en tabla de cualquiera de los dos.
Para ver algunos ejemplos excelentes de formularios CSS, consulte estos excelentes ejemplos:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Por lo general, opto por tablas para mostrar información de tipo formulario (nombre, apellido, dirección, etc.) donde es importante alinear etiquetas y campos en varias filas.DIV que uso para el diseño.
Por supuesto, la tabla está envuelta en un DIV :)
Las tablas fueron diseñadas para contenido tabular, no para diseño.
Por lo tanto, nunca te sientas mal si los usas para mostrar datos.
Utilizo tablas en dos casos:
1) datos tabulares
2) Cada vez que quiero que mi diseño se ajuste dinámicamente a su contenido
Si sus datos se pueden presentar en una cuadrícula bidimensional, utilice <table>.Si no puede, no lo hagas.Usando <table> para cualquier otra cosa es un truco (aunque frecuentemente no tiene alternativas adecuadas, especialmente cuando se trata de compatibilidad con navegadores más antiguos). No usando <table> para algo que claramente debería serlo es igualmente malo. <div> y <span> no son para todo;de hecho, al no tener ningún significado a nivel semántico, deben evitarse a toda costa en favor de alternativas más semánticas.
Sobre este tema pensé este El sitio fue bastante divertido.
1) Para mostrar datos tabulares.Un calendario es un ejemplo de datos tabulares que no siempre son obvios al principio.
2) Trabajo para una empresa de facturación médica y casi todo el diseño de nuestro trabajo interno se realiza mediante CSS.Sin embargo, de vez en cuando recibimos formularios en papel de las compañías de seguros que nuestros facturadores tienen que utilizar, y un programa los convertirá a un formato HTML que pueden completar e imprimir a través de la intranet.Para asegurarse de que los formularios sean aceptados, deben coincidir muy estrechamente con la versión original en papel.Para estos, es sencillo recurrir a las tablas.
Las tablas se utilizan para datos tabulares.Si tiene sentido ponerlo en una hoja de cálculo, utilice una tabla.De lo contrario, existe una etiqueta mejor que puede utilizar, como div, span, ul, etc.
Creo solo en contenido tabular.Por ejemplo, si imprimió una tabla de base de datos o datos similares a una hoja de cálculo en HTML.
Si desea tener HTML semánticamente correcto, debe utilizar tablas sólo para datos tabulares.
De lo contrario, puedes usar tablas para todo lo que quieras, pero probablemente haya una manera de hacer lo mismo usando divsy CSS.
@Mario:
¿El diseño es de datos tabulares?No, aunque era estándar hace unos años, ahora no lo es :-)
Otro uso que le daría serían los formularios, en particular la etiqueta:pares de cuadros de texto.Técnicamente, esto podría hacerse en cuadros div, pero es mucho, mucho más fácil hacerlo en tablas, y se puede argumentar que los pares etiqueta:cuadro de texto son, de hecho, de naturaleza tabular.
Tiendo a darle a la etiqueta un ancho fijo o mostrarla en la línea de arriba.
@Jon Limjap
Para etiqueta:cuadro de texto, ni divs ni tablas son apropiados: <dl>somos
Otro uso que le daría serían las formas, en particular la etiqueta :pares de cuadros de texto.Esto podría técnicamente se puede hacer en div boxes, pero es mucho, mucho más fácil de hacer esto en tablas, y Se puede argumentar que los pares etiqueta:cuadro de texto son, de hecho, de naturaleza tabular.
Lo veo bastante, especialmente entre los desarrolladores de MS.Y lo he hecho bastante en el pasado.Funciona, pero ignora algunos factores de accesibilidad y mejores prácticas.Debe utilizar etiquetas, entradas, conjuntos de campos, leyendas y CSS para diseñar sus formularios.¿Por qué?Porque para eso están, es más eficiente y creo que la accesibilidad es importante.Pero esa es sólo mi preferencia personal.Creo que todo el mundo debería intentarlo de esa manera antes de condenarlo.Es rápido, fácil y limpio.
Cada vez que un navegador carga una página que contiene tablas, el navegador tarda más en representar correctamente la etiqueta.Mientras que si se usa el div, el navegador tarda menos ya que es más liviano.Y además podemos aplicar CSS para que los divs aparezcan como una tabla,
Las mesas normalmente son pesadas y las div son livianas.
Está claro que los DIV se usan para el diseño, pero me pasó que me "obligaron" a usar hojas de cálculo para hacer un diseño de cuadrícula dentro de una estructura div por estas razones:
la adición de valores porcentuales no permitió una alineación adecuada con el div, mientras que los mismos valores expresados en celdas de tablas dieron el resultado esperado.
Así que creo que las tablas siguen siendo útiles no sólo para los datos, sino también para la situación anterior; además, las tablas siguen siendo navegadores compatibles con W3C y los navegadores alternativos (para personas discapacitadas, por ejemplo) interpretan las suyas correctamente.
los divs son simples divisions, no están destinados a usarse para agrupar secciones de la página que están vinculadas en un sentido semántico.No tienen ningún significado implícito más que ese.
Originalmente, las tablas estaban destinadas a mostrar datos científicos, como resultados de laboratorio, en la pantalla.Dave Raggett ciertamente no pretendía que se utilizaran para implementar el diseño.
Creo que lo mantiene bastante claro en su mente si recuerda lo anterior, si es algo que normalmente esperaría leer en una tabla, entonces esa es la etiqueta apropiada, si es un diseño puro, entonces use algo más para satisfacer sus necesidades.
