Tabelle invece di DIV [duplicato]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Possibile duplicato:
Perché non utilizzare le tabelle per il layout in HTML?
In quali condizioni dovresti scegliere le tabelle anziché i DIV nella codifica HTML?
Soluzione
L'intera faccenda di "Tables vs Divs" manca appena il bersaglio.Non è "tabella" o "div".Si tratta di usare l'HTML semantico.
Anche il tag div gioca solo una piccola parte in una pagina ben strutturata.Non abusarne.Non dovresti averne bisogno così tanti se metti insieme correttamente il tuo codice HTML.Cose come elenchi, insiemi di campi, legende, etichette, paragrafi, ecc. possono sostituire gran parte di ciò per cui viene spesso utilizzato un div o uno span.Div dovrebbe essere utilizzato principalmente quando ha senso indicare un valore logico divsione e appropriato per layout aggiuntivi solo quando assolutamente necessario.Lo stesso vale per il tavolo;usalo quando hai dati tabulari, ma non altrimenti.
Quindi hai una pagina più semantica e non hai bisogno di così tante classi definite nel tuo CSS;puoi invece scegliere come target direttamente i tag.Forse la cosa più importante è che hai una pagina che otterrà un punteggio molto migliore con Google (aneddoticamente) rispetto alla tabella equivalente o alla pagina con molti div.Soprattutto ti aiuterà a connetterti meglio con una parte del tuo pubblico.
Quindi, se torniamo indietro e guardiamo la situazione in termini di tabella vs div, è mia opinione che siamo effettivamente arrivati al punto in cui div è sovrautilizzato e tabella è sottoutilizzata.Perché?Perché se ci pensi davvero, ci sono molte cose là fuori che rientrano nella categoria dei "dati tabulari" che tendono a essere trascurate.Risposte e commenti su questa stessa pagina web, per esempio.Sono costituiti da più record, ciascuno con lo stesso insieme di campi.Sono persino archiviati in una tabella del server SQL, per dirla tutta.Questa è la definizione esatta di dati tabulari.Ciò significa che un tag di tabella html sarebbe assolutamente una buona scelta semantica per impaginare qualcosa di simile ai post qui su Stack Overflow.Lo stesso principio vale anche per molte altre cose.Potrebbe non essere una buona idea utilizzare un tag table per impostare un layout a tre colonne, ma sicuramente va bene usarlo per griglie ed elenchi...tranne, ovviamente, quando puoi effettivamente usare i tag ol o ul (list).
Altri suggerimenti
Quando i dati che sto presentando sono, infatti, tabulari.
Trovo ridicolo che alcuni web designer abbiano utilizzato i div sui dati tabulari su alcuni siti.
Un altro uso che avrei sarebbe quello dei moduli, in particolare etichetta:coppie di caselle di testo.Questo potrebbe tecnicamente essere fatto nelle caselle div, ma è molto, molto più semplice farlo nelle tabelle, e si può sostenere che le coppie etichetta: casella di testo sono in realtà di natura tabellare.
Prima utilizzavo CSS puro, ma ho abbandonato questa ricerca a favore dell'approccio ibrido tabella/css come approccio più pragmatico.Ironicamente, è anche a causa dell'accessibilità.Hai mai provato a usare CSS su Sidekick?Che incubo!Hai mai visto come vengono visualizzati i siti Web basati su CSS sui nuovi browser?Gli elementi si sovrapponevano o semplicemente non venivano visualizzati correttamente, quindi dovevo disattivare il CSS.Hai mai provato a ridimensionare i siti Web basati su CSS?Hanno un aspetto orribile e spesso dannoso per i non vedenti se utilizzano le funzionalità di zoom nel browser!Se lo fai con le tabelle, si ridimensionano molto meglio.Quando si parla di accessibilità, trovo che molti non ne abbiano idea e questo mi dà fastidio perché io sono disabile e loro no.Hanno davvero lavorato con i ciechi?Il sordo?Se l'accessibilità è una delle principali preoccupazioni, perché diavolo il 99% dei video non ha sottotitoli?Molti puristi dei CSS utilizzano AJAX ma non riescono a rendersi conto che AJAX spesso rende i contenuti inaccessibili.
Pragmaticamente, va bene utilizzare una singola tabella come layout principale fintanto che fornisci le informazioni in un flusso logico se le celle sono impilate (qualcosa che vedresti sui cellulari).La teoria dei CSS sembra fantastica ma parzialmente realizzabile nella vita reale con troppi hack, qualcosa che è contrario agli ideali di "purezza".
Da quando utilizzo l'approccio CSS con tabelle, ho risparmiato tantissimo tempo nella progettazione di un sito Web e la manutenzione è molto più semplice.Meno hack, più intuitivo.Ricevo meno chiamate da parte delle persone che dicono "Ho inserito un div e ora sembra tutto incasinato!" E ancora più importante, assolutamente nessun problema di accessibilità.
Di solito ogni volta che non si utilizza la tabella per fornire un layout.
Tabelle -> dati
Div -> layout
(principalmente)
Nota:Al momento in cui è stata posta la domanda, esistevano ragioni pratiche per utilizzare le tabelle per alcuni scopi di layout.Questo non è più necessario a causa dei miglioramenti del browser, quindi ho aggiornato la risposta.
HTML <table>-elementi dovrebbero essere utilizzati quando i dati hanno logicamente una struttura bidimensionale.Se i dati possono essere strutturati in righe e colonne e puoi applicare in modo significativo le intestazioni sia alle righe che alle colonne, probabilmente disponi di dati tabulari.
Se hai solo una singola riga o una singola colonna di dati, non si tratta di dati tabulari: è solo contenuto lineare.Sono necessarie almeno due righe e due colonne prima che possano essere considerati dati tabulari.
Qualche esempio:
Utilizzo di tabelle per posizionare barre laterali e intestazioni/piè di pagina.Non si tratta di dati tabulari ma di layout di pagina.Qualcosa come la griglia CSS o il flexbox è più appropriato.
Utilizzo di tabelle per colonne in stile giornale.Non si tratta di dati tabulari: li leggeresti comunque in modo lineare.Qualcosa come le colonne CSS è più appropriato.
Farei una distinzione tra HTML per siti web pubblici (tabelle no-no-no, div sì-si-si) e HTML per applicazioni web semipubbliche o private, dove tendo a preferire le tabelle anche per l'impaginazione.
La maggior parte dei motivi rispettabili per cui "le tabelle sono cattive" sono solitamente un problema solo per i siti Web pubblici, ma non tanto un problema con le webapp.Se riesco a ottenere lo stesso layout e avere un aspetto più coerente tra i browser utilizzando una TABLE piuttosto che un complicato CSS+DIV, di solito vado avanti e approvo la TABLE.
Come molti utenti hanno già menzionato, è necessario utilizzare le tabelle per visualizzare i dati tabulari.
Sono state introdotte le tabelle HTML3.2 ecco il paragrafo pertinente delle specifiche sul loro utilizzo:
[tabelle] possono essere utilizzate per contrassegnare materiale tabellare o per scopi di layout...
Sono d'accordo con Thomas: la regola generale è che se ha senso su un foglio di calcolo, puoi usare una tabella.Altrimenti no.
Basta non usare le tabelle come layout della pagina, questo è il problema principale che le persone hanno con loro.
Posso vedere l'argomento per le tabelle per i moduli, ma c'è un'alternativa più carina...devi solo rimboccarti le maniche e imparare i CSS.
Per esempio:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
Puoi prendere quell'HTML e impaginare il modulo con etichette affiancate o etichette sopra le caselle di testo (il che è più semplice).Avere la flessibilità aiuta davvero.È anche meno HTML dell'equivalente tabella di entrambi.
Per alcuni eccellenti esempi di moduli CSS, dai un'occhiata a questi eccellenti esempi:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
Di solito opterò per le tabelle per visualizzare le informazioni sul tipo di modulo (nome, cognome, indirizzo, ecc.) in cui è importante il rivestimento di etichette e campi su più righe.DIV che utilizzo per il layout.
Ovviamente la tabella è avvolta in un DIV :)
Le tabelle sono state progettate per il contenuto tabellare, non per il layout.
Quindi, non sentirti mai in colpa se li usi per visualizzare i dati.
Utilizzo le tabelle in due casi:
1) Dati tabellari
2) Ogni volta che desidero che il mio layout si ridimensioni dinamicamente in base al suo contenuto
Se i tuoi dati possono essere disposti in una griglia bidimensionale, usa <table>.Se non può, non farlo.Utilizzando <table> per qualsiasi altra cosa è un hack (anche se spesso non offre alternative adeguate, soprattutto quando si tratta di compatibilità con i browser più vecchi). Non utilizzando <table> per qualcosa che chiaramente dovrebbe esserlo è altrettanto negativo. <div> E <span> non sono per tutto;infatti, essendo del tutto privi di significato a livello semantico, sono da evitare a tutti i costi in favore di alternative più semantiche.
A questo proposito, ho pensato Questo il sito era piuttosto divertente.
1) Per visualizzare dati tabellari.Un calendario è un esempio di dati tabulari che a prima vista non sono sempre evidenti.
2) Lavoro per un'azienda di fatturazione medica e quasi tutto il layout del nostro lavoro interno viene eseguito utilizzando CSS.Tuttavia, di tanto in tanto riceviamo moduli cartacei dalle compagnie assicurative che i nostri emittenti devono utilizzare e un programma li converte in un formato html che possono compilare e stampare tramite Intranet.Per essere sicuri che i moduli siano accettati è necessario che corrispondano molto fedelmente alla versione cartacea originale.Per questi è semplice ricorrere alle tabelle.
Le tabelle vengono utilizzate per i dati tabulari.Se ha senso inserirlo in un foglio di calcolo, utilizza una tabella.Altrimenti c'è un tag migliore da utilizzare come div, span, ul, ecc.
Credo solo contenuto tabellare.Ad esempio, se hai stampato una tabella di database o dati simili a un foglio di calcolo in HTML.
Se desideri avere un HTML semanticamente corretto, dovresti utilizzare le tabelle solo per i dati tabulari.
Altrimenti usi le tabelle per tutto ciò che vuoi, ma probabilmente c'è un modo per fare la stessa cosa usando divs e CSS.
@Marius:
I dati del layout sono tabulari?No, anche se era standard qualche anno fa, non lo è più adesso :-)
Un altro uso che avrei sarebbe quello dei moduli, in particolare etichetta:coppie di caselle di testo.Questo potrebbe tecnicamente essere fatto nelle caselle div, ma è molto, molto più semplice farlo nelle tabelle, e si può sostenere che le coppie etichetta: casella di testo sono in realtà di natura tabellare.
Tendo a dare all'etichetta una larghezza fissa o a visualizzarla sulla riga sopra.
@Jon Limjap
Per l'etichetta:casella di testo, né i div né le tabelle sono appropriati: <dl>lo sono
Un altro uso che avrei avuto perché sarebbero le forme, in particolare l'etichetta:coppie di caselle di testo.Questo potrebbe essere tecnicamente fatto nelle scatole DIV, ma è molto, molto più facile farlo nelle tabelle, e si può sostenere che l'etichetta: le coppie di caselle di testo sono in realtà di natura tabulare.
Lo vedo in una discreta quantità, soprattutto tra gli sviluppatori MS.E l'ho fatto parecchio in passato.Funziona, ma ignora alcuni fattori di accessibilità e best practice.Dovresti utilizzare etichette, input, fieldset, legende e CSS per impaginare i tuoi moduli.Perché?Perché è a questo che servono, è più efficiente e penso che l'accessibilità sia importante.Ma questa è solo la mia preferenza personale.Penso che tutti dovrebbero provarlo in questo modo prima di condannarlo.È veloce, facile e pulito.
Ogni volta che una pagina contenente tabelle viene caricata da qualsiasi browser, il browser impiega più tempo per visualizzare correttamente il tag.Laddove viene utilizzato il div, il browser impiega meno tempo poiché è più leggero.E inoltre possiamo applicare i CSS per far apparire i div come tabelle,
Le tabelle sono normalmente pesanti e i div sono leggeri.
È chiaro che i DIV vengono utilizzati per il Layout ma mi è capitato di essere "costretto" a utilizzare fogli di calcolo per eseguire un layout a griglia all'interno di una struttura div per questi motivi:
l'aggiunta di valori percentuali non ha permesso un corretto allineamento con il div, mentre gli stessi valori espressi sulle celle delle tabelle hanno dato il risultato atteso.
Quindi penso che le tabelle siano ancora utili non solo per i dati, ma anche per la situazione di cui sopra, inoltre, le tabelle sono ancora browser conformi al W3C e browser alternativi (per disabili ad esempio) le interpretano correttamente.
I div sono semplici divisions, non sono destinati a raggruppare sezioni della pagina collegate in senso semantico.Non hanno alcun significato implicito diverso da quello.
Le tabelle originariamente erano destinate a visualizzare dati scientifici, come i risultati di laboratorio sullo schermo.Dave Raggett certamente non intendeva che venissero utilizzati per implementare il layout.
Trovo che lo mantenga abbastanza chiaro nella tua mente se ricordi quanto sopra, se è qualcosa che normalmente ti aspetteresti di leggere in una tabella, allora quello è il tag appropriato, se è puro layout, quindi usa qualcos'altro per soddisfare le tue esigenze.
