Passo 6
Aggiungiamo una seconda tabella subito sotto quella appena creata, ma questa volta attribuiamole una dimensione in percentuale con l'attributo width="85%" che indica al browser di visualizzarla all'85 per cento dello spazio disponibile nella finestra:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
<tr>
<td>Cella 1</td>
<td bgcolor="#ffff00">Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td bgcolor="#ffff00">Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
<table summary="Tabella di prova a larghezza variabile" width="85%" border="1">
</body>
</html>
Passo 7
Aggiungiamo due righe con tre celle ciascuna e le relative diciture, e coloriamo le celle centrali di arancione con l'attributo bgcolor="#ff9900" dopo di che chiudiamo nuovamente la tabella:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Corso Webmaster - Esercizio di creazione di una tabella semplice</title>
</head>
<body>
<table summary="Tabella di prova a larghezza fissa" width="300" border="1">
<tr>
<td>Cella 1</td>
<td bgcolor="#ffff00">Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td bgcolor="#ffff00">Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
<table summary="Tabella di prova a larghezza variabile" width="85%" border="1">
<tr>
<td>Cella 1</td>
<td bgcolor="#ff9900">Cella 2</td>
<td>Cella 3</td>
</tr>
<tr>
<td>Cella 4</td>
<td bgcolor="#ff9900">Cella 5</td>
<td>Cella 6</td>
</tr>
</table>
</body>
</html>
Passo 8
Eseguiamo un'anteprima della pagina che abbiamo creato dimensionando la finestra in modo che le due tabelle abbiano la stessa lunghezza:

Ora proviamo a restringere la finestra e vediamo che la prima tabella mantiene le sue dimensioni mentre la seconda le riduce:

Ora ingrandiamo la finestra e vediamo che la prima tabella mantiene le sue dimensioni mentre la seconda le espande:

|