TABLE, l'elemento base su cui milioni di designer e sviluppatori basano la formattazione delle loro applicazioni web, sfruttate e annidiate in migliaia di modi diversi per ottenere effetti grafici sempre diversi.
In realta questo elemento base dell'html ha come scopo un più logico significato, intabellare e rendere disponibili semplicemente dati tabellari, cioè dati che di logica rappresenteremmo naturalmente dentro una tabella (pensiamo allo stranoto Microsoft Excel).
In questo articolo tratterò tutte le potenzialità di sviluppo standard e usuali per le tabelle applicabili praticamente con i browser attuali, in modo da comprendere com'è possibile sfruttare al meglio questi elementi e scoprendo come spesso si può risparmire molto lavoro lato server e molti annidiamenti.
Attualmente il 90% degli sviluppatori web utilizza le tabelle nel modo in cui si
sono diffuse durante la guerra dei browser, generando spesso codice di per se
inquinato da molti attributi proprietari.
Un esempio di questo codice può essere questo:
<table border="1" align="center" cellpadding="5" cellspacing="3"
width="50%" height="250" bgcolor="#999999" bordercolor="red"> <tr>
<td colspan="2" align="center" height="50">testo</td> </tr>
<tr> <td bgcolor="#cccccc">testo</td> <td valign="bottom"
rowspan="2" height="200">testo</td> </tr> <tr> <td
background="http://www.w3.org/TR/recbg.jpg">testo</td> </tr>
</table>
dal quale otteniamo
questo risultato.
Questo codice è la dimostrazione pratica dell'uso di tabelle a scopo
formattativo, visto che lo stesso codice della tabella presenta diverse
informazioni inesistenti tra gli standard (bordercolor, ecc...) ma implementate
comunque nei vari browser.
Inoltre la struttura sfruttata della tabella è ridotta ai minimi termini con
attributi che determinano solo righe e colonne e la loro spaziatura.
Questa soluzione pur essendo molto usata è tutto ciò che non andrebbe fatto con
le tabelle per ottenere strutture crossbrowser, quindi dal prossimo esempio
ripartiamo dall'HTML 3.2.
La versione 3.2 dell'HTML comprendeva già una immense flessibilità nelle tabelle che permettevano di identificare già molto bene i dati tabellari, inoltre questo linguaggio risulta implementato completamente in praticamente tutti i browser esistenti oggigiorno.
Un uso completo delle tabelle nella versione 3.2 ci permetteva di ottenere un
codice di questo livello:
<table border="1" align="center" cellpadding="5" cellspacing="3"
width="50%"> <caption>descrizione tabella</caption> <tr>
<th>Titolo colonna</th> <th>Titolo colonna</th> <td
nowrap rowspan="2"> testo testo testo testo testo testo testo testo testo
testo testo testo </td> </tr> <tr> <td
colspan="2">testo</td> </tr> <tr> <td
align="right">testo</td> <td valign="top">testo</td>
<td height="100">testo</td> </tr> </table>
dal quale otteniamo
questo risultato.
Questo codice valido introduce sul modo classico di lavorare con le tabelle un paio di elementi poco sfruttati ma molto logici quando si usano dati tabellari e che servono a identificare meglio le parti della tabella o ad ottenere alcuni effetti ottici.
Questi elementi poco usati sono CAPTION, TH e NOWRAP.
Nell'HTML
4.0
l'attenzione sulle tabelle si è spostata dal lato formattazione al lato logico
e sono state implementate una miriade di proprietà ed elementi per dare un
significato più logico alle tabelle stesse.
Purtroppo non tutti gli attributi che esistono nella versione 4.0 sono
implementati in tutti i browser ma permettono un uso estremo dei dati stessi a
livello logico all'interno delle tabelle inoltre questi attributi o elementi
sono ereditati dal mondo xml e xhtml e quindi il loro supporto in futuro si
espanderà sempre di più.
Un uso completo delle tabelle nella versione 4.0 ci permette di ottenere un
codice di questo livello:
<table border="1" frame="hsides" rules="rows" cellpadding="5"
cellspacing="3" width="80%" summary="breve testo descrivente lo scopo della
tabella"> <caption>descrizione tabella</caption> <colgroup
span="2"> <col width="120" /> <col width="60" />
</colgroup> <colgroup align="right"></colgroup> <thead>
<tr> <th colspan="3">Titolo tabella</th> </tr>
</thead> <tfoot> <tr> <td colspan="3">piè di
tabella</td> </tr> </tfoot> <tbody> <tr> <th
id="tit1">Titolo colonna</th> <th id="tit2">Titolo
colonna</th> <td nowrap rowspan="2">testo che non va a
capo</td> </tr> <tr> <td colspan="2" headers="tit1
tit2">testo</td> </tr> <tr> <td
align="right">testo</td> <td valign="top">testo</td>
<td height="100">testo</td> </tr> </tbody> <tbody
align="char" char="."> <tr> <th colspan="3" abbr="Valore"
scope="colgroup">Valori ipotetici</th> </tr> <tr
axis="spese"> <td>756.2</td> <td>20.5</td>
<td>30.40</td> </tr> <tr> <td
axis="spese">135.12</td> <td>478.15</td>
<td>1.5</td> </tr> </tbody> </table>
dal quale otteniamo
questo risultato.
Gli elementi introdotti nella versione 4.0 sono tantissimi e li analizzeremo qui di seguito uno ad uno con i relativi attributi.
Ogni elemento tabellare ha un suo particolare attributo css display dedicato,
ideale per la sua visualizzazione come potete vedere qui sotto
table { display: table } tr { display: table-row } thead { display:
table-header-group } tbody { display: table-row-group } tfoot { display:
table-footer-group } col { display: table-column } colgroup { display:
table-column-group } td, th { display: table-cell } caption { display:
table-caption }
ma di base si comporta esattamente come qualunque altro elemento di blocco per
quanto riguarda bordi, colore o altre caratteristiche.
Esistono però proprietà particolari dedicate esclusivamente alle tabelle.
Nell'esempio successivo si domostra un intervento completo tramite fogli di
stile su una normale tabella creata con l'html 4.0, il codice css è questo:
#table{ background-color: #f0f0f0; border: 1px solid #f00; border-collapse:
collapse; empty-cells: hide; table-layout: fixed; border-spacing: 10px; }
#table caption{ caption-side: bottom; background-color: #f6f6f6; border: 1px
solid #666; width: 5em; } #table thead{ text-align: left; } #table tfoot{
border-top: 1px solid #600; border-right: 1px solid #600; font-size: .8em;
text-align: right; } #table tbody{ border: 1px solid #00f; } #table td{
padding: 1em; background-color: #f9f9f9; border: 1px solid #666;
dal quale otteniamo
questo risultato.
Gli attributi dedicati alle tabelle sono stati introdotti per compensare
specialmente il box model speciale delle tabelle, che in molti punti hanno un
comportamento flessibile e collassante.
Gli attributi esistenti nei CSS 2 sono questi, ma purtroppo sono stati
implementati sono nei browser che supportano meglio gli standard:
Per concludere volevo dimostrare come si possono sfruttare le proprietà di
display particolari delle tabelle per ricostruire virtualmente una tabella,
almeno nei browser dove gli standard sia html sia css siano ben implementati
(raccomando NS7 o equivalenti), lascio a voi lo studio del codice.
Dato questo html (ma può essere anche un xml):
<div id="vTable"> <div id="vCaption">descrizione
tabella</div> <div id="vTr"> <div
class="vTd">testo</div> <div class="vTd">testo</div>
<div class="vTd">testo</div> </div> </div>
applichiamo questo foglio di stile:
#vTable { display: table; border: 1px solid #666; width: 50%;
border-collapse: collapse; } #vTr { display: table-row; } .vTd { display:
table-cell; border: 1px solid #666; } #vCaption { display: table-caption; }
dal quale otteniamo
questo risultato.
Qui di seguito troverete tutte le reference ufficiali che parlano delle tabelle.