html - attribute - Tablas en lugar de DIV
title html css (24)
Otro uso que tendría para él serían las formas, en particular las etiquetas: 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 de etiquetas textbox son de hecho tabulares.
Veo una buena cantidad, 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 usar etiquetas, entradas, conjuntos de campos, leyendas y CSS para diseñar sus formularios. ¿Por qué? Porque eso es para lo que son, es más eficiente, y creo que la accesibilidad es importante. Pero esa es solo mi preferencia personal. Creo que todos deberían intentarlo de esa manera antes de condenarlo. Es rápido, fácil y limpio.
Posible duplicado:
¿Por qué no usar tablas para el diseño en HTML?
¿En qué condiciones debe elegir tablas en lugar de DIV en codificación HTML?
1) Para mostrar datos tabulares. Un calendario es un ejemplo de datos tabulares que no siempre es obvio 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 obtenemos formularios en papel de las compañías de seguros que nuestros emisores de facturas tienen que usar, y un programa los convertirá a un formato html que pueden completar e imprimir a través de la intranet. Para asegurarse de que se acepten los formularios, deben coincidir muy de cerca con la versión en papel original. Para estos, es simple volver a las tablas.
@Jon Limjap
Para label: textbox, ni divs ni tablas son apropiados: <dl> s son
@Marius:
Es el diseño de datos tabulares? No, aunque era estándar hace unos años, no es ahora :-)
Otro uso que tendría para él serían las formas, en particular las etiquetas: 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 de etiquetas textbox son de hecho tabulares.
Tiendo a darle a la etiqueta un ancho fijo, o lo visualizo en la línea superior.
Como muchos pósters ya han mencionado, debe usar tablas para mostrar para datos tabulares.
Las tablas se introdujeron en HTML 3.2 aquí está el párrafo relevante de la especificación sobre su uso:
[tablas] se pueden usar para marcar material tabular o para propósitos de diseño ...
Creo solo contenido tabular. Por ejemplo, si imprimió una tabla de base de datos o datos similares a una hoja de cálculo en HTML.
Cuando los datos que presento son, de hecho, tabulares.
Me parece ridículo que algunos diseñadores web usen divs en datos tabulares en algunos sitios.
Otro uso que tendría para él serían las formas, en particular las etiquetas: 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 de etiquetas textbox son de hecho tabulares.
Cuando un navegador carga una página que contiene tablas, lleva más tiempo que el navegador muestre correctamente la etiqueta. Donde como si se utilizara el div, el navegador tarda menos tiempo ya que es más claro. Y más, podemos aplicar el CSS para hacer que los divs aparezcan como tabla,
Las mesas son normalmente pesadas wieght y div son livianas.
De acuerdo con Thomas: la regla general es que si tiene sentido en una hoja de cálculo, puede usar una tabla. De otra forma no.
Simplemente no use tablas como su diseño para la página, ese es el principal problema que la gente tiene con ellos.
Está claro que los DIV se utilizan para el diseño, pero me pasó a ser "forzado" 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 las celdas de las tablas dieron el resultado esperado.
Por lo tanto, creo que las tablas siguen siendo útiles no solo para los datos, sino también para la situación anterior; además, las tablas siguen siendo el navegador compatible con W3C y los navegadores alternativos (para los discapacitados, por ejemplo) interpretan los suyos correctamente.
Haría una distinción entre HTML para sitios web públicos (tablas no-no-no, divs yes-yes-yes) y HTML para aplicaciones web semipúblicas o privadas, donde tiendo a preferir tablas incluso para el diseño de página.
La mayoría de las razones respetables por las que "Las tablas son malas" suelen ser un problema solo para los sitios web públicos, pero no tanto como un problema con las aplicaciones web. Si puedo obtener el mismo diseño y tener una apariencia más uniforme en todos los navegadores usando una TABLA que una CSS + DIV complicada, entonces usualmente sigo adelante y aprobo la TABLA.
Las divisiones son divisions simples, están destinadas a ser usadas para agrupar secciones de la página que están vinculadas en un sentido semántico. No tienen otro significado implícito que eso.
Las tablas originalmente estaban destinadas a mostrar datos científicos, como resultados de laboratorio en pantalla. Dave Raggett ciertamente no tenía la intención de que se acostumbraran a implementar el diseño.
Creo que lo mantiene bastante claro en mente si recuerda lo anterior, si es algo que normalmente esperaría leer en una tabla, entonces esa es la etiqueta adecuada, si es pura, entonces use algo más para satisfacer sus necesidades.
Las tablas se diseñaron para el contenido tabular, no para el diseño.
Entonces, nunca te sientas mal si los usas para mostrar datos.
Las tablas se usan para datos tabulares. Si tiene sentido ponerlo en una hoja de cálculo, utiliza una tabla. De lo contrario, hay una etiqueta mejor para que uses, como div, span, ul, etc.
Lo ideal es que las tablas HTML solo se utilicen para datos tabulares. Sin embargo, las tablas también son la forma más sencilla de crear algunos tipos específicos de diseños basados en cuadrículas, que son difíciles de emular en CSS compatibles con Cross Bowser. Este artículo describe el problema en más detalles.
La especificación de CSS admite diseños basados en cuadrículas equivalentes al marcado de tablas utilizando la propiedad display: table | table-cell. Sin embargo, esta parte de la especificación no es compatible con Internet Explorer (aunque todos los otros navegadores modernos lo admiten).
Esto te deja con un dilema: o usa tablas HTML para el diseño, lo cual es un estilo malo porque es un marcado de presentación. O intente emular una grilla con flotadores y un posicionamiento absoluto en CSS. Esto a menudo se convierte en intrincado y difícil de mantener CSS.
Si la accesibilidad o la pureza semántica es importante para usted, vaya con CSS puro. Si solo quiere que su cuadrícula de diseño funcione sin demasiada molestia, probablemente debería usar una tabla.
Por lo general, optaré por que las tablas muestren información de tipo de formulario (Nombre, Apellido, Dirección, etc.) donde alinear etiquetas y campos en múltiples filas es importante. DIVs que uso para el diseño.
Por supuesto, la mesa está envuelta en un DIV :)
Por lo general, siempre que no esté usando la tabla para proporcionar un diseño.
Tablas -> datos
Divs -> diseño
(principalmente)
Puedo ver el argumento para las tablas de formularios, pero hay una alternativa más agradable ... solo 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 distribuir el formulario, ya sea etiquetas una al lado de la otra o etiquetas en la parte superior de las cajas de texto (lo cual es más fácil). Tener la flexibilidad realmente ayuda. También es menos HTML que el equivalente de tabla de cualquiera.
Para ver algunos excelentes ejemplos 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/
Si desea tener HTML semánticamente correcto, debe usar tablas solo para datos tabulares.
De lo contrario, utilice tablas para todo lo que desee, pero probablemente haya una forma de hacer lo mismo utilizando div s y CSS.
Si sus datos pueden distribuirse en una grilla bidimensional, use <table> . Si no puede, no lo haga. Usar <table> para cualquier otra cosa es un truco (aunque a menudo no uno con las alternativas adecuadas, especialmente cuando se trata de compatibilidad con navegadores más antiguos). No usar <table> para algo que claramente debería ser uno es igualmente malo. <div> y <span> no son para todo; de hecho, siendo completamente sin sentido en un nivel semántico, deben evitarse a toda costa en favor de más alternativas semánticas.
Sobre este tema, pensé que this sitio era bastante divertido.
Solía hacer CSS puro, pero abandoné esa búsqueda en favor del enfoque híbrido table / css como el enfoque más pragmático. Irónicamente, también es debido a la accesibilidad. ¿Alguna vez has intentado hacer CSS en Sidekick? ¡Qué pesadilla! ¿Alguna vez has visto cómo los sitios web basados en CSS se representan en nuevos navegadores? Los elementos se superponen o simplemente no se muestran correctamente que tuve que desactivar el CSS. ¿Alguna vez has intentado redimensionar los sitios web basados en CSS? ¡Se ven terribles y a menudo perjudiciales para los ciegos si usan funciones de zoom en el navegador! Si haces eso con tablas, escalarán mucho mejor. Cuando las personas hablan de accesibilidad, encuentro que muchos no tienen ni idea y me molesta porque estoy discapacitado y no lo son. ¿Realmente han trabajado con los ciegos? ¿El sordo? Si la accesibilidad es una preocupación principal, ¿por qué demonios el 99% de los videos 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, así como LONG 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 de CSS suena genial pero parcialmente viable en la vida real con demasiados hacks, algo que está en contra de los ideales de "pureza".
Desde que usé el método CSS con tablas, ahorré mucho tiempo diseñando un sitio web y el mantenimiento es mucho más fácil. Menos hacks, más intuitivos. Recibo menos llamadas de personas que dicen: "inserté un DIV y ahora parece todo arruinado". Y aún más importante, absolutamente NO hay problemas de accesibilidad.
Todo el asunto "Tablas vs Divs" apenas pasa la marca. No es "mesa" o "div". Se trata de usar semántica html.
Incluso la etiqueta div solo juega una pequeña parte en una página bien diseñada. No abusar de eso. No debería necesitar tantos si coloca su html juntos correctamente. Cosas como listas, conjuntos de campos, leyendas, etiquetas, párrafos, etc. pueden reemplazar mucho de lo que a menudo se usa un div o un tramo para lograr. Div debe usarse principalmente cuando tiene sentido indicar una división lógica, y solo se asigna para un diseño adicional cuando sea absolutamente necesario. Lo mismo es cierto para 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 las etiquetas directamente. Posiblemente lo más importante es que tienes una página que puntuará mucho mejor con Google (de forma anecdótica) que la tabla equivalente o la página div-heavy. Sobre todo, te ayudará a conectarte mejor con una parte de tu público.
Entonces, si volvemos y lo miramos en términos de tabla vs div, es mi opinión que hemos llegado al punto en que div se usa en exceso y la tabla no se usa lo suficiente. ¿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 registros múltiples, cada uno con el mismo conjunto de campos. Incluso están almacenados en una tabla de servidor sql, para gritar en voz alta. Esta es la definición exacta de datos tabulares. Esto significa que una etiqueta de tabla html sería una buena opción semántica para diseñar algo así como las publicaciones aquí en . El mismo principio se aplica a muchas otras cosas también. Puede que no sea una buena idea usar una etiqueta de tabla para configurar un diseño de tres columnas, pero ciertamente es bueno usarla para cuadrículas y listas ... excepto, por supuesto, cuando puedes usar el ol o ul ( list) etiquetas.
Yo uso tablas en dos casos:
1) datos tabulares
2) En cualquier momento que quiera que mi diseño se ajuste de forma dinámica a su contenido