Test: Layout tabellare senza tabelle

Introduzione

Questo test è stato realizzato con lo scopo di illustrare un metodo alternativo per creare un layout a tre colonne senza utilizzare le proprietà float o position. Questo tipo di layout è rivolto principalmente a coloro che stanno attraversando la fase critica del passaggio dalle tabelle al layout "tableless" (senza tabelle), che richiede l'uso dei soli fogli di stile. Questo layout è compatibile con Mozilla, Firefox e Opera, ma non con Internet Explorer 6 (e precedenti), che purtroppo non supporta alcuni valori della proprietà display (che vedremo tra breve).

Perchè le tabelle?

Mi sono sempre chiesto perchè così tante persone optassero per le tabelle nella realizzazione dei loro layout. La risposta mi è giunta dalla lettura dell'opera di Eric Meyer, "Cascading Style Sheets. La guida completa":

«Le tabelle sono uniche in confronto al resto del layout del documento. A partire dai CSS 2.1, soltanto le tabelle possiedono la straordinaria capacità di associare le dimensioni di ogni elemento con altri elementi: per esempio, tutte le celle in una riga hanno la stessa altezza, a prescindere dalla quantità di contenuto presente in ogni singola cella. Lo stesso è vero per la larghezza delle celle che condividono una colonna.»

Se ne deduce che le celle di una tabella possono avere sfondi di colore diverso, e che questi seguiranno omogeneamente il contenuto per tutta l'altezza, a differenza di quanto avviene con i blocchi flottati o posizionati assolutamente, in cui abbiamo bisogno di immagini di sfondo per avere lo stesso effetto. Come ottenere questo senza usare l'elemento <table>? Con alcuni valori della proprietà display che ora vedremo.

I valori che ci servono

I valori della proprietà display che ci interessano sono i seguenti:

table
Definisce una tabella di blocco. L'elemento corrispondente è <table>.
table-row
Definisce una riga di celle. L'elemento corrispondente è <tr>.
table-cell
Definisce una cella. L'elemento corrispondente è <td>.

Come anticipato, Internet Explorer 6 (e precedenti) non supporta nessuno di questi valori. La speranza è che vengano supportati dalla nuova versione 7.

Il codice della pagina

La struttura della pagina a livello di marcatura è piuttosto semplice:

<body>
<div id="intestazione">...</div>
<div id="corpo">
  <div id="box">
  <div id="nav">...</div>
  <div id="content">...</div>
  <div id="extra">...</div>
  </div>
</div>
<div id="footer">...</div>
</body>

Il codice del foglio di stile è il seguente:

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font: 100% Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-align: center;
}

#intestazione {
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 600px;
  border: 1px solid #000;
  background: #eee;
  color: #000;
  font-size: 85%;
}
#intestazione h1 {
  font-size: 1.4em;
  margin: 0;
  padding: 1em 0;
  text-align: center;
}

#corpo {
  margin: 0 auto;
  padding: 0;
  width: 600px;
  display: table;
  border: 1px solid #000;
  border-top: none;
  border-bottom: none;
  text-align: left;
  font-size: 80%;
}

#box {
  margin: 0;
  padding: 0;
  width: 600px;
  display: table-row;
}

#nav, #content, #extra {
  display: table-cell;
}

#nav {
  width: 150px;
  margin: 0;
  padding: 0;
  border-right: 1px solid #000;
  background: #f8f8ee;
  color: #000;
}

#content {
  width: 300px;
  margin: 0;
  padding: 0;
  border-right: 1px solid #000;
  background: #fff;
  color: #000;
}

#extra {
  width: 150px;
  margin: 0;
  padding: 0;
  background: #eee;
  color: #000;
}

#footer {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #000;
  color: #000;
  background: #eee;
  text-align: center;
  font-size: 80%;
}

p {
  margin: 0;
  padding: 1em 0.3em;
  line-height: 1.5em;
}

Dal codice notiamo subito che:

  1. Abbiamo applicato display:table a #corpo per creare la tabella.
  2. Abbiamo applicato display:table-row a #box per creare la riga di tabella.
  3. Abbiamo applicato display:table-cell a #nav, #content ed #extra per creare le celle di tabella.

Notiamo l'uniformità delle dimensioni e dell'altezza delle celle. Possiamo applicare uno sfondo diverso ad ognuna di esse senza problemi.

Conclusione

La soluzione qui presentata è da intendersi a puro scopo di test. La mancata compatibilità con Internet Explorer 6 (e precedenti) rende questo layout difficile da applicare nel concreto. La speranza, come sempre, è nel futuro.