espacio - ¿Deben evitarse las tablas en HTML a cualquier costo?
tablas html avanzado (27)
Es aconsejable usar tablas en páginas HTML (ahora que tenemos CSS)?
¿Cuáles son las aplicaciones de las tablas? ¿Qué características / habilidades tienen las tablas que no están en CSS?
preguntas relacionadas
Aparte de los datos tabulares , las tablas siguen siendo lamentablemente necesarias si desea crear diseños de cuadrícula flexibles , como formas complejas en una forma compatible con varios navegadores.
CSS2 tiene soporte para crear diseños de cuadrícula flexibles sin usar el elemento de table través de la propiedad de visualización , pero esto no es compatible con IE6 o IE7 .
Sin embargo, para la mayoría de los diseños de formularios básicos, CSS debería ser suficiente.
Aunque para algunos diseños, el uso de tablas puede parecer más simple al principio, cuando llega el tiempo de mantenimiento usando CSS vale la pena. Especialmente si alguna vez quiere cambiar la posición de algo, o si desea usar el mismo diseño en varios lugares.
En mi humilde opinión, las tablas deben usarse solo cuando se presentan las tablas. Nunca para propósitos de diseño.
Creo que la razón por la cual esto surge es que el uso de tablas html es más fácil de entender cuando se crea una estructura y diseño que CSS. Usar CSS es más abstracto pero ayuda a separar tu código.
En respuesta al argumento de "estructura" ... por definición, no está utilizando tablas html dando estructura a datos para que lo identifique como "tabular". Ya sea CSS o html, usted controla el flujo y el diseño de los datos. Ya sea tabular o de otra manera ...
Si las tablas CSS son tan importantes (y estoy seguro de que mi respuesta comenzará una especie de guerra de llama) ¿por qué no existe un mecanismo en Visual Studio para crear un diseño usando CSS? Oh, no revisaste la característica de diseño en VS? Sí, tienes tablas, directamente de Microsoft. No me estoy quejando, solo señalando que si esto significaba tanto para el resto del mundo, vería a MS cambiar a CSS.
En mi opinión, haz lo que mejor se adapte a tu proyecto. Para proyectos web de una o dos páginas, sigo usando html porque lo que hace es obvio. Usar CSS es más abstracto y algunas mañanas simplemente no he comido tanto café. Las tablas HTML pueden volverse desordenadas y rápidas. CSS toma un poco más de tiempo para desordenarse, pero también lo hará.
Creo que podrías estar un poco confundido. CSS es un método de estilo de documentos HTML, ya sea un elemento de tabla o un ''div''.
Solía ser que las tablas se usaban en HTML para diseñar todo el diseño de página. Era común ver varias tablas anidadas (generalmente generadas por programas WYSIWYG como Dreamweaver), y esto conducía a una pesadilla de mantenimiento.
Desde la introducción y adopción de hojas de estilo CSS, ahora es correcto utilizar una tabla solo para datos tabulares. Eso significa que si sus datos se representan de forma más natural como una tabla, utilice el elemento de la tabla. Aún puede darle estilo a la tabla usando CSS.
Sin embargo, y generalmente desapruebo este método ya que duplica la funcionalidad existente, es posible usar elementos para construir una estructura similar a una tabla. De hecho, hay varios sitios web que generarán ese código para usted, pero no tengo enlaces a mano.
Recuerde también que algunos usuarios pueden estar viendo en modo solo texto, o usando un lector de pantalla, los cuales probablemente romperán la página (como leer las columnas verticalmente en lugar de horizontalmente), de ahí el uso adecuado de las tablas.
HTH
Creo que todo depende del tiempo / esfuerzo. Mientras que un purista podría decir "solo usa tablas para datos tabulares", he usado tablas para facilitar el diseño de varios navegadores en el pasado.
Para mí, es cuestión de utilizar el tiempo. Puedo gastar mi tiempo en el CSS para hacerlo bien o puedo tirarlo en una mesa y pasar mucho menos tiempo en él. Tiendo a seguir esta ruta hasta que las cosas funcionen. Una vez que la funcionalidad está allí, vuelvo y pulido el CSS / HTML.
Creo y espero que la era del uso de tablas para el diseño se haya ido. En pocas palabras: una mesa es una mesa, nada más .
Lo que creo que será el tema nuevo y similar de flamewar para los próximos años es: ¿Debería usar la nueva función de visualización de CSS: tabla , tabla-celda , tabla-fila, etc. para el diseño? ? :-)
El beneficio de CSS es que separa el diseño y el diseño del contenido.
Si tiene datos tabulares, tiene sentido usar una etiqueta <TABLE> . Si desea diseñar diferentes bloques de contenido, debe usar <DIV> o <SPAN> y CSS.
Es fácil. Piensa en tu página web como una página real en papel. Debe usar tablas en la página web solo cuando dibuje una tabla en su papel.
Otro consejo es usar la tabla solo con borde> 0. De esta manera, solo usa tablas cuando quiere decir que quiere una tabla (y no para el diseño).
La mayoría de las veces, la reserva de tablas para su uso solo para datos tabulares funciona. Hay ciertos problemas de diseño que son mucho más fáciles de lograr con tablas que cualquier otra cosa. Por ejemplo, alineación vertical y columnas de altura igual. En el otro lado de la valla, ha habido algunas tablas de datos complejas para las que he usado divs flotantes porque las tablas no encajaban en la factura.
Como cualquier otra cosa, use la herramienta adecuada para el trabajo correcto y, a veces, la herramienta más pragmática no es lo que usted cree que sería. Dicho esto, raramente uso tablas para el diseño, incluso en los ejemplos que di, porque inevitablemente toco algún problema que me obliga a hacerlo con CSS de todos modos. Su experiencia puede ser diferente.
Las tablas no tienen equivalente en CSS2, y no son tan fáciles de duplicar usando css. La parte particular de las tablas que es difícil de reproducir es el auto-tamaño de las columnas. Si bien es fácil dejar que la fila 1 crezca al mismo tamaño en la página, es difícil que la siguiente fila coincida dinámicamente con el tamaño de la columna o el tamaño de cada celda, y de hecho no se puede hacer sin usar otros lenguajes de scripting como javascript, php u otros. Puede usar anchuras máxima y mínima, así como establecer porcentajes para los tamaños de celda, o el ancho de celda de código duro, pero las celdas de crecimiento dinámico funcionan bien para 1 fila, es la siguiente fila debajo de la que no coincidirá.
Las tablas se usan para mostrar datos tabulares. No hay mucho más para agregar :-D
Las tablas son para generar datos tabulares. Cualquier cosa que pueda mostrar en una hoja de cálculo, columnas de resultados, ese tipo de cosas.
La sugerencia de usar CSS en lugar de tablas es para diseños en columnas, que no eran realmente tablas reales. Nunca se intentó sugerir que las tablas se eliminen por completo.
Las tablas tienen sentido solo cuando estás tratando de mostrar datos tabulares y eso es todo. Para diseños, siempre debe usar DIV y jugar con posiciones de CSS.
Mi opinión muy simple y básica sobre esto es que las tablas están ahí para datos tabulares, no para posicionar una cosa en la parte superior o junto a otro elemento porque le gusta que esté allí.
Entonces, si desea mostrar una tabla de datos, hágalo (con una tabla). Si desea posicionar el contenido en la página: use css.
Si hay una razón para usar una tabla de forma semántica (por ejemplo, para mostrar datos tabulares) use tablas.
Simplemente no use tablas para hacer cosas de diseño. Hay muchos beneficios de búsqueda y accesibilidad que obtienes con el marcado semántico.
Si tan solo el equivalente de CSS fuera lo más conveniente al configurar un diseño "similar a una tabla", me encantaría usar CSS. Me parece que el tiempo que lleva imitar las cosas que otros han enumerado aquí (alturas iguales en las celdas, filas de crecimiento automático, etc.) simplemente no vale la pena el esfuerzo. No obtengo un rendimiento de mi inversión en lugar de lanzar rápidamente una mesa en la mayoría de los casos.
Todos los navegadores pueden acordar exactamente cómo se debe diseñar una tabla. Bam. Hecho.
Así es cómo suelen ir mis locuras de CSS: prueba a configurar un diseño similar a una tabla en CSS. Pase 20 minutos o más y obtenga todo de la misma manera en Mozilla y luego ábralo en IE. Pase otro ajuste de 30 minutos entre esos dos navegadores. Supongamos que solo hay dos navegadores en el mundo porque realmente necesito hacer algo de trabajo.
Creo en la promesa de CSS: Separación de preocupaciones. El problema es que para aquellos que necesitan ser productivos, CSS no está listo para el horario de máxima audiencia. O quizás sean los motores de renderizado de los navegadores, cualquiera que sea.
Supongo que no soy la mayoría aquí, pero todavía veo mucho uso para las tablas en HTML. Por supuesto, sí, para cosas como formularios, simplemente no se puede vencer a una mesa. Tratar de alinear las etiquetas y los campos de formulario que lo acompañan ciertamente sería posible usando DIV''s, pero lo que sería un PITA y el redimensionamiento de la página sería feo en algunos casos. Una mesa funciona de maravilla aquí.
Pero también considera problemas más grandes. Por ejemplo, ¿ha intentado crear un diseño de 3 columnas estándar con encabezado y pie de página usando solo DIV y CSS? De nuevo, es muy posible, y hay alrededor de 1000 sitios web con ejemplos, pero todos tienden a sufrir los mismos problemas. El primer problema es que a las columnas nunca les gusta tener la misma altura sin algún tipo de ayuda de JavaScript. El segundo problema es cambiar el diseño a menudo es algo complicado, porque es un acto de equilibrio para que todo sea "perfecto" para empezar, así que no querrás meter la pata. Finalmente, y esto se remonta a ese último punto: no es fácil. Tienes que diseñar todos tus DIV, luego volver y crear el CSS mágico que fuerza a esos DIV a la posición correcta, y luego dedicar algunas horas a ajustarlo hasta que esté bien ... ugh. Y luego mirar el HTML sin un visor realmente no le da NINGUNA idea de cómo se ve la página, porque al final todo es reinterpretado por el CSS.
Ahora, opción B. Usa una tabla. Dedique unos 30 segundos a escribir las etiquetas <tr> y <td>, probablemente no tenga ningún CSS, no tenga "fixit" de JavaScript, y conozca EXACTAMENTE cómo se verá con solo mirar el HTML.
Ciertamente hay argumentos a favor y en contra de las tablas, y los puristas parecen preferir el DIV para el diseño, pero no utilicen los DIV por razones religiosas solo porque alguien les haya dicho que las tablas son malas. Usa lo que funcione mejor para ti, tu página y la forma en que tus espectadores interactuarán con la página. Si esa es una tabla, úsala. Si no, no lo hagas
Tampoco me gusta la idea de usar tablas para organizar elementos en una página. Sin embargo, esto no debe convertirse en una religión, las tablas son malas. Me encontré con un ejemplo en el que tengo un diseño de tres columnas y necesito que la columna central crezca con el contenido. Al final, la solución que era la más simple y funcionaba bien en todos los navegadores necesarios era usar una tabla. En mi humilde opinión, CSS aún tiene algunas deficiencias y, a veces, es mejor utilizar algo simple que funcione en lugar de simplemente adherirse ciegamente a alguna idea ("las tablas son malas ...").
Tengo que ir con las tablas aquí. La razón de esto viene simplemente al costo. Hasta que surja un enfoque de diseño centrado en CSS bien respaldado, y me refiero a nivel macro ... no micro en contenedores, tratar de calzar el posicionamiento de CSS en un enfoque generalizado de diseño es ineficiente. Debe abordar esto desde la perspectiva de la persona que escribe el cheque para el desarrollo.
Hace algunos años contraté para desarrollar y mantener un sitio para una importante cadena hotelera. Fuimos con un diseño orientado a la mesa; su encabezado básico, cuerpo, pie de página con columnas izquierda / derecha. También usamos tablas para algunos de los elementos más finos, como botones no gráficos. La empresa matriz de la cadena mantenía su propio sitio y utilizaba un enfoque de CSS puro para el diseño. Cuando salió IE7 nuestro sitio funcionó perfectamente sin ningún cambio. El sitio de la empresa matriz era un desastre. En general, gastaron aproximadamente 1000 horas totales (entre reuniones / desarrollo / QA / rollout) arreglando los problemas.
Cuando se le paga por desarrollar un sitio parte de su responsabilidad es mitigar el riesgo futuro y minimizar los costos futuros de desarrollo, particularmente si esos costos no agregan valor al sitio (su producto).
Voy a suponer que su pregunta es en realidad: "¿Debo evitar el uso de tablas HTML para fines de diseño?" . La respuesta es: No. De hecho, las tablas están diseñadas específicamente para ser usadas para controlar el diseño. El inconveniente de usar tablas para controlar el diseño de una página entera es que el archivo de origen se vuelve rápidamente difícil de entender y editar manualmente. Una (posible) ventaja del uso de tablas para controlar todo el diseño es si existen preocupaciones específicas sobre la compatibilidad y el procesamiento entre navegadores. Prefiero trabajar directamente con el archivo fuente HTML, y para mí usar CSS lo hace más fácil que usar tablas para todo el diseño.
incluso puede usarlos para el diseño, si su diseño es algo tabular. Me gusta la característica de tablas y celdas que se ajustan dinámicamente al ancho que sea la ventana del navegador. Nunca use anchuras o alturas fijas, eso solo estropea las cosas.
Hasta ahora, todo el mundo ha dicho que las tablas solo deben usarse para datos tabulares, y esto es cierto. Echa un vistazo a la fuente HTML de cualquier página en SO y verás que tienen una idea diferente ...
Creo que su razón de ser es que a veces usar una mesa es mucho más simple. Sin embargo, hay muchas buenas razones de usabilidad para evitarlos.
@toddhd, abogando por el uso de tablas para el diseño simplemente para ahorrar tiempo es una excepción. Si el problema es el tiempo, puede crear rápidamente un diseño de columnas sin tablas usando un marco como Blueprint CSS o 960 Grid .
No, en absoluto. Pero use tablas para datos tabulares. Simplemente no los use para el diseño general.
Pero si muestra datos tabulares, como resultados o tal vez incluso un formulario, ¡utilice las tablas!
Parece depender de lo que los navegadores fueron capaces de hacer cuando comenzaste a diseñar. Si comenzó de nuevo cuando solo funcionaban las mesas, entonces eso es lo que probablemente siempre quiera usar, porque lo sabe. O si eso es lo que le gustaba usar incluso después de que los navegadores hubieran avanzado para poder renderizar CSS ...
Simplemente no me gusta seguir haciendo las mismas cosas una y otra vez porque son fáciles y sé cómo hacerlo. Eso es aburrido. Prefiero aprender nuevas técnicas que descartar algo porque no sé cómo usarlo o creo que no tengo tiempo para aprender.
No me gusta usar tablas, no las entiendo, parecen extrañas y ofensivas, pero eso es porque comencé en 2005. Tampoco uso programas de diseño para escupir plantillas porque prefiero la codificación manual.
si necesita usar una tabla, su diseño probablemente apesta. Muéstreme un solo sitio bien diseñado que use tablas, y le mostraré mil que no lo hacen.
Mucha gente está hablando del término "purista". Esto es basura. ¿Imprimirías copias de periódicos en un libro? ¿Diseñarías un folleto con Excel? ¿No? Entonces, ¿por qué usaría una tabla para mostrar datos no tabulares?
La mayoría de las veces, las dificultades a las que se enfrentan las personas al dejar de lado las tablas para el diseño es el resultado de su propia ignorancia de HTML / CSS / Good Design Principles. Si bien puede ser difícil hacer que los diseños de varias columnas se extiendan uniformemente en la dirección vertical, puede pensar en probar un método diferente. Los DIV no son TABLAS. Puede crear columnas falsas utilizando bordes anchos, fondos de página, etc. Dedique algún tiempo a aprender a hacer lo que se propone hacer, o ser visto para siempre como alguien sin ningún tipo de habilidad útil. ( http://www.alistapart.com sería un buen comienzo)
Honestamente, estoy sorprendido de que esta pregunta esté surgiendo en 2008. Los DIV aparecieron cuando estaba en la escuela secundaria. Deja de ser un novato.
Y como se mencionó anteriormente, las tablas fallan mucho en dispositivos móviles y lectores de pantalla.
Al examinar estas respuestas, no vi una razón en el mundo real en la que las tablas sean necesarias para el diseño y que sean correos electrónicos html.
Trabajo para una compañía financiera muy, muy grande y rastreamos alrededor de 600 trabajos diferentes por mes ... muchos de los cuales son campañas de correo electrónico múltiples.
No puede usar css para el diseño de ningún lector de correo. Hay algunas especificaciones CSS en línea que puede usar relacionadas con el color, la fuente y el tamaño, e incluso la altura de línea es bastante amplia, pero para el diseño, debe usar tablas como todos los lectores principales y menores (Outlook 97 / 03, Entourage, MSN etc.) léalos bien.
Los problemas con las tablas entran en juego cuando tienes td que no tienen alto / ancho especificado, ya sea que contengan datos o no. Por lo tanto, los diseños de tablas "rotas" generalmente se arreglan prestando atención a los atributos y sí ... espacios en blanco en html .... sí espacios en blanco que no se supone que importen.
Entonces, si alguna vez trabaja para una gran empresa / corporación o consigue un gran cliente, ¡prepárese para tirar toda la tecnología actual y obtener su sombrero de mesa html!