Porteapertesulweb Social

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

Realizziamo una tabella con gli strumenti messi a disposizione dal plugin

costruiamo la tabella

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

La tabella si presenterà così

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>

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