2010-07-30 14 views
10

Eventuali duplicati:
Why not use tables for layout in HTML?vantaggi del design senza tablature delle pagine web?

In questi giorni, sto leggendo un sacco che dovremmo scrivere tableless HTML. Credo che sia necessaria molta conoscenza CSS. Le mie domande sono:

  • Quali sono i vantaggi del design senza tablature?
  • Quali sono le condizioni in cui devono essere utilizzate le tabelle?
  • Come iniziare?
+0

"Quali sono le condizioni quando è necessario utilizzare le tabelle?" Quando si desidera visualizzare dati tabulari. Vale a dire, utilizzare le tabelle per visualizzare tabelle di dati e utilizzare CSS per il layout. Non provare a ricreare tabelle senza tabelle e non utilizzare tabelle per il layout. –

+0

duplicato: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html chiunque desideri punti gratuiti può copiare le risposte qui: p – catchmeifyoutry

+0

Abbastanza sicuro che questa domanda sia stata fatto a morte: http://stackoverflow.com/questions/407420/what-is-the-benefit-of-tableless-design-if-you-need-clearing-blocks-everywhere http://stackoverflow.com/questions/1518223/table-vs-css-based-layouts-per-pagine Web http: // stackoverflow.it/questions/30251/tables-instead-of-div http://stackoverflow.com/questions/96137/divs-vs-tables-a-rebuttal-please http://stackoverflow.com/questions/83073/div- vs-table –

risposta

3

Quali sono i vantaggi del Table less design?

Ci sono molti, non ultimo, il carico utile HTML ridotto e la flessibilità di modificare il layout (tramite CSS) senza modificare il markup.

Un modo in cui riducono il carico utile è che, con gli stili memorizzati in un foglio di stile esterno e i fogli di stile spesso condivisi tra le pagine, il salvataggio nella cache passa davvero in secondo piano. Si potrebbe sostenere che i fogli di stile possono essere usati con le tabelle. Sì; tuttavia, l'uso disciplinato delle div per il layout tende a promuovere l'uso dei fogli di stile.

Si può leggere sulla progettazione di Search Engine Optimization (SEO). Un principio del SEO è quello di ottenere il contenuto importante verso l'alto dell'albero HTML, sopra cose relativamente poco importanti come la navigazione. Questo non è possibile con il design basato su tabelle.

Quali sono le condizioni quando è necessario utilizzare le tabelle?

Utilizzare le tabelle per visualizzare i dati tabulari. Evitalo per il layout.

Come iniziare?

Sono un fan di w3schools e il meraviglioso CSS Zen Garden.Quelli mi hanno dato il mio inizio.

+0

scusa se questo suona stupido? puoi darmi un esempio di dati tabulari? –

+2

Una regola empirica per me è: è tabellare se le righe e le colonne hanno un significato. Spesso, ogni riga è una singola entità (come un dipendente) e ogni colonna rappresenta un particolare attributo (come "nome", "data di nascita", ecc.). – grossvogel

+0

@grossvogel grazie mille :-) –

0

si ottiene prestazioni migliori sul rendering della pagina & sarebbe basato su standard. Utilizza i tag <div> per andare con il design senza tablature.

+0

Come ottengo prestazioni migliori? ragioni per favore .. –

+0

non deve analizzare tutti i tag di tabella soprattutto quando sono nidificati – SoftwareGeek

+3

Le tabelle non sono non standard. – mattmc3

1

Con un design table-less è più facile cambiare il layout di pagina e scrivere meno codice HTML. Le tabelle dovrebbero essere utilizzate solo per dati tabulari.

+0

crea un modulo con qualifiche per le tabelle da utilizzare? –

+0

No, puoi ottenere lo stesso risultato con i galleggianti e la posizione. Le tabelle sono solo per dati tabulari, a cui sono molto abili. – Pat

+0

Vedere [questa domanda] (http://stackoverflow.com/questions/1395514/is-it-acceptable-to-use-tables-for-forms-or-is-it-still-more-correct-to-use -divs) per l'utilizzo di tabelle per moduli – Eric

0

C'è una discussione diffusa su tabelle vs div su Internet.

Sono un grande sostenitore dell'utilizzo di tabelle per rappresentare dati tabulari. Tuttavia, questa è la misura per il loro uso. Per la struttura della pagina e il layout, dovresti usare div e css.

Leggere questo approfondimento smashing magazine article su tabelle vs div.

+0

Crea un modulo. Qualifica per le tabelle da utilizzare. ? –

+0

Personalmente non lo farei. Usa un 'ul' con' labels' e personalizzali con css. Esempio: http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html – advait

+0

A UL con etichette è l'approccio giusto leggere questo: http: // green- beast.com/blog/?p=259 –

1

Le tabelle devono essere utilizzate per la visualizzazione di dati tabulari, non per il layout.

Otterrete prestazioni migliori con file CSS separati perché il browser può memorizzare nella cache i dettagli della presentazione tra le pagine del vostro sito.

L'utilizzo di css separati rende inoltre più semplice lo scambio di viste in base al browser utilizzato (ad esempio, desidero visualizzare qualcosa di molto diverso dagli utenti di iPhone rispetto agli utenti di IE).

Questo semplifica anche il cambio look & del tuo sito senza modificare il codice che genera il contenuto stesso (se stai generando il tuo html con PHP, ad esempio).

1

Tableless web design fornisce il seguente:

Meno Markup

tabelle hanno bisogno di un sacco di codice per creare effettivamente celle della tabella e le righe, dove come un div è solo un semplice tag di apertura e chiusura . Questo significa meno che gli utenti scarichino quando caricano la pagina.

facile manutenzione

Dal momento che c'è meno margine di profitto con un design tableless, il codice è più facile da mantenere (meno codice a guadare attraverso). È anche più semplice aggiungere elementi a un design senza tablature perché non è necessario passare attraverso una tabella e determinare dove devono essere aggiunti tutti i paniere e le colonnine alle tue righe e colonne esistenti.

Contenuto e forma sono separate

Questa è la chiave. Con il design senza tablature, è molto più semplice per swap the CSS e cambia completamente l'aspetto di un sito senza toccare il markup.

I tavoli sono per i dati

Le tabelle dovrebbero essere usate quando si sta visualizzando dati tabulari. La loro struttura li rende molto bravi a definire le relazioni tra intestazioni e dati. Di conseguenza sono ottimi per l'accessibilità quando si tratta di dati tabulari.

The Catch

Anche se non c'è molto da imparare in CSS, ci vorrà un bel po 'per abituarsi a tutti i browser di rendering incongruenze (sto guardando a voi Ie .. .). Se vuoi iniziare, ti consiglio vivamente di concentrarti sull'apprendimento di come floats and position behave. Una volta risolto, diventa molto più facile.

Problemi correlati