da

Costruire tabelle accessibili con il nuovo Tiny MCE

18 Luglio 2014 in Senza categoria

Come rendere accessibile una tabella utilizzando la nuova versione del plugin TinyMCE Advanced

Realizziamo una tabella con gli strumenti messi a disposizione dal plugin

nuova tab1

costruiamo la tabella

tab2

Inseriamo i dati, da “tabella” è possibile aggiungere o eliminare righe, dividere o unire celle

La tabella si presenterà così

tab4

Vediamo adesso con piccoli interventi in html come rendere accessibile la tabella e colorare le righe

Di seguito la stessa tabella in html:

<table border=”0″ cellspacing=”0″ cellpadding=”0″><caption>orario di funzionamento plessi</caption>

<tbody>

<tr>

<td>ordine</td>

<td>sede</td>

<td>orario di funzionamento</td>

<td>giorni</td>

</tr>

<tr>

<td>infanzia</td>

<td>Ameglia</td>

<td>8.00 – 16.00</td>

<td>dal lunedì al venerdì</td>

</tr>

<tr>

<td rowspan=”2″>primaria</td>

<td rowspan=”2″>Fiumaretta</td>

<td>8.20-16.05</td>

<td>lunedì-mercoledì</td>

</tr>

<tr>

<td>8.20-12.40</td>

<td>martedì-giovedì-venerdì</td>

</tr>

<tr>

<td rowspan=”2″>secondaria </td>

<td rowspan=”2″>Arcola </td>

<td>8.20-12.40</td>

<td>lunedì-martedì-giovedì-sabato</td>

</tr>

<tr>

<td>8.00-16.00</td>

<td style=”text-align: left;”>mercoledì-venerdì (tempo prolungato)</td>

</tr>

</tbody>

</table>

tab3

L’attributo <caption> equivale alla didascalia della tabella,cioè il titolo che è già presente nelle funzionalità del nuovo plugin; lo stesso vale per l’attributo <td rowspan= “2”>, cioè equivale ad “unisci celle” (il 2 in questo caso indica il numero delle colonne che la cella occupa).

Inseriamo il sommario: l’attributo <summary> descrive la tabella

il tag <th> serve per intestazione di cella

il tag <tr class=”tdalt”> per colorare la riga di bianco (in questo caso ho alternato le righe pari)

Selezionati gli attributi da inserire

<table summary=”orario di funzionamento, ordine,sede,giorni” border=”0″ cellspacing=”0″ cellpadding=”0″><caption>orario di funzionamento plessi</caption>

<tbody>

<tr><th>ordine</th><th>sede</th><th>orario di funzionamento</th><th>giorni</th></tr>

<tr class=”tdalt”>

<td>infanzia</td>

<td>Ameglia</td>

<td>8.00 – 16.00</td>

<td>dal lunedì al venerdì</td>

</tr>

<tr>

<td rowspan=”2″>primaria</td>

<td rowspan=”2″>Fiumaretta</td>

<td>8.20-16.05</td>

<td>lunedì-mercoledì</td>

</tr>

<tr class=”tdalt”>

<td>8.20-12.40</td>

<td>martedì-giovedì-venerdì</td>

</tr>

<tr>

<td rowspan=”2″>secondaria</td>

<td rowspan=”2″>Arcola</td>

<td>8.20-12.40</td>

<td>lunedì-martedì-giovedì-sabato</td>

</tr>

<tr class=”tdalt”>

<td>8.00-16.00</td>

<td >mercoledì-venerdì (tempo prolungato)</td>

</tr>

</tbody>

</table>

Il risultato è questo

tab5

Lascia una risposta

Devi essere loggato per inviare un commento.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.