Qual è il modo migliore per convertire il layout della tabella nel layout CSS?

Question

Sto per iniziare a lavorare su una pagina Web con un layout basato su tabelle complesso (codificato anni fa).

Una delle cose che mi piacerebbe fare è convertire il layout in un corretto layout CSS con div e span.

Potete suggerire un buon approccio per affrontare problemi come questo? Dovrei usare un framework CSS come Blueprint? Basta entrare e incidere su di esso fino a quando non sembra giusto? Faccio già un uso pesante di Firebug e della barra degli strumenti per sviluppatori IE.

Answer 1

Generalmente non c'è un punto d'argento nella conversione tra tabella e CSS. Ogni sito è diverso e ha requisiti diversi. L'unica vera risposta è: basta iniziare la revisione da zero.

Il miglior consiglio è quello di scrivere il markup interamente prima. Assicurati che il markup sia accurato, semantico e rappresenti interamente i tuoi dati. Non scrivere il foglio di stile ... ancora. Al termine della revisione, crea il CSS. In questo modo hai markup semantico e CSS sta controllando puramente la presentazione.

I framework CSS spesso non sostengono questo approccio al markup semantico perché obbligano ad aggiungere tag aggiuntivi per conformarsi al loro approccio. Di conseguenza, i framework CSS sono a volte più difficili del suo valore.

Fare il markup, quindi il CSS.

Answer 2

Il processo di conversione sarà un doloroso mal di testa! Ti suggerisco di iniziare un'intera riprogettazione.

Answer 3

Anche la modalità iterativa funziona. Inizia con piccoli blocchi, convertendoli in CSS. Ciò dovrebbe semplificare la struttura della tabella, si spera di lasciare solo la "griglia di base" nelle tabelle e tutto il resto in CSS.

Da lì, scegli una soluzione esistente, testata se si tratta di un layout semplice (per 1 o 3 colonne, ci sono tonnellate di soluzioni testate là fuori). Se è più complesso, vai con Blueprint.

Answer 4

Prima di iniziare, assicurarsi di utilizzare un ripristino CSS. Eric Meyer e Yahoo YUI sono entrambi eccellenti. Ciò contribuirà a rendere tutti i tuoi browser uguali.

Inoltre, installare anche HTML validator. Ciò garantirà che il tuo codice HTML sia in buone condizioni e pronto per aggiungere il CSS.

Quindi prendi una copia di Firebug e installala in firefox. Questo è eccellente per vedere quali regole CSS stanno facendo cosa. Puoi disabilitare singole regole facendo clic su s cross per ogni regola.

Ora, visita alcune pagine Web che convalidano correttamente e vedi quali regole hanno usato nei loro fogli di stile.

siti web da provare sono www.alistapart.com, CSS Zen Garden, SimpleBits ecc

Answer 5

Non so è questo può essere di alcun aiuto, io costruisco Framework CSS chiamato Emastic (supporta le colonne fluide e fissi) e si può simulare i tavoli se vuoi qui è l'esempio Emastic Table

Answer 6

I secondi i commentatori che dicono che dovresti riprogettare tutto da zero. Pulisci l'HTML e quindi crea il CSS.

Vorrei aggiungere un motivo per farlo.Solitamente i progetti basati su tabelle hanno almeno qualche anno di vita e quindi sembrano abbastanza passivi. Approfitta di questa opportunità per migliorare il design. O un leggero aggiornamento o una revisione completa a seconda dei gusti e delle esigenze.

Answer 7

Non vorrei usare un quadro. L'apprendimento di un nuovo framework è utile solo se lo si utilizza nuovamente su &. Ogni framework ha i suoi bug e punti deboli. Utilizzare

display: table-cell; 

per creare una colonna. Questi si allineano come float: left;. Vedi http://quirksmode.org/css/css2/display.html

Answer 8

In alcuni casi, l'utilizzo di espressioni regolari potrebbe accelerare il processo.

Per esempio, qualcosa di simile:

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

sarebbe partita l'inizio di un tavolo e di fornire il contenuto della prima cella in $ 1 per una sostituzione:

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

Naturalmente si' d bisogno di personalizzare per abbinare il vostro caso d'uso particolare. Se si dispone di un numero di pagine simili, è possibile provare prima la codifica manuale e quindi utilizzare qualcosa di simile per rendere più semplice la conversione degli altri.

Un altro approccio sarebbe quello di usare qualcosa come questo plugin jQuery: https://github.com/ryandoom/jquery-plugin-table-to-div

Esso è destinato a modificare in seguito il rendering, ma potrebbe essere utilizzato durante lo sviluppo di prendere una determinata tabella e di fornire un semplice modulo basato DIV di esso.