¿Cuál es la forma correcta de un diseño HTML entre navegadores?

votos
0

Acabo de leer los códigos de un producto web que se supone que es compatible con múltiples navegadores modernos (incluidos FireFox 3.X, Safari 3.X e IE7 +, pero sin incluir IE6-). El código HTML usa div en lugar de tabla para crear efectos similares a los de una tabla. En realidad, los div se organizan así:

   <div>
         <div>
              <div style=float:left id=header1>...</div>
              <div style=float:left>...</div>
              <div style=float:left>...</div>
         </div>
         <div>
              <div style=float:left id=header2>...</div>
              <div style=float:left>...</div>
              <div style=float:left>...</div>
         </div>

Hay una pieza de código JavaScript de carga para leer todos los elementos headerX, calcule su max offsetWidth . A continuación, asigne el valor máximo de desplazamiento a cada uno de ellos. De esta forma, el div está bien alineado para ser como una mesa.

En realidad, no creo que esta sea una buena forma de hacerlo, pero me dijeron que el producto está diseñado de esta manera para que sea compatible con varios navegadores , porque la tabla se comporta de manera diferente en diferentes navegadores.

No estoy convencido. Entonces, la pregunta. Además del enfoque mencionado anteriormente, ¿hay algo mejor para hacer un diseño de tabla para todos los navegadores populares?

Publicado el 13/03/2009 a las 15:35
fuente por usuario
En otros idiomas...                            


11 respuestas

votos
6

Parece que casi todos malinterpretaron tu pregunta (o tal vez yo).

Parece que el producto web está tratando de mostrar datos tabulares utilizando divs y su razón es que es la mejor manera de hacerlo compatible entre navegadores. No solo es falso, al incluir javascript en la ecuación, la hacen instantáneamente menos compatible con sus usuarios. Si un usuario tiene javascript deshabilitado, los divs serán un desastre. Lo mejor es usarlo <table>en esta situación, ya que funciona bastante bien en todos los navegadores, por lo que solía ser tan atractivo diseñar un diseño.

A lo que la mayoría de las personas se refiere en sus respuestas es al viejo pecado de hacer diseños de sitios web usando tablas, que no creo que tu pregunta realmente cubra. De todos modos, esto es incorrecto porque la <table>etiqueta no es semánticamente relevante para mantener el contenido de diseño. Siempre es mejor mantener el significado semántico de su documento HTML. Lo que está haciendo este producto web es el mismo pecado, pero de forma inversa: están usando la <div>etiqueta para mostrar datos tabulares, cuando <table>está ahí para eso.

Respondida el 13/03/2009 a las 16:22
fuente por usuario

votos
3

Me dijeron que el producto está diseñado de esta manera para que sea compatible con varios navegadores, porque la tabla se comporta de manera diferente en diferentes navegadores.

Pfft. Las tablas no se comportan de manera diferente en todos los navegadores que cualquier otra característica.

Usar JavaScript para emular un diseño de tabla en lugar de simplemente usar una tabla es realmente perverso. Será más lento y más torpe que simplemente dejar que el navegador lo haga, se derrumbará sin JS habilitado, y puede no responder bien al zoom (que rompe offsetWidth en algunas circunstancias) o errores de redondeo de porcentaje de ancho.

Hay casos en los que puede ser apropiado usar JavaScript para aumentar el diseño, para trucos que ni las tablas ni el diseño de CSS pueden hacer por sí mismos, pero este no es realmente uno de ellos.

¿Hay algo mejor para hacer un diseño de tabla para todos los navegadores populares?

Sí, usa una tabla. La cuestión semántica de "¿este marcado realmente representa una mesa?" Es en gran parte un asunto académico. (Y con su marcado hablando de encabezados, ¡parece que incluso puede estar usando una tabla semántica real!)

Hay poco o ningún daño práctico al ahorrar el uso de tablas simples para el diseño, siempre que el orden de lectura de arriba a abajo tenga sentido. La idea de que "las tablas son intrínsecamente malas" viene como una reacción a una época en la que la mayoría de los sitios se creaban utilizando un horrendo desorden de tablas anidadas, distribuidas y fijas que daban como resultado un marcado ilegible e inaccesible.

Claro, sería ideal si pudieras poner cada elemento de página en un div y usar CSS para posicionar cada uno relativo el uno al otro, el tamaño de página, etc. Pero la realidad es que CSS no es tan poderoso, y algunas cosas pueden ser logrado mucho más simplemente con un uso de mesa un poco conservador.

Respondida el 13/03/2009 a las 16:22
fuente por usuario

votos
2

Lo que estás haciendo se llama div-soup. Lea sobre HTML semántico y la propiedad CSS display.

Además, si los datos son tabulares, no hay nada de malo en usar una tabla. Para obtener diseños idénticos en diferentes navegadores, es posible que deba establecer la propiedad CSS border-collapse: collapseo el atributo HTML.cellspacing="0"

Respondida el 13/03/2009 a las 15:46
fuente por usuario

votos
2

Sé que esto no responde a su pregunta, pero intente evitar los diseños de tabla y aprenda cómo escribir CSS compatible con varios navegadores para posicionar el contenido de su página .

Vea lo que es posible con los diseños CSS en csszengarden

Respondida el 13/03/2009 a las 15:38
fuente por usuario

votos
0

Simplemente no existe tal cosa.

Cada broswer tiene sus propias peculiaridades. Necesitas pelear de forma iterativa con ellos y aprender a evitarlos.

Decir que el diseño de CSS es más transversal o más confiable que el diseño de la tabla es simplemente estar ciego . No, no lo es. Creer en que el marcado de CSS es más semántico y atractivo que el marcado de tablas es una cuestión de religión y no tiene nada que ver con los aspectos técnicos reales de ambos enfoques.

Respondida el 13/03/2009 a las 16:31
fuente por usuario

votos
0

Encuentro que el debate de div / mesa es mejor para otras personas para perder el tiempo. Al diseñar un diseño de navegador cruzado, la filosofía que he encontrado que funciona mejor es tratar tanto a la tabla como a los elementos div como únicos, cada uno con su lugar en una página web. Si te encuentras capaz de usar divs de manera efectiva, entonces eso es genial (y si puedes hacer que funcionen bien en todos los navegadores, más potencia para ti). Sin embargo, con diseños más complejos, creo que las tablas también pueden ser útiles. , cuando tenga cuidado de especificar celdas, celdas, bordes, etc. Recientemente terminé trabajando en un proyecto en el que nuestra estrategia de diseño final utilizaba una serie de elementos div que encapsulaban una configuración de tabla para obtener el diseño que queríamos. La página era http://www.kafuka.org , si te preguntas a qué me refiero.

Respondida el 13/03/2009 a las 16:16
fuente por usuario

votos
0

Ese es un gran ejemplo de alguien que se pierde el objetivo de evitar el uso de tablas para el diseño. El principal problema con el uso de tablas para el diseño es que hace que sea muy difícil y tedioso cambiar cualquier cosa en una escala de sitio más adelante.

Al poner las reglas de CSS dentro del HTML, combinan la inflexibilidad de las tablas con CSS dudoso y repetitivo. Para colmo, están haciendo un uso incorrecto de javascript para recrear la funcionalidad que ya existe en las tablas.

No hay una respuesta simple o "correcta" a esta pregunta. Sin conocer los detalles de su situación, todo lo que puedo hacer es establecer algunos conceptos básicos:

  • Menos código es casi siempre mejor.
  • Si te encuentras intentando replicar el comportamiento de la tabla usando css (o especialmente javascript), quizás quieras usar tablas.
  • Menos código es casi siempre mejor.
  • Si se encuentra anidando mesas dentro de otras tablas, es probable que haya una mejor manera de lograr su objetivo.
  • Menos código es casi siempre mejor.
  • No tenga miedo de cambiar un poco su diseño si le permite simplificar mucho su código.

La verdad es que no hay balas mágicas. Hay toneladas de recursos por ahí, pero como con cualquier actividad que valga la pena, toma tiempo y dedicación. Usar una herramienta que oculte la complejidad puede ayudar en el corto plazo, solo tenga en cuenta que ya no tiene control de las concesiones que se realizan en su nombre detrás de escena.

Algunos lugares para comenzar:

Respondida el 13/03/2009 a las 16:14
fuente por usuario

votos
0

Incluso yo estaba teniendo pensamientos similares sobre el uso de tablas para el diseño por mucho tiempo. Pero más tarde pensé que muchos sitios web populares usaban diseños basados ​​en div. Entonces creo que esa es la manera de hacerlo hoy en día. No tienes que construir uno desde cero. Hay muchos marcos CSS disponibles en la web que se pueden usar fácilmente. Por favor, encuentre la lista a continuación.

http://developer.yahoo.com/yui/
http://code.google.com/p/blueprintcss/

Aquí tienes una lista de css frameworks
http://speckyboy.com/2008/03/28/top- 12-css-frameworks-y-how-to-understand-them /

Respondida el 13/03/2009 a las 15:55
fuente por usuario

votos
0

No hay muchos casos donde TIENE que usar JavaScript para formatear / diseñar. La única excepción que recuerdo ahora es reformatear la página cuando el usuario cambia el tamaño de la ventana.

Este tipo de cosas se puede hacer al 100% con HTML + CSS simple. Puede que necesite una hoja de estilo condicional para IE6 y plataformas móviles, pero cada web que hice hasta el momento tenía la misma hoja de estilo para IE7 y FF3 y funcionaba bien con DIV en lugar de tablas. Solo necesitas pensar, googlear e improvisar (en este orden;).

Sin embargo, no creo que se pueda lograr este caso en particular sin un DIV para cada tabla, fila y celda, lo que significa que harás casi lo mismo que con <table>, <tr> and <td>. Mostrar los datos tabulares en las tablas es semánticamente bueno, por lo que si realmente lo necesita como una tabla, no como un diseño web, simplemente ahórrese el problema y use el marcado de tabla HTML.

Respondida el 13/03/2009 a las 15:50
fuente por usuario

votos
0

Creo que es imposible.

Sin embargo, tenga en cuenta que si conoce la altura de la fila, puede definir su tabla a través de la primera columna: primera fila, segunda fila, ... segunda columna ...

Respondida el 13/03/2009 a las 15:48
fuente por usuario

votos
0

El código HTML usa div en lugar de tabla para crear efectos similares a los de una tabla.

Este es un concepto erróneo común: la antigua forma en que muchas personas solían hacer sus diseños era con tablas, por lo que en realidad usaban la tabla en lugar de div para los efectos tipo div. :)

Respondida el 13/03/2009 a las 15:44
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more