PROGRAMMIAMO
HTML - Creare una tabella con i div
Creare tabelle con i div

Un tempo i web designer facevano largo uso di tabelle (spesso nascoste e annidate una dentro l'altra) per posizionare gli elementi sulla pagina. Come abbiamo visto tale uso è ormai fortemente deprecato ed è stato sostituito dal posizionamento con i fogli stile.

Vi sono però molti casi in cui la costruzione di una tabella sembra ancora la soluzione più rapida e indolore. Prendiamo come esempio il classico gioco del tris, dove occorre una griglia di gioco composta da 9 celle.

Una soluzione veloce con le tabelle è la seguente:

<table>
<tr>
<td></td>
<td></td>
<td"></td>
</tr>
<tr>
<td></td>
<td></td>
<td"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

da formattare con gli stili in questo modo:

table
{
border-collapse: collapse;
}

tr
{
height: 60px;
}

td
{
width: 60px;
border: 1px solid;
text-align:center;
}

Tuttavia sempre più spesso i programmatori preferiscono evitare l'uso delle tabelle in tutti i casi, tranne quando si voglia veramente presentare dei dati in forma tabellare (es. la classifica del campionato di calcio). In tutti gli altri casi le tabelle, sebbene non formalmente deprecate, sono comunque sconsigliate.

Si pone dunque però il problema di come e con cosa sostituire le tabelle. La soluzione è piuttosto semplice ed elegante e fa uso del solo elemento <div>. Qui sotto è mostrato per esempio il codice per realizzare una griglia 3x3, come quella per il gioco del tris, usando solo div:

<div class="tabella">
<div class="riga">
<div class="cella"></div>
<div class="cella"></div>
<div class="cella"></div>
</div>

<div class="riga">
<div class="cella"></div>
<div class="cella"></div>
<div class="cella"></div>
</div>

<div class="riga">
<div class="cella"></div>
<div class="cella"></div>
<div class="cella"></div>
</div>
</div>

Gli stili associati sono i seguenti:

.tabella
{
display: table;
}
.riga
{
display: table-row;
}
.cella
{
width: 60px;
height: 60px;
line-height: 60px;
border: 1px solid;
text-align:center;
display: table-cell;
}

Qui è interessante osservare l'uso dello stile display, il quale consente di formattare un elemento (nel nostro caso un elemento div) in modo tale che si comporti come il corrispondente elemento di una tabella.

Consigliamo questo utile sito online che consente rapidamente di generare il codice di qualsiasi tabella per mezzo di elementi div.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it