Perché non dovremmo usare <table> in un design?

41

Quali sono alcuni motivi chiari e logici per cui non dovremmo progettare siti Web con tabelle? Dove sono i vantaggi, cosa ha guidato questa idea nel settore? Quando va bene usare una tabella?

— Incognito
fonte

Ampiamente discusso su SO stackoverflow.com/questions/83073/…

— Gabriele Petrioli,

Google utilizza le tabelle stesse, ad esempio all'interno di AdWords. Con milioni di inserzionisti che registrano e lavorano con dati dinamici, è molto più facile codificare attorno a <table>una griglia CSS. Uso datatables.net per alcune applicazioni e puoi vedere un elenco di chi utilizza quel plugin jquery sul loro sito. Molti siti usano ancora le tabelle per buoni motivi. Uso solo le tabelle, tuttavia, quando lavoro con molti dati dinamici che devono essere ordinati per impaginazione di colonne, ecc., Ma non per i layout di pagina a cui è destinato CSS.

— Anagio,

71

1) Le tabelle non devono essere utilizzate per i layout di pagina perché sono:

Lento per il rendering in quanto il browser deve scaricare la maggior parte - se non tutta - della tabella per renderlo correttamente
Richiedono più HTML rispetto ai layout non di tabella, il che significa caricamento e rendering più lenti, nonché un maggiore utilizzo della larghezza di banda
Possono essere un incubo da mantenere in quanto possono diventare rapidamente complessi
Possono interrompere la copia del testo
Influiscono negativamente sugli screen reader e possono rendere inaccessibili i tuoi contenuti ad alcuni utenti
Non sono flessibili come usare il markup semantico corretto
Non sono mai stati pensati per essere utilizzati per i layout di pagina
Trasformare le tabelle in un layout reattivo è molto difficile da controllare

2) Utilizzare una tabella per i dati tabulari. Ecco a cosa servono le tabelle.

Vedi anche: Perché le persone creano tavoli con div?

— John Conde
fonte

1

Bene, quindi se ho una sezione sui dettagli di contatto per cui è OK avere una tabella, ma il layout grafico di una pagina è in DIV o qualcosa di simile a loro. Ho visto alcuni designer evitarli tutti insieme in aree che hanno dati tabulari e usano DIV.

— Incognito,

18

I designer che evitano del tutto le tabelle non sanno cosa stanno facendo. Hanno frainteso il significato di "non utilizzare le tabelle per i layout di pagina".

— John Conde

1

È stupido evitare del tutto le tabelle, ma ci sono alternative legittime alle tabelle per le informazioni di contatto. Un elenco di definizioni è una buona alternativa, in particolare quando si implementa una hCard: cagintranet.com/archive/…

— Lèse majesté

2

@Litso: dovresti leggere le specifiche del W3C DLprima di decidere a cosa serve o meno.

— Lèse majesté,

1

Esiste anche una posizione: tag CSS tabella per la creazione di layout basati su tabella senza inserirli in HTML. Esistono alcuni casi di nicchia in cui le tabelle sono ancora l'opzione migliore / più semplice per i layout. Dai un'occhiata a @ css-tricks.com/fluid-width-equal-height-columns per vedere cosa intendo.

— Evan Plaice,

8

Le tabelle sono per i dati tabulari, non per la progettazione. Le persone spesso fraintendono la motivazione alla base del rendere le pagine "senza tablature".

È errato utilizzare le tabelle per creare il layout. È necessario utilizzare altri elementi per il layout (div, elenchi, sezioni, articoli, intestazioni, piè di pagina, lati, ecc.). E puoi ottenere grandi effetti con HTML / CSS minimi (lasciando il tuo codice semanticamente significativo, leggero e facile da mantenere).

Naturalmente, i dati tabulari dovrebbero essere all'interno di un elemento tabella. Se vuoi, puoi migliorare anche la semantica dei tavoli aggiungendo thead, tfoot, tbody, th, didascalia ecc. Tutti quegli elementi sono pensati per essere usati con i tavoli e, credimi, possono rendere il tuo tavolo molto più auto-descrittivo .

Quindi, la cosa è, non andare con la progettazione basata su tabella e utilizzare qualsiasi soluzione HTML / CSS adatta. Inizia dal markup semantico HTML, quindi crea il design con CSS. Questo dovrebbe mantenere chiunque al sicuro. Usa questo come una regola empirica.

— Dave
fonte

3

Le tabelle dovrebbero contenere dati e non elementi di progettazione.

— sdadffdfd
fonte

3

Le tabelle devono essere utilizzate solo durante la visualizzazione di dati tabulari. Altrimenti, di solito sono una cattiva scelta per la visualizzazione.

— Chris Ballance
fonte

Perché il downvote?

— Chris Ballance,

0

La vera causa per non usare le tabelle è:

Il layout predefinito di una tabella è: table-layout:fixed

Questo dice al browser di analizzare la tabella e correggere le celle per contenere gli elementi al loro interno, il che richiede del tempo. (ecco perché le tabelle sono così buone per i dati complessi)

In conclusione : il rendering della tabella verrà eseguito dopo il rendering di tutto il contenuto al suo interno, al contrario quando si utilizzano, ad esempio, elementi DIV.

— YardenST
fonte

-3

Uso i tavoli per la struttura del web design in un liquido misto a fisso e so che molti dicono che i tavoli sono per nessuno, altri dicono che sono per i ragazzi della vecchia scuola, quelli che dicono sempre che i DIV sono i migliori, ma la verità è che i tavoli sono migliori per qualcosa e i DIV per altra cosa.

Cosa c'è di meglio di una <br>o di un <p></p>? La stessa cosa

Io e i miei vecchi tavoli nel mio nuovo web design 2015 possiamo dare il calcio a chiunque abbia il mio amichevole mobile 100% di larghezza mescolato con 2 colonne laterali da 200 px ciascuno.

Ovviamente all'interno dei tavoli è brutto mettere sempre più tavoli, ecco dove DIVS è utile. Le tabelle possono fare cose che i div non possono fare e le div possono fare cose che le tabelle non possono fare.

Quelli che dicono che il layout predefinito della tabella è fisso? Ti faccio un esempio

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Vedi il potenziale ora? Dai un'occhiata ad esso su PC e cellulare. Ah sì e non ho nemmeno bisogno del bootstrap.

Ora per fare lo stesso con i div devi scrivere molto codice CSS per visualizzare allineare float e schifezze. Chi ha scritto meno codice? Me! Di cosa hanno bisogno i clienti? Un ragazzo che termina una pagina in 1 anno o in 1 mese?

Ora consente di migliorare il design con i div

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Così bello un layout di design a 5 colonne che utilizza div e tabelle.

La tua risposta è: entrambi funzionano meglio insieme ed è più veloce e staranno bene su qualsiasi design anche su TV e piccoli telefoni cellulari.

— Rodrigo Santiaborg
fonte