HTML-fare la tabella

Struttura di base


Cominciamo innanzitutto con le definizioni di base:

con <table> si apre la costruzione della tabella

con <tr>  si apre la definizione di una riga

con <td> si apre la definizione di una cella

Per chiudere ognuna delle definizioni aperte precedentemente, si usano rispettivamente le seguenti scritture: </table>   </tr>    </td>

La costruzione di una tabella comincia con il dichiarare la tabella con il tag <table>. Poi bisogna dichiarare l’inizio di una nuova riga conil tag <tr>. Tra l'apertura e la chiusura della riga, si inseriscono tanti tag <td> per quanto sono le colonne. Vediamo come è stata costruita la tabella all'inizo di questo articolo. In nero il codice html, in verde tra parentesi, i nostri commenti.

<table> (Inizio della tabella) 

<tr> (Inizio della prima riga)

<td> (prima cella a sinistra) 

</td> (fine della prima cella)  

<td> (seconda cella)

</td> (seconda cella)

<td> (terza cella)

</td> (terza cella)

<td> (quarta cella)

</td> (quarta cella)

 </tr> (fine della prima riga) 

Le definizioni delle righe successive sono identiche e doo la chiusura della terza riga, si chiude la tabella con il tag </table> 

I contenuti che vogliamo inserire nella tabella devono essere messi tra i tag <td> </td> della cella che ci interessa.

Creare un bordo 

Peer creare un bordo visibile, dobbiamo indicarne lo spessore. La dichiarazione di apertura tabella cambia in questo modo <table border= "1"> Maggiore sarà il numero, tanto più grande sarà lo spessore.

Impostare la larghezza della tabella

Il valore della larghezza può essere espresso in due maniere diverse: in pixel e in percentuale. Nel primo caso la tabella sarà larga esattamente quanto i pixel indicati. Nel secondo caso sarà adattata, secondo la percentuale indicata, in funzione della pagina visualizzata. La dichiarazione iniziale si arricchisce in questo modo: <table width=”600″ border=”1″> oppure <table width=”50%” border=”1″>

Impostare la larghezza di una cella

La dichiarazione della cella cambia in questo modo: in pixel <td width=”160″> in percentuale <td width=”60%”>

Mettere la tabella al centro della pagina

In questo caso, nella dichiarazione della tabella ci deve essere l'attributo align scritto in questo modo: <table align=”center”> Se vogliamo che stia a sinistra usiamo al posto di center la parola left e se la vogliamo a destra, la parola right.

Alcuni ottimi libri sull'HTML che consigliamo

Clicca sull'immagine per i dettagli 

Impostare un colore di sfondo alla tabella

Nella dichiarazione iniziale ci deve essere l'attributo bgcolor scritto in questo modo:  <table style=”background-color: red”> Similmente si può colorare una sola riga, una sola cella o più righe e più celle. La forma è la stessa, ma deve essere inserita nella riga o nella cella che interessa.

Creare uno spazio tra le celle

Se si vuole creare uno spazio tra le celle di una tabella bisogna usare l'attributo cellspacing nella dichiarazione della tabella in questo modo:  <table cellspacing=”4″> Maggiore è il numero, tanto maggiore sarà lo spazio.

Unione celle in orizzontale e verticale

Per unire due celle bisogna avvalersi della seguente definizione:  <td colspan=”2″> In questo caso lo spazio occupato da due celle in senso orizzontale, sarà occupato da una sola cella. Per unire due celle in senso verticale si usa questa altra definizione: <td rowspan=”2″>

Inserire un'immagine in una cella 

Il formato dell'immagine deve essere jpg o gif (quest'ultimo supporta la trasparenza). La sintassi definisce il bordo dell'immagine con l'attributo border, le dimensioni a cui deve essere visualizzata con gli attributi width e height e src indica il percorso fisico dove si trova il file in questo modo: <img border="0" src="file:https://informatica1computer2.bogspot.com/homepage.jpg" width="556" height="599"> Quindi il tutto va tra le tag della cella in cui volete visualizzarla. sostituite quindi all'indirizzo che abbiamo messo noi (evidenziato in rosso), il vostro.

Inserire un testo nella cella

Per inserire un testo nella cella è sufficiente inserirlo tra le tag della cella, in questo modo: <td>Questo testo sta nella cella</td> 

Inserire un testo con link

Per inserire un ipertesto, in una cella, cioè un testo che vi porta in un altra pagina, adottate questa scrittura: <td><a href="https://informatica1computer2.blogspot.com/">Home Page</a></td> Sostituite nell'indirizzo messo da noi (evidenziato in rosso), l'indirizzo della pagina che volete sia visualizzata quando l'utente clicca sul testo. Sostituite al testo messo da noi (evidenziato in verde) il vostro testo che volete abbia il link.

Inserire un'immagine e renderla attiva con un link

Rendere un'immagine, inserita in una cella, attiva, in maniera che l'utente quando clicca su di essa apre una nuova pagina, bisogna usare questa scrittura: <td><a href="https://informatica1computer2.blogspot.com/"> <img border="0" src="file: https://informatica1computer2.blogspot.com/home page.jpg" width="556" height="599"></a></td> Sostituite il link della pagina inseritp da noi (evidenziato in rosso) con l'indirizzo fisico della vostra pagina. Sostituite l'indirizzo fisico dell'immagine inserito da noi (evidenziato in verde) con quello della vostra immagine. Sostituite i valori di width e eight con i vostri valori di larghezza e altezza dell'immagine.

Alcuni validi libri sull'HTML che consigliamo

Clicca sull'immagine per i dettagli