Programmazione Web » Css » Lavorare con le tabelle e i Css riducendo al minimo l'(X)Html
Lavorare con le tabelle e i Css riducendo al minimo l'(X)Html
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1176 volte
Le tabelle sono elementi ricorrenti nelle pagine web. Vediamo quindi come ottimizzarne l'inserimento, riducendo al massimo il codice XHTML e lavorando sulla loro presentazione grafica con i CSS.
Cominciamo subito col dire che una tabella viene generalmente creata con questo XHTML:
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Un modo più elegante per ottenere lo stesso effetto e rendere la grafica delle tabelle facilmente modificabile consiste nell'usare i Css. E' importante innanzitutto stabilire un selettore (nel nostro caso table) e impostargli la proprietà table-layout su fixed.
Così facendo le proprietà della tabella saranno quelle stabilite dall'autore nel foglio di stile e non quelle usate nell'XHTML! Inseriamo nell'head:
<style>
table {
table-layout: fixed;
width: 500px;
/* definire tutte le altre proprietà della tabella */
}
</style>
e nel body:
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Come potete notare, il fatto di separare la grafica dai contenuti ci permette di poter aggiornare con molta semplicità i layout di tutte le tabelle. Basta creare una semplice classe:
table.nomeclasse {
table-layout: fixed;
width: 500px;
/* definire tutte le altre proprietà della tabella */
}
Attenzione: E' fondamentale dichiarare "table-layout: fixed;" al fine di poter stabilire le proprietà della tabella nel foglio di stile! Omettendone la dichiarazione non si ottiene nessun risultato! Buon lavoro!
Aggiungi questo tutorial ai preferiti
