& Lt; div > element invece di < table > ;?

Question

Duplicato di:

• Perché non utilizzare le tabelle per il layout in HTML?
• DIV & # 8217; s vs Tables o CSS vs. Being Stupid

---

Ultimamente si è parlato molto piuttosto di usare div o tag di tabella per rendere le pagine più malvagie del browser. Perché div è meglio?

Answer 1

alcuni motivi:

1) div è più semanticamente corretto nella maggior parte dei casi. le persone che codificano i loro siti nella struttura delle tabelle non usano le tabelle per quello per cui sono state create, ovvero i dati tabulari. i div rappresentano una "divisione" o una sezione della pagina, quindi inserire gli articoli in div è più corretto.

2) i div sono più flessibili e più facili da modellare e gestire. non devi scrivere < table > < tr > < td > testo qui < / td > < / tr > < / table > ogni volta che vuoi dire qualcosa quando puoi semplicemente scrivere < div > Text qui < / div > invece. puoi aggiungere hook CSS (cioè classi o elementi) sia alle tabelle che ai div, ma con i div è infinitamente più flessibile.

3) i siti strutturati in tabelle sono semplicemente brutti :)

Answer 2

Il punto chiave qui li sta usando per il layout. Non c'è niente di sbagliato nelle tabelle per dati tabulari, intendiamoci. Ecco a cosa servono.

Ma quando usi le tabelle per il layout crei una struttura di pagina molto rigida che di solito non gioca bene con diverse dimensioni dello schermo, agenti utente (pensa ai browser mobili o agli screen reader per i non vedenti. Soprattutto in quest'ultimo caso sei distruggere qualsiasi ordine in cui il contenuto deve essere letto per l'utente). Sfortunatamente, le tabelle sono ancora uno dei meccanismi più robusti per la stesura di una pagina, poiché ci sono implementazioni difficilmente diverse e funzionano in modo impeccabile per oltre un decennio: qui i CSS sono una questione completamente diversa.

Ma fondamentalmente si riduce a questo:

Tabelle

• viola la distinzione di contenuto e presentazione
• sono ingombranti e non mantenibili a lungo termine, specialmente quando si tenta di modificare il layout di più pagine in modo simile
• non hanno un forte significato semantico, che è importante per le persone con disabilità che possono fare affidamento solo sul testo ad alta voce. Le tabelle vengono lette qui riga per riga, colonna per colonna che non è quasi sempre molto utile nei layout basati su tabelle

Layout CSS

• è più difficile da ottenere (almeno per la presentazione)
• consente (a volte) una netta separazione tra contenuto e presentazione. Nota che talvolta devi utilizzare più elementi contenitore in HTML per consentire il funzionamento di alcuni layout e stili poiché CSS ha alcune limitazioni
• consente un migliore significato semantico del markup sottostante iff che non usi ciecamente < div > e < span > . Ci sono molti tag che hanno un significato e dovrebbero essere usati come tali. Ad esempio, non utilizzare < div class = " header1 " > quando potresti usare < h1 > .

Answer 3

Perché una tabella trasmette un significato semantico - essendo che attualmente stai visualizzando dati tabulari proprio come h1 significa che hai un'intestazione. Quindi, se usi le tabelle per formattare il tuo output, stai fuorviando l'interpretazione della semantica del tuo codice.

Questo può ad esempio portare a problemi di accessibilità per le persone che usano uno screen reader.

Answer 4

Ecco i pro & amp; contro di div-based & amp; design basato su tabella .

Answer 5

L'uso di div è meglio dell'uso di table a causa del facile controllo di in the design e può essere un contenitore per i controlli rispetto a table e la tabella viene utilizzata principalmente per raggruppare i dati con una struttura simile, quindi il design è per questa attività ma div è considerato come contenitore principalmente rispetto alla tabella. Ho trovato la differenza tra quando raccolgo molti controlli e nel posso controllare il contenitore ma nella tabella mi sono confuso perché devo inserire l'interno e il suo ciclo l'uno dentro l'altro.

Answer 6

la maggior parte delle persone continua su come la tabella dovrebbe essere utilizzata solo per i dati e introduce un problema di prestazioni quando lo si utilizza per scopi di layout. Inoltre, dovrebbe essere più flessibile perché puoi creare < div > flusso a sinistra, flusso a destra e flusso altrove.

Tuttavia, IMHO non vale la pena. Soprattutto quando hai colonne di controlli che dovrebbero allinearsi correttamente con le loro etichette corrispondenti, ci vuole solo troppo tempo per allineare le cose correttamente.

Answer 7

L'uso delle tabelle per il layout era rivoluzionario per il web design, ma era quindici anni fa e non c'erano altre alternative. È a causa di questa storia che le tabelle sono persino considerate per il layout oggi.

Il layout basato su CSS è molto più flessibile del layout basato su tabella. Ci sono ancora alcune cose che è più facile da realizzare con le tabelle, ma d'altra parte ci sono molte cose che sono molto facili da fare con i CSS che sono molto complicate o impossibili da fare con le tabelle.

Answer 8

Ti dico i miei principali motivi personali per l'utilizzo di div:

• Le tabelle hanno solo una griglia statica mentre i div sono dinamici: La prima riga di una tabella definisce tutti i col (come in MS Excel). Nelle righe successive puoi semplicemente combinare quelle colonne ma non puoi cambiare il layout di base che hai definito nella tua prima riga. I div sono dinamici: puoi creare un patchwork, lasciando che i div si sovrappongano o lasciano spazio tra loro. Tutto quello che vuoi. Non sei obbligato a pensare in file. Sei libero. Molta più flessibilità.

• Le tabelle causano problemi di rendering e incompatibilità tra browser: Le tabelle non sembrano sempre identiche. Ogni browser offre una propria interpretazione della tabella e del suo contenuto. Quindi, molte sorprese spiacevoli. Un browser ti mostra il tuo testo normale come grassetto. Un altro browser offre alla tua tabella un margine maggiore o minore rispetto ad altri elementi HTML, quindi le tabelle non sono ben posizionate. Sono ore di lavoro per risolvere questi problemi con soluzioni alternative complicate. I div sembrano sempre uguali in tutti i browser. Anche IE (che è noto come piantagrane per i programmatori web) sta causando meno problemi se si utilizzano i div.

• Il rendering dei div è più veloce: I div si caricano più velocemente delle tabelle. Navigazione più veloce tra le pagine. Aspetto migliore.

Spero che sia d'aiuto. Cin cin.

Answer 9

Sto usando CSS e tabelle e talvolta DIV, ma le tabelle sono così complete! E sono così belli in Dreamweaver, Frontpage ... È così difficile rinunciare alle tabelle, ma sembra che lo farò, perché è necessario che le mie pagine vengano caricate più velocemente!