Skip navigation.

Jamboo's Webs and Blogs

Share and Free Speech on line
International Webmasters Association.
demologia.it | aisam.it | anteremedizioni.it | iccastellucchio.gov.it | icsospiro.it
icpiadena.gov.it | www.iisghisleri-cr.gov.it | www.cptedadiotti.gov.it
archiviotommasoli.it | folkatlas.eu | dirittiacolori.it | odorisuonicolori.it
| RSS | categorie | blog | libri | recensioni | immagini | forum | Skype | per informazioni, consulenza e supporto scrivi a Mario Varini
Pagina principale » Dispense » Codice: Layout pagine, esempi pronti e download

Tabelle formato XHTML 1.1

Inserito da jamboo il Dom, 03/07/2005 - 22:37

Una corretta gestione delle tabelle richiede molta attenzione.

I sintetizzatori vocale dei sistemi assistivi sono particolarmente sensibili alla corretta scrittura del codice. Un tabella malformattata, priva di elementi indispensabili per una corretta lettura da parte dei sintetizzatori vocali costituisce un enorme ostacolo nella comprensione del contenuto.

La cella di intestazione generale è contenuta in una riga (tr). L'attributo 'colpspan' indica che questa cella di intestazione è collegata a tutte le colonne componenti la tabella, nel nostro caso 4.

L'attributo 'scope' con il valore 'colgroup' indica che questa cella di intestazione è riferita a tutte le colonne della tabella.

L'attributo 'scope' con il valore 'col' indica che questa cella di intestazione è riferimento di colonna.

L'attributo 'scope' con il valore 'row' indica che questa cella di intestazione è riferimento di riga.

Il sintetizzatore vocale dei sistemi assistivi pronuncerà il titolo indicando all'utente che la tabella si riferisce a quel preciso soggetto, ad ogni riga verranno lette per ogni cella le sispettive intestazioni di riga e colonna.

A questo punto stabiliamo che la tabella debba avere:

  • 4 colonne e 3 righe con i dati.
  • Una intestazione di tabella (didascalia)
  • Una intestazione riferita al gruppo di colonne (Soggetto)
  • Intestazioni di colonna
  • e i dati nelle celle
didascalia (testo libero)
Soggetto
colonna 1 colonna 2 colonna 3 colonna 4
testo riga 1 testo riga 1 testo riga 1 testo riga 1
testo riga 2 testo riga 2 testo riga 2 testo riga 2
testo riga 3 testo riga 3 testo riga 3 testo riga 3

Copia il codice seguente per creare una tabella per il numero di righe e di colonne desiderate personalizzando dadascalia, soggetto e contenuto delle intestazioni di colonna. 

  <table class="tabella" summary="Riepilogo tabella 1">
      <caption>
          didascalia (testo libero)
      </caption>
      <tbody>
          <tr class="dark">
              <th colspan="4" scope="colgroup" class="active">
              Soggetto
              </th>
          </tr>
          <tr>
              <th scope="col" class="active">colonna 1</th>
              <th scope="col" class="active">colonna 2</th>
              <th scope="col" class="active">colonna 3</th>
              <th scope="col" class="active">colonna 4</th>
          </tr>
          <tr>
              <td scope="row" class="active">testo riga 1 </td>
              <td class="active">testo riga 1 </td>
              <td class="active">testo riga 1 </td>
              <td class="active">testo riga 1 </td>
          </tr>
          <tr>
              <td scope="row" class="active">testo riga 2 </td>
              <td class="active">testo riga 2 </td>
              <td class="active">testo riga 2 </td>
              <td class="active">testo riga 2 </td>
          </tr>
          <tr>
              <td scope="row" class="active">testo riga 3 </td>
              <td class="active">testo riga 3 </td>
              <td class="active">testo riga 3 </td>
              <td class="active">testo riga 3 </td>
          </tr>
      </tbody>
  </table>

sali
» versione adatta alla stampa | accedi per inviare commenti | Invia questa pagina | letto 2397 volte |