Tabelle -> div: spiegatemi

**Mich_** · 24-06-2009, 10:51

Originariamente inviato da k.b
Mi spieghi in che modo le tabelle compromettono l'accessibilita'?

Ci sono tag che hanno in dote un significato semantico.

Ad esempio un titolo ( <h1>, <h2, ... ) porta con se il fatto che quanto contenuto dentro il tag e` una cosa importante, e se uno deve fare un riassunto della pagina, potrebbe basarsi solo sui tag <hN>.
La stessa cosa per le tabelle: una tabella e` fatta per inserire dati tabellari, con relazione di riga e colonna.

Tieni presente che non tutti vedono la pagina con gli occhi: ci sono sistemi e persone che "vedono" la pagina usando tecniche diverse: e non solo le persone cieche, anche i motori sono ciechi, ed usano i tag per capire le relazioni fra i vari elementi della pagina, e capirne l'importanza. Ma non solo: anche chi naviga con display piccoli (palmari o cellulari) non puo` visualizzare le tabelle per intero: deve usare le metainformazioni date dai tag per orientarsi all'interno dei contenuti.

Quindi se c'e` una tabella uno va a cercare di capire a cosa servono le righe e le colonne, poi cella per cella la inquadra dentro il sgnificato di ciascuna riga e colonna. E` chiaro che se una pagina non rispetta questi significati semantici, il tutto non ha senso per chi non vede la pagina intera, e fa fatica a capire: la persona cieca o che naviga con palmare non riese a capire, il motore di ricerca penalizza la pagina (o non la indicizza).

**k.b** · 24-06-2009, 12:31

Originariamente inviato da fcaldera
Non è affatto logica perchè le tabelle vanno usate per i dati realmente tabellari, mentre le division <div> sono più indicate per strutture generiche

Si questo e' chiaro, viene ripetuto di continuo, pero' a parte "si fa cosi' perche' si" l'unica motivazione sensata e' quella che ha scritto Mich_ sull'accessibilita' (non sapevo ci fossero tutti questi problemi, visto che spesso testo i miei layout anche con browser testuali)

Non è più leggibile, perchè più annidi contenuti e tabelle dentro altre tabelle, più diventa
impossibile capire la gerarchia degli elementi.

Perche' con i div non fai annidamenti? Vedi i due codici postati in questa pagina, ci sono 4 livelli di annidamento con anche div vuoti (semantica di un div vuoto...?)

Non è più semplice, perchè le tabelle - a differenza delle division che sono contenitori neutri - sono rese in maniera molto disomogenea tra i vari browser i quali applicano bordi, stili di font, allineamenti e spaziature che magari de default non si vorrebbero.

Beh ma non e' che se uno usa una tabella allora si dimentica dei CSS: bordi, font, allineamenti e spaziature vengono definiti con le tabelle come coi div

Inoltre un layout tableless è più corto da scrivere, in termini di codice, del 20%/60% rispetto alle tabelle e ti fornisce una flessibilità di posizionamento che le tabelle non possono garantirti

Dici? Confronta i due esempi postati sopra con

codice:

<html>
<head>
<style type="text/css">
#container {
	border-collapse: collapse;
	border: 1px solid black;
	width: 900px;
}

#menu {
	width: 200px;
	border: 1px solid black;
}

#header {
	text-align: center;
	border: 1px solid black;
}

#footer {
	text-align: center;
	border: 1px solid black;
}
</style>	
</style>
</head>

<table id="container" align="center">
<tr><td id="header" colspan="2">HEAD</td></tr>
<tr>
	<td id="menu">MENU</td>
	<td id="content">CONTENT long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating </td>
</tr>
<tr><td id="footer" colspan="2">FOOTER</td></tr>
</table>
</html>

e vedi quale e' piu' lungo/annidato/elaborato

**k.b** · 24-06-2009, 12:48

Soprattutto la differenza e' che io ho dovuto specificare solo due width, che sono le uniche necessarie a stabilire il layout, invece di doverne scrivere un sacco facendo anche somme e sottrazioni per far tornare le cose (peraltro una delle cose che mi fanno impazzire e' che il padding nei div viene contato per la dimensione... il padding non dovrebbe essere solo interno??). E' questo che intendevo con "piu' logico".

L'approccio div - come dicevo - mi sembra "ok dai tiriamo e spingiamo a suon di pixel finche' le cose non si allineano bene".

**fcaldera** · 24-06-2009, 12:58

scusa k.b. : in tutte le considerazioni che ho riportato dò per scontato che il codice che produci sia perfettamente validato.

Il tuo ultimo esempio sarà anche corto (e solo nel caso specifico, visto che i layout veri sono molto più complessi) ma il validatore non te lo fa passare per cui è improponibile a livello professionale

tralasciando header scarno e doctype mancante, inizia a scrivere un codice tabellare completo e validato.

codice:

<table caption="...">
   <colgroup>
      <col>...</col>
      ...
      <col>...</col>
   </colgroup>

   <thead>
      <tr>
          <th>...</th>
          ...
          <th>...</th>
   </thead>
   
   <tbody>
       <tr>
           <td>...</td>
           ...
           <td>...</td>
       </tr>
       ...
   </tbody>

</table>

con i <div> non hai bisogno di tutto questo markup (che serve a ben altri scopi)

Circa il resto, il discorso non cambia di una virgola,

io ho espresso in due righe quello che Mich ha spiegato egregiamente

E' vero che lavorando con le tabelle dei CSS non ci si dimentica, ma resta il fatto che se voglio azzerare lo stile alle tabelle devo fare lavoro extra che con i div non sono costretto a fare

Poi : fermo restando il codice valido per una tabella che ho postato su, prova a fare un template (solo gabbia con dimensioni, niente tipografia, padding o altro) validato per l'XHTML 1.0 strict che si veda identicamente almeno in 5 browser diversi.

Poi fallo a div e guarda quanto codice in meno devi scrivere.

**k.b** · 24-06-2009, 12:59

Originariamente inviato da Mich_
Ci sono tag che hanno in dote un significato semantico.

Ad esempio un titolo ( <h1>, <h2, ... ) porta con se il fatto che quanto contenuto dentro il tag e` una cosa importante, e se uno deve fare un riassunto della pagina, potrebbe basarsi solo sui tag <hN>.
La stessa cosa per le tabelle: una tabella e` fatta per inserire dati tabellari, con relazione di riga e colonna.

Tieni presente che non tutti vedono la pagina con gli occhi: ci sono sistemi e persone che "vedono" la pagina usando tecniche diverse: e non solo le persone cieche, anche i motori sono ciechi, ed usano i tag per capire le relazioni fra i vari elementi della pagina, e capirne l'importanza. Ma non solo: anche chi naviga con display piccoli (palmari o cellulari) non puo` visualizzare le tabelle per intero: deve usare le metainformazioni date dai tag per orientarsi all'interno dei contenuti.

Quindi se c'e` una tabella uno va a cercare di capire a cosa servono le righe e le colonne, poi cella per cella la inquadra dentro il sgnificato di ciascuna riga e colonna. E` chiaro che se una pagina non rispetta questi significati semantici, il tutto non ha senso per chi non vede la pagina intera, e fa fatica a capire: la persona cieca o che naviga con palmare non riese a capire, il motore di ricerca penalizza la pagina (o non la indicizza).

Quello che dici e' molto interessante, ma ci sono dettagli che non mi sono chiari. Che differenza c'e' per un device con display piccolo se un layout e' largo 900px in un div o in una table? 900px sono sempre 900px no?

Per il resto mi fai esempi pratici di attributi che garantiscono significato agli elementi, utilizzabili coi div e non con le tabelle?

**lloyd27** · 24-06-2009, 13:08

Premettendo che sono programmatore PHP che a tempo libero lavora anche con la parte grafica, quindi è possibile che scriva ca***te

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
  <head>
    <title></title>
    <style type="text/css">
    *
    {
      margin: 0px;
      padding: 0px;
    }
    .clearer
    {
      clear: both;
    }
    #container
    {
      width: 900px;
      margin: 0px auto;
      border: 1px solid #444;
    }
    #sidebar
    {
      width: 200px;
      float: left;
    }
    #content
    {
      width: 690px;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="sidebar"></div>
      <div class="clearer"></div>
      <div id="footer"></div>
  </body>
</html>

Scritto abbastanza a caso, senza neanche rileggerlo bene... Poi te lo sistemi come vuoi...
Intanto hai il vantaggio che non specifici colspan, che riguarda la presentazione, all'interno del codice html.
Poi puoi posizionare il contenuto prima della navigazione, così i tipi della sezione posizionamento sono contenti.
Non credo di aver scritto più codice, l'unica effettiva aggiunta è un clearer con rispettiva regoletta css...
Inoltre i bordi delle tabelle sono una delle cose più fastidiose in assoluto da gestire, quelli dei div sono paradiso in confronto...

Semanticamente è più corretto, in quanto come hanno detto altri, le tabelle servono ad altro....

Poi vedi tu

**k.b** · 24-06-2009, 13:13

Originariamente inviato da fcaldera
Poi : fermo restando il codice valido per una tabella che ho postato su, prova a fare un template (solo gabbia con dimensioni, niente tipografia, padding o altro) validato per l'XHTML 1.0 strict che si veda identicamente almeno in 5 browser diversi.

Scusa, ponevo l'attenzione sul problema specifico tralasciando la validazione. Versione XHTML 1.0 strict:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Layout di prova</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#container {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	border: 1px solid black;
	width: 900px;
}

#menu {
	width: 200px;
	border: 1px solid black;
}

#header {
	text-align: center;
	border: 1px solid black;
}

#footer {
	text-align: center;
	border: 1px solid black;
}
</style>	
</head>

<body>
<table id="container">
<tr><td id="header" colspan="2">HEAD</td></tr>
<tr>
	<td id="menu">MENU</td>
	<td id="content">CONTENT long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating long text repeating </td>
</tr>
<tr><td id="footer" colspan="2">FOOTER</td></tr>
</table>

</body>

</html>

Purtroppo al momento non ho 5 browser con cui provarlo

**k.b** · 24-06-2009, 13:19

Originariamente inviato da lloyd27
Premettendo che sono programmatore PHP che a tempo libero lavora anche con la parte grafica, quindi è possibile che scriva ca***te

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
  <head>
    <title></title>
    <style type="text/css">
    *
    {
      margin: 0px;
      padding: 0px;
    }
    .clearer
    {
      clear: both;
    }
    #container
    {
      width: 900px;
      margin: 0px auto;
      border: 1px solid #444;
    }
    #sidebar
    {
      width: 200px;
      float: left;
    }
    #content
    {
      width: 690px;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="sidebar"></div>
      <div class="clearer"></div>
      <div id="footer"></div>
  </body>
</html>

Scritto abbastanza a caso, senza neanche rileggerlo bene... Poi te lo sistemi come vuoi...
Intanto hai il vantaggio che non specifici colspan, che riguarda la presentazione, all'interno del codice html.
Poi puoi posizionare il contenuto prima della navigazione, così i tipi della sezione posizionamento sono contenti.
Non credo di aver scritto più codice, l'unica effettiva aggiunta è un clearer con rispettiva regoletta css...
Inoltre i bordi delle tabelle sono una delle cose più fastidiose in assoluto da gestire, quelli dei div sono paradiso in confronto...

Semanticamente è più corretto, in quanto come hanno detto altri, le tabelle servono ad altro....

Poi vedi tu

Interessante layout, molto piu' semplice e leggibile. Pero' la cosa che trovo ridondante, cioe' inutile aggiunta, e' la necessita' di dare la larghezza al div "content", che peraltro varia a seconda del padding (cosa secondo me sbagliata).

Poi non capisco il problema dei bordi con le tabelle, mi aggiusti questo tuo esempio mettendo il bordo sotto l'header, sopra il footer e uno verticale a separare menu dal content?

Grazie

**lloyd27** · 24-06-2009, 14:17

Originariamente inviato da k.b
Interessante layout, molto piu' semplice e leggibile. Pero' la cosa che trovo ridondante, cioe' inutile aggiunta, e' la necessita' di dare la larghezza al div "content", che peraltro varia a seconda del padding (cosa secondo me sbagliata).

Poi non capisco il problema dei bordi con le tabelle, mi aggiusti questo tuo esempio mettendo il bordo sotto l'header, sopra il footer e uno verticale a separare menu dal content?

Grazie

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
  <head>
    <title></title>
    <style type="text/css">
    *
    {
      margin: 0px;
      padding: 0px;
    }
    .clearer
    {
      clear: both;
    }
    #container
    {
      width: 900px;
      margin: 0px auto;
      border: 1px solid #444;
    }
    #sidebar
    {
      width: 200px;
      border-right: 1px solid #444;
      float: left;
    }
    #content
    {
      width: 690px;
      float: right;
    }
    
    #header
    {
       border-bottom: 1px solid #444;
    }
    #footer
    {
       border-top: 1px solid #444;
    }
    
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="sidebar"></div>
      <div class="clearer"></div>
      <div id="footer"></div>
  </body>
</html>

Con le tabelle bisogna fare attenzione a border-collapse, all'attributo border del tag html, e mille mila altre cose.. Con i div è più semplice...

Per il discorso della ridondanza... Ok, però quando entri nella mentalità capisci che ha un suo perché, e questo serve a realizzare layout complessi che con le tabelle non sarebbero possibili, o almeno, molto più difficili... Per i layout cosiddetti a grigilia le tabelle sono accettabili come soluzione, però per altri sono troppo limitate e richiedono markup aggiuntivo, quindi si abbracciano i div da subito e morta lì...

**Mich_** · 24-06-2009, 15:22

Quello che dici e' molto interessante, ma ci sono dettagli che non mi sono chiari. Che differenza c'e' per un device con display piccolo se un layout e' largo 900px in un div o in una table? 900px sono sempre 900px no?

Per il resto mi fai esempi pratici di attributi che garantiscono significato agli elementi, utilizzabili coi div e non con le tabelle?

Tutti i tag HTML (tranne due) hanno un contenuto semantico proprio. Ho fatto prima l'esempio dei titoli, delle tabelle ne stiamo parlando, ma anche gli altri sono realizzati per fare qualcosa di specifico.
Gli unici che non hanno tale contenuto sono <div> e <span> che sono dei semplici contenitori, il primo di tipo blocco ed il secondo di tipo inline.

Tieni presente che i browser interpretano il contenuto semantico ed hanno anche dei default per la visualizzazione: se non rispetti tale semantica i vari default portano solo confusione.
Ed i browser possono anche sostituire la formattazione proposta dai programmatori con una loro formattazinoe propria, che magari e` utile all'utente per capire meglio: caso classico e` la sostituzione dei colori di sfondo e primo piano e dei font, ma gli uomini non sono tutti uguali, e qualcuno e` anziano, qualcuno ci vede poco, qualcuno capisce solo cio` che vuole, ... I browser possono essere programmati per aiutare queste "disabilita`" (vedi nota), ma tali opzioni sono valide solo se le pagine sono formattate in modo corretto.

Con un display piccolo, non visualizzi la pagina intera, ma la devi visualizzare a pezzi.
Ora, una tabella non e` spezzabile, eventualmente puoi visualizzarne solo un pezzetto, ma devi sempre vedere la riga e la colonna di intestazione. I browser moderni sono in grado di fare questo in modo automatico (purche` si siano usati i tag in modo corretto), ma questo discorso non ha senso se usi le tabelle per formattare.
Invece in una formattazione standard realizzata con i <div>, visualizzi un blocco alla volta: se i blocchi sono stati realizzati seguendo la logica, ciascun blocco ha una sua indipendenza.
Ad esempio visualizzerai l'header e ti fai un'idea del titolo e motivazioni della pagina, poi visualizzerai il menu (che puo` interessarti o no a seconda delle circostanze), poi visualizzerai il contenuto, che se e` stato realizzato in modo intelligente (ad esempio con formattazione fluida) verra` visto in tutta la sua larghezza, cosi` che sia necessario il solo scroll verticale, e via dicendo.

Nota: disabilita` e` un termine da eliminare dal vocabolario: qui l'ho usato solo per farmi capire, ma non e` il termine corretto; qualcuno di molto autorevole proponeva di usare il termine "temporaneamente abile" per designare coloro che sono sani, tenendo pero` presente che a tutti in qualche momento capitera` di avere qualche forma di disabilita`, per lo meno tutti invecchiamo (quelli fortunati che non muoiono prima), ma a molti e` capitato di avere un braccio ingessato e non poter usare la tastiera o il mouse ... E non tutti sono comodi sulla sedia con il monitor alla giusta distanza dagli occhi per la lettura ottimale.

Discussione: Tabelle -> div: spiegatemi

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio