¿Cuál es la mejor forma de convertir el diseño de la tabla al diseño de CSS?

Question

Estoy a punto de comenzar a trabajar en una página web con un diseño complejo basado en tablas (codificado hace años).

Una de las cosas que me gustaría hacer es convertir el diseño a un diseño CSS adecuado con divisiones y tramos.

¿Puede sugerir un buen enfoque para abordar problemas como este? ¿Debo usar un marco CSS como Blueprint? Solo entra y piratea hasta que se vea bien? Ya uso mucho Firebug y la barra de herramientas para desarrolladores de IE.

Answer 1

Generalmente no hay una bala de plata en la conversión entre tabla y CSS. Cada sitio es diferente y tiene diferentes requisitos. La única respuesta real es: simplemente inicie el marcado desde cero.

El mejor consejo es escribir el marcado por completo primero. Asegúrese de que el marcado sea preciso, semántico y represente sus datos por completo. No escriba la hoja de estilo ... todavía. Después de que se haya hecho el marcado, cree el CSS. De esta manera, tiene un marcado semántico y CSS simplemente controla la presentación.

Los marcos CSS a menudo no recomiendan este enfoque para el marcado semántico porque lo obligan a agregar etiquetas adicionales para cumplir con su enfoque. En consecuencia, los marcos CSS a veces son más problemáticos que su valor.

Haga el marcado, luego el CSS.

Answer 2

¡El proceso de conversión será un dolor de cabeza doloroso! Te sugiero que comiences un rediseño completo.

Answer 3

La manera iterativa funciona también. Comience con bloques pequeños, convirtiéndolos a CSS. Esto debería simplificar la estructura de su tabla, con suerte dejando solo la "grilla básica" en las tablas y todo el resto en CSS.

A partir de ahí, elija una solución existente y probada si se trata de un diseño simple (para 1 a 3 columnas, hay toneladas de soluciones probadas). Si es más complejo, ve con Blueprint.

Answer 4

Antes de comenzar, asegúrese de estar utilizando un restablecimiento de CSS. Eric Meyer y Yahoo YUI son excelentes. Esto ayudará a que todos tus navegadores tengan el mismo aspecto.

Además, instale el HTML validator también. Esto asegurará que su HTML se vea bien y esté listo para agregar el CSS.

Luego tome una copia de Firebug e instálela en firefox. Esto es excelente para ver qué reglas de CSS están haciendo qué. Puede inhabilitar reglas individuales haciendo clic en s cruz por cada regla.

Ahora, visite algunas páginas web que validen correctamente y vea qué reglas han utilizado en sus hojas de estilo.

sitios web para probar son www.alistapart.com, CSS Zen Garden, etc. SimpleBits

Answer 5

No sé es que esto puede ser de alguna ayuda, construyo CSS Marco llamada Emastic (compatible con columnas de fluidos y fijos) y se puede simular tablas si desea aquí es el ejemplo Emastic Table

Answer 6

En segundo lugar los comentaristas que dicen que debe volver a diseñar todo desde cero. Limpia el HTML y luego crea el CSS.

Me gustaría añadir un motivo para hacerlo.Por lo general, los diseños basados ​​en tablas tienen por lo menos algunos años y por lo tanto se ven bastante pasados. Aproveche esta oportunidad para mejorar el diseño. Ya sea una pequeña actualización o una revisión completa según sus gustos y necesidades.

Answer 7

No utilizaría un marco. Aprender un nuevo marco solo es útil si lo usa de nuevo en &. Cada marco tiene sus propios errores y debilidades. Utilice

display: table-cell; 

para hacer una columna. Estos se alinearán como float: left;. Ver http://quirksmode.org/css/css2/display.html

Answer 8

En algunos casos, el uso de expresiones regulares podría acelerar su proceso.

Por ejemplo, algo como esto:

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td> 

podría coincidir con el inicio de una mesa y proporcionar el contenido de la primera celda de $ 1 para una sustitución:

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div> 

Por supuesto' d necesita personalizar para que coincida con su caso de uso particular. Si tiene varias páginas similares, puede probar la codificación manual primero y luego usar algo como esto para simplificar la conversión de las otras.

Otro enfoque sería utilizar algo como esto plugin de jQuery: https://github.com/ryandoom/jquery-plugin-table-to-div

Se tiene la intención de modificar tras la representación, pero podría ser utilizado durante el desarrollo para tener una tabla dada y proporcionar un simple formulario basado DIV de la misma.