Tabelle e layout by Corso Grafica e Web Design

Il linguaggio HTML: tabelle e layout

Utilizzare le tabelle HTML per la realizzazione del layout La tabelle HTML possono essere utilizzate non solamente per contenere e organizzare i dati ma anche per creare una formattazione specifica per il layout delle pagine web. Pertanto in questa unitĂ vedremo proprio come utilizzare le tabelle per ottenere diversi layout di base per le nostre pagine.

Formattazione di base con le tabelle Per capire subito in che modo le tabelle HTML possono aiutarci nella realizzazione di uno specifico layout, prendiamo in considerazione la seguente struttura che prevede lâ&#x20AC;&#x2122;utilizzo di due elementi input per la creazione di un form specifico di registrazione. <html> <head> <title>Form semplice</title> </head> <body>

<form> <p>Nome:&nbsp;<input type="text" size="40"></p> <p>EtĂ :&nbsp; <input type="radio" name="20to30" value="20to30"> &nbsp;20-30&nbsp; <input type="radio" name="31to40" value="31to40"> &nbsp;31-40&nbsp; <input type="radio" name="41to50" value="41to50"> &nbsp;41-50&nbsp; </p> </form> </body> </html> Output

Una tabella HTML semplice puĂ˛ contribuire a creare un migliore allineamento degli elementi di questo form, come messo in evidenza ad esempio nella struttura seguente. <html> <head> <title>Allineamento base di un form</title> </head> <body> <form> <table width="25%" border="1"> <tr> <td width="25%"><p>Nome:</p></td> <td><p><input type="text" size="40"></p></td> </tr> <tr>

<td><p>EtĂ :</p></td> <td><p> <input type="radio" name="20to30" value="20to30"> &nbsp;20-30&nbsp; <input type="radio" name="31to40" value="31to40"> &nbsp;31-40&nbsp; <input type="radio" name="41to50" value="41to50"> &nbsp;41-50&nbsp; </p></td> </table> </form> </body> </html> Output

Tuttavia una struttura di questo tipo serve solamente ad allineare le etichette e i campi in due colonne, per conferire un aspetto più “ordinato” al nostro modulo. Utilizzando una tabella annidata è possibile migliorare ulteriormente la visualizzazione dei pulsanti “radio” inseriti, come evidenziato dalla seguente struttura e dal relativo output. <html> <head> <title>Formattazione di pagina utilizzando tabelle annidate</title> </head> <body> <form> <table width="50%" border="1">

</td> </table> </form> </body> </html> Output

Naturalmente partendo dalla struttura base presentata è possibile aggiungere ulteriori elementi di formattazione per migliorare l’aspetto delle tabelle inserite, come indicato nella lezione relativa alla creazione delle tabelle HTML. Anche solo attraverso i pochi esempi presentati è subito evidente la grande funzionalità propria delle tabelle HTML nella realizzazione di uno specifico layout degli elementi da inserire. Ancora adesso proprio per la loro funzionalità le tabelle HTML vengono utilizzate, anche nascoste, nella struttura di alcuni siti web.

Tabelle e pagine fluttuanti (floating page) Il layout conosciuto come floating page può essere utilizzato in siti web di diversa tipologia, dalle pagine web relative ad un’azienda a quelle di carattere più privato. Il layout in questione è piuttosto facile da realizzare, proprio attraverso l’utilizzo di alcune tabelle HTML annidate, come evidenziato ad esempio nella seguente struttura. <html> <head> <title>Formato di una floating page</title> <style type="text/css">

(!Imposta un colore per lo sfondo dellâ&#x20AC;&#x2122;intera pagina) body { background-color: #B0C4DE; } </style> </head> <body> (!Contenitore del corpo o body del documento HTML) <table border="0" cellpadding="4px" cellspacing="0" style="background-color: black; margin: 0 auto;"> (! Viene applicato uno stile in linea al colore di sfondo della tabella e ai suoi margini) <tr> <td> (!Inizio della pagina fluttuante) <table border="0" cellpadding="5px" cellspacing="0" width="732px" height="900px" style="background-color: #FFFFFF;"> (!viene applicato uno stile in linea per il colore di sfondo della tabella)

<tr align="left" valign="top"> <td> (!Contenuto della pagina-inizio) <p>Qui va messo il contenuto<p> (!Contenuto della pagina-fine) </td> </tr> </table> (!Fine della pagina fluttuante) </td> </tr> </table> (!Fine del contenitore del corpo o body del documento) </body> </html>

Output

Volendo aggiungere un effetto dâ&#x20AC;&#x2122;ombra al layout giĂ realizzato Ă¨ possibile modificare i bordi della pagina fluttuante impostando uno stile specifico per due bordi adiacenti, come evidenziato nella struttura seguente. <html> <head> <title>floating page realistica</title> <style type="text/css"> body { background-color: #B0C4DE; } </style> </head> <body> <table border="0" cellpadding="4px" cellspacing="0" style="background-color: #1E90FF; margin: 0 auto;">

<tr> <td> (!Floating page- stile diverso per i due bordi) <table border="0" cellpadding="5px" cellspacing="0" height="900px" style="background-color: #FFFFFF; border-right: 4px solid #1E90FF; border-bottom: 4px solid #1E90FF;"> <tr align="left" valign="top"> <td> <p>contenuto<p> </td> </tr> </table> </td> </tr> </table> </body> </html>

width="732px"

Output

Queste nuove impostazioni di stile, in connessione con la struttura generale di pagina, indicata nelle slide precedenti, aumenterà lo spessore del bordo inferiore e del bordo destro della floating page, conferendole un leggero effetto tridimensionale e rendendola più realistica. E’ possibile inoltre combinare tecniche diverse in uno stesso documento HTML. Ad esempio si può inserire una tabella a due colonne nell’area di contenuto della tabella relativa alla ﬂoating page. Quindi, all’interno di una delle colonne, è possibile disporre ulteriori elementi grafici per l’organizzazione del layout, inserendo anche un’ulteriore tabella.

Layout di pagina con le tabelle HTML o con i CSS? L’utilizzo di layout complessi attraverso le tabelle HTML costituiva una volta una prassi comune nel campo del web design. Tuttavia attualmente i fogli di stile offrono una valida alternativa per la creazione di layout. Un utilizzo eccessivo delle tabelle HTML (annidamenti multipli, presenza di molte tabelle all’interno di una stessa pagina) può a volta compromettere una corretta accessibilità delle pagine web così create. Qualora si scelga di utilizzare gli elementi table per impostare la struttura di una pagina, è bene verificare sempre la corretta visualizzazione finale attraverso la finestra di browser diversi.

Grafiche particolari e combinazioni con il testo E’ possibile usare le tabelle HTML per combinare parti testuali e elementi grafici per la creazione di layout particolari. Nell’esempio seguente vedremo in che modo utilizzare delle semplici tabelle per creare un’intestazione per una home page di sito. Nella struttura della slide successiva, la grafica dell’intestazione è divisa in più parti. I “pulsanti” nella parte alta, a destra, sono contenuti nelle celle di una tabella separata. Tale divisione viene scelta per separare quegli elementi che conterranno i meccanismi navigazionali (i “pulsanti”) dagli altri elementi presenti nella pagina.

Una tabella senza padding ed elementi di spaziatura viene utilizzata per unire diversi elementi grafici in unâ&#x20AC;&#x2122;immagine completa, permettendo allo stesso tempo una corretta visualizzazione del testo sulla parte destra della pagina. <html> <head><title>Intestazione home page</title> <style type="text/css"> p {text-align: center; } </style> </head> <body bgcolor="#DDA0DD";> (!contenitore principale) <table border="0" cellpadding="0" cellspacing="0" align="center" valign="center">

<tr> <td valign="top"> <img border="0" src="novitĂ .png" width="240" height="118"> </td> <td> (!Contenitore elementi grafici principali) <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%"> (!Inizio della barra navigazionale) <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td width="25%"> <img name="header" border="0" src="header_2.png" width="132" height="38"></a> </td> <td width="25%"> <img name="guest" border="0"

src="header_1.png" width="116" height="38"></a> </td> <td width="25%"> <img name="email" border="0" src="header_3.png" width="113" height="38"></a> </td> <td width="25%"> <img name="about" border="0" src="header_4.png" width="131" height="38"></a> </td> </tr> </table> (!Fine della barra navigazionale) </td> </tr> <tr> <td width="100%"> <img border="0" src="muffin.png" height="80"> </td>

</tr> </table> (!Chiusura del contenitore elementi grafici principali) </td> </tr> <tr> <td height="158" valign="top"> <img border="0" src="cakedesign.png" width="239" height="156"> <p style="color: white"><b>Contenuto secondario</b></p> </td> <td valign="top"> <p style="color: white"><b>Contenuto principale</b></p> </td> </tr> </table> (!Chiusura del contenitore principale) </body> </html>

Output

Con questa semplice tecnica di utilizzo delle tabelle è possibile unire le parti testuali e gli elementi grafici, armonizzandoli in quella che sembra un’unica struttura all’interno di una pagina. Ovviamente sarà poi possibile, attraverso gli specifici elementi HTML (elemento <a> e attributo href), creare per ogni “etichetta” della barra quei link necessari proprio alla navigazione, che condurranno l’utente alle altre pagine del sito.

Menù navigazionali e blocchi di contenimento L’esempio di pagina mostrata nell’esempio precedente presenta gli elementi di navigazione principale orizzontalmente, nelle parte alta della pagina. E’ possibile, sempre utilizzando esclusivamente delle tabelle HTML, sviluppare degli elementi navigazionali verticalmente, utilizzando l’attributo rowspan. Vediamo ad esempio la seguente struttura base.

<html> <head><title>Navigazione verticale</title> <style type="text/css"> body { background-color: #90EE90; } </style> </head> <body> <table border="1" width="65%"> <tr> <td rowspan="4" width="65%"> <p>Grafica intestazione</p> </td> <td> <p>Nav_1</p> </td> </tr> <tr> <td> <p>Nav_2</p> </td> </tr> <tr> <td> <p>Nav_3</p>

</td> </tr> <tr> <td> <p>Nav_4</p> </td> </tr> </table> </body> </html> Output

Organizzazione a colonne multiple Infine è possibile utilizzare le tabelle HTML per posizionare e organizzare gli elementi delle pagine in colonne. Questa tecnica può essere utilizzata per creare diversi tipi di layout di pagina: ✦è possibile inserire gli elementi navigazionali a destra o a sinistra del testo. ✦è possibile suddividere i contenuti testuali in colonne.

✦Si mantiene un buon controllo sulla posizione dei vari elementi, con la possibilità di avvicinare il contenuto testuale agli elementi grafici. Una formattazione di pagina a colonne è facile da ottenere con l’inserimento delle tabelle, come è possibile vedere nella seguente struttura. <html> <head><title>Layout colonne</title> <style type="text/css"> body { background-color: #B0E0E6; }

table {color: black; } table {font-weight: bold; } </style> <table border="2" cellspacing="0" cellpadding="5px" width="80%" align="center"> <colgroup> <col width="50%"> <col width="50%"> </colgroup> <tr> <td colspan="2" align="center">Posizionamento per elementi grafici di intestazione oppure per elementi navigazionali</td> </tr> <tr> <td align="center">Prima Colonna di contenuto </td> <td align="center">Seconda colonna di contenuto</td> </tr> </table> </body> </html>

Output

In questa organizzazione del layout di pagina bisogna tuttavia considerare che il testo non si estenderà automaticamente da una colonna all’altra. Per far continuare una stessa parte di contenuto in un’altra colonna sarà necessario dividere manualmente il testo. Ovviamente le colonne realizzate non dovranno essere necessariamente delle stesse dimensioni. E’ infatti possibile definire colonne di ogni dimensione, utilizzando gli appropriati mezzi di formattazione. Ad esempio, se si desidera creare una colonna di blocco navigazionale (nella sezione sinistra della pagina) larga 200 pixel e una colonna per il contenuto testuale (nella sezione destra della pagina), di almeno 400 pixel di larghezza, è possibile utilizzare

l’attributo width associato all’elemento <col>, come nell’esempio seguente. <html> <head><title>Colonne di diversa larghezza</title> <style type="text/css"> body { background-color: #FF7F50; } table {color: black; } table {font-weight: bold; } table {border: solid 2px yellow; } </style> <table border="2" cellspacing="0" cellpadding="5px" align="center"> <colgroup>

width="80%"

<col width="200px"> <col width="400px"> </colgroup> <tr> <td colspan="2" align="center">Posizionamento per elementi grafici di intestazione oppure per elementi navigazionali</td> </tr> <tr> <td align="center" height= "80px">Prima Colonna di contenuto </td> <td align="center" height= "80px">Seconda colonna di contenuto</td> </tr> </table> </body> </html>

Output

Conclusioni In queste due unitĂ HTML abbiamo visto come creare e usare nel layout di una pagina le tabelle. Abbiamo visto come le tabelle costituiscano degli elementi base, di facile formattazione per la creazione di layout semplici anche unendo elementi testuali e grafici insieme. Nel modulo dedicato ai CSS vedremo come applicare regole di stile specifiche per andare a modificare e formattare ulteriormente le tabelle HTML.

FINE LEZIONE