Nei primi esempi di tabelle abbiamo usato l'attributo border="1" con lo scopo di visualizzare il bordo di una tabella.

Il problema dell'attributo border è che è deprecato in HTML 5, cioè se ne sconsiglia l'uso ed esso produce messaggi di errore nei validatori di codice. Infatti border specifica informazioni di tipo non logico, ma relative alla visualizzazione che devono essere affrontate con gli stili e i fogli stile CSS.

Una soluzione per realizzare una tabella con bordo compatibile con le specifiche HTML 5 è la seguente:

<table style="border-collapse: collapse">

<tr> <!-- INIZIO PRIMA RIGA --> 
<td style="border: 1px solid"> Prima cella della prima riga </td>
<td style="border: 1px solid"> Seconda cella della prima riga </td>
<td style="border: 1px solid"> Terza cella della prima riga </td>
</tr> <!-- FINE PRIMA RIGA --> 

<tr> <!-- INIZIO SECONDA RIGA --> 
<td style="border: 1px solid"> Prima cella della seconda riga </td>
<td style="border: 1px solid"> Seconda cella della seconda riga </td>
<td style="border: 1px solid"> Terza cella della terza riga </td>
</tr> <!-- FINE SECONDA RIGA --> 

</table>

La visualizzazione della precedente tabella è la seguente:

Si noti la maggiore complessità del codice necessario per gestire i bordi in HTML 5, compensato però da una maggiore flessibilità nell'indicare tutte le caratteristiche del bordo (spessore, colore etc).

In particolare osserviamo l'uso dell'attributo style applicato a tutte le celle della tabella allo scopo di definire il bordo di ogni cella:

<td style="border: 1px solid">

Il valore 1px indica lo spessore desiderato per il bordo (un pixel), mentre solid indica come deve essere visualizzato il bordo (in questo caso con una linea continua - per altre possibilità di bordo vedi la lezione sugli stili per i bordi). E' anche possibile indicare un colore per bordo, in questo modo:

<td style="border: 1px solid red">

E' anche possibile specificare un bordo diverso per ogni cella della tabella.

Si osservi infine lo stile applicato sull'elemento table:

<table style="border-collapse: collapse">

Lo scopo è quello di eliminare lo spazio presente fra i bordi di due celle adiacenti.

Se in una tabella non viene specificato il bordo, la tabella non viene visualizzata (tabella nascosta). Questo artificio serve per creare tabelle il cui scopo è ordinare testo e immagini su una pagina, senza che i bordi della tabella stessa siano visibili. Si consideri l'esempio seguente:

	Esempio di testo inserito in una cella di una tabella nascosta
uno due tre

Ci sono due immagini, un testo e una lista non numerata. Per disporre i 4 elementi è stata utilizzata una tabella nascosta di 2 righe e due colonne. La struttura della tabella è la seguente:

     <table width="80%" border="0" align="center">
       <tr>
         <td width="50%"><img src="../../immagini/problema.gif" alt="" width="38" height="54" /></td>
         <td>Esempio di testo inserito in una cella di una tabella nascosta </td>
       </tr>
       <tr>
         <td><ul>
           <li> uno </li>
           <li>due</li>
           <li>tre  </li>
         </ul></td>
         <td><img src="../../immagini/soluzione.gif" alt="" width="40" height="61" /></td>
       </tr>
     </table>

Attualmente l'uso di tabelle viene raccomandato solo per presentare i dati in forma tabellare. L'uso di tabelle nascoste per realizzare il layout di una pagina è deprecato e deve essere sostituito col posizionamento con i fogli stile.

L'uso degli stili per i bordi infine consente anche un controllo molto più fine e preciso dei bordi di una tabella, permettendo di definirne spessore, colore e altre proprietà.

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania