¿Por qué se usan tantas tablas HTML en el marcado de páginas?

8

Estoy tratando de ingresar al desarrollo web, así que comencé a aprender HTML, CSS y javascript. Me he ido muy bien con javascript, pero todavía no puedo hacer nada con HTML y CSS para salvar mi vida. Iba a pedir algunos lugares o consejos para mejorar, pero sé que la pregunta se ha hecho innumerables veces y que simplemente se eliminaría, así que pensé que solo vería la fuente de los sitios web de otras personas.

Lo que sigo viendo son tablas de izquierda y derecha. ¿Hay alguna razón válida para usar tablas?

html mowwwalker
fuente
giveupandusetables.com
MSalters
Una buena razón podría ser que estás en un equipo que realmente apesta, pero todos tienen más poder político que tú y todos están realmente paranoicos de nuevas ideas que explicarían por qué favorecen el esquema de diseño favorito de 1998.
Erik Reppen

Respuestas:

16

Para diseñar datos tabulares.

Aquí hay algunas preguntas que debe hacerse al elegir entre tablas y contenedores css.

Las tablas son para datos tabulares. Período.

La <table>etiqueta no es malvada. A pesar de lo que algunas personas piensan y dicen, el objetivo de CSS es no usarlo nunca. Sin embargo, un corolario del principio de HTML semántico es que nunca debe usar tablas para el diseño . Permítanme decirlo nuevamente, como su propio párrafo, para enfatizar:

Nunca use tablas para el diseño. Siempre.

Si no puede decidir si una mesa es la opción correcta o no, hágase estas preguntas:

  • "¿Las filas o columnas de información comparten un atributo común?"
  • "Si cambiara el orden de las filas o columnas, ¿tendría sentido?"
  • "Si transpusiera los ejes de la tabla (convertía las filas en columnas y viceversa), ¿tendría sentido?"

Si la respuesta a lo anterior es generalmente "Hrm ... supongo que no", entonces no deberías estar usando una tabla.

Si necesita más convincente, vea "¿Por qué son malas las Tablas (Para Diseño) En comparación con la semántica HTML + CSS" .

Demian Brecht
fuente
2
@WeekendWarrior: No estoy seguro de estar de acuerdo. ¿Por qué querría hackear una solución CSS para mostrar una ncolumna tabular por ncuadrícula de fila, como, por ejemplo, estadísticas en un juego de la NFL? Ahí es exactamente donde se deben usar las tablas . Quizás el diseño de la cuadrícula CSS lo reemplace en algún momento (una vez que sea compatible con varios navegadores, al menos para algunas versiones de cada uno), pero aún no está allí.
Demian Brecht
@Demian Él dijo "tablas para el diseño". Estoy bastante seguro de que no quiso incluir datos tabulares.
Rein Henrichs
¿Sería apropiada una tabla para, por ejemplo, un libreto de traducción de ópera de lado a lado [usando una fila de tabla por línea]? Tal cosa no sería exactamente "datos tabulares", pero el uso de una tabla mantendría la asociación entre líneas en el idioma original y la traducción, incluso si el texto se ampliara lo suficiente como para hacer que algunas líneas se ajusten.
supercat
9

Suponiendo que se refiere a tablas utilizadas como diseño de página en lugar de solo para datos tabulares ...

Estás viendo tablas porque CSS es frustrante de usar (ciertamente menos ahora que hace unos años). En algún momento uno tiene que hacer el trabajo. Para hacerlo "bien", usar CSS requiere un sinfín de complicaciones y experimentación. Las tablas, por otro lado, se pueden entender de forma intuitiva.

Si quiere hacerlo bien (usando CSS) y no quiere desperdiciar su vida en CSS, el mejor compromiso es conformarse con algunos diseños diferentes y eliminar algunos CSS de los sitios web de plantillas. Use las plantillas como punto de partida. Comenzar desde cero con CSS es una receta para la frustración.

Angelo
fuente
44
+1 para "hacer el trabajo". Soy desarrollador, no diseñador de interfaz de usuario. Ciertamente, puedo diseñar una interfaz de usuario funcional y algo atractiva, pero me llevará MUCHO más tiempo que un diseñador de UI. ¿Qué le daría a un chico de mi equipo que acaba de diseñar las plantillas y los estilos para no tener que preocuparme por eso?
AJC
1
No puedo evitar pensar que CSS podría haber sido mucho más simple. En mi humilde opinión, esta complejidad innecesaria y la falta de una implementación de referencia de "píxeles perfectos" ha llevado a implementaciones deficientes / inconsistentes por parte de los proveedores de navegadores, lo que ha llevado a toda una generación de desarrolladores web a "no obtenerlo".
Angelo
1
Solía ​​haber "interpretaciones" del modelo de caja donde las tablas eran la única forma. Por ejemplo, el elemento FORM no se pudo diseñar pero aún generó un cuadro (con margen / relleno predeterminado) en IE. La única forma de deshacerse del espacio extra era apretar FORM entre TABLE y TR. Totalmente en contra del estándar, pero la única forma en que funcionó.
SF.
@Angelo: El problema no era solo que CSS era "frustrante"; históricamente ha sido incapaz de hacer muchas cosas que eran bastante fáciles con las tablas. Algo simple como un diseño de barra lateral de texto principal más, donde la barra lateral sería el 10% del ancho disponible, pero al menos 140px de ancho (el ancho de un gráfico de logotipo en particular), sería fácil con una tabla [IIRC, set el ancho de la tabla al 100%, deje el ancho de la columna principal sin especificar y establezca el ancho de la columna de la barra lateral al 10%; el ancho de columna iría por encima del 10% si fuera necesario para acomodar un gráfico de 140 px] ¿Cuándo podría CSS hacer eso por primera vez?
supercat
8

Los diseños basados ​​en tablas son, de alguna manera, más fáciles de aprender que los diseños CSS puros para las personas que recién comienzan a aprender HTML. Además, en el pasado, no podía usar CSS de manera confiable y hacer que funcionara en todos los navegadores. Entonces, prácticamente todos los tutoriales HTML hasta el año 2000, más o menos, usaban tablas exclusivamente para diseños. Gran parte de ese código HTML se pasó a otros sitios (a través de View Source) y mucha gente aprendió de esos tutoriales y no se molestó en aprender diseños CSS.

Me ofreceré para ser criticado aquí y decir que estarás bien si comienzas a hacer tus diseños en tablas antes de aprender CSS. Las diferencias a nivel principiante son menores en el mejor de los casos. No podrá hacer diseños realmente intrincados en CUALQUIERA hasta que haya tenido un año o dos de experiencia, por lo que realmente no hay mucha diferencia. Comience con las tablas para obtener algunas cosas en la pantalla y mantener su interés, y siga leyendo lentamente sobre CSS (que es claramente superior a largo plazo). Solía ​​ser un CSS-Zealot en el día de "Diseñar con estándares web", pero eso fue solo porque fue divertido ser autónomo y superior.

Graham
fuente
66
No estoy de acuerdo, aunque no voy a llamarte. Aprender a diseñar con tablas no es necesariamente más fácil (no fue para mí). Más importante aún, la transición de la "forma de tablas" a la forma CSS es más difícil que simplemente aprenderlo bien la primera vez.
MattBelanger
1

Los navegadores son el problema. A pesar de lo que era la mejor práctica y lo que todos acordaron, fue demasiado difícil hacer que los sitios web se vean consistentemente bien en navegadores sin tablas, a pesar de que estaba mal codificado. Tiene que ver con la semántica. Eso es lo más importante que aprender con HTML, es el significado semántico de las etiquetas. El mejor lugar para aprender es en los primeros cinco videos que Educator.com tiene en sus videos HTML, todos están hechos con HTML5 en mente y explicando qué es la semántica y por qué es importante.

Phillip James
fuente
Olvidé mencionar que los navegadores se han puesto al día. Ya nadie usa IE6, por lo que ahora las tablas son más complicadas de lo que valen, en realidad es más fácil hacer las cosas bien ahora. Así que olvide las tablas a menos que esté trabajando con "datos tabulares". Vea el video que mencioné si no entiende lo que quiero decir con "datos tabulares".
Phillip James
Por desgracia, en el mundo empresarial y el cuidado de la salud no son sorprendentemente gran número de personas que siguen usando IE6
CdMnky
Lo "más importante para aprender con HTML" es algo subjetivo. Estoy en el mundo del desarrollo de aplicaciones web, por lo que la semántica HTML en realidad no tiene mucho sentido para mí en su mayor parte. No es así si estaba construyendo sitios que necesitaban funciones de SEO.
Graham el