Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Tabelle, come crearle e personalizzarle

di Maria Silvana Radice






How to create a table and customize it

Come creare una tabella

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.


Codice di base per una tabella:

Questo è il codice base per una tabella:

<table border="1" cellspacing="0">
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</table>

Esempio:
Testo1 Testo2 Testo3

Potete variare lo spessore del bordo (border="1") e inserire il testo preferito (Testo 1/2/3 ecc.), che può essere modificato anche dopo aver creato la tabella. Per gli stili del bordo, leggi anche: Come incorniciare testo e immagini (border)

Potete inserire le dimensioni delle celle:

<table border="1" cellspacing="0">
<tr>
<td style="width: 38px; height: 16px;">Testo1</td>
<td style="width: 38px; height: 16px;">Testo2</td>
<td style="width: 96px; height: 16px;">Testo3</td>
</tr>
</table>

Esempio:
Testo1 Testo2 Testo3

La larghezza (widht) può variare da cella a cella, ma l'altezza (height) deve essere uguale per tutte le celle. In Google sites, non serve impostare le misure, perchè possono essere variate, manualmente, dopo la creazione della tabella.

Potete stabilire la sua posizione rispetto alla pagina:

Utilizzando un div:

<div align="center"><table border="1" cellspacing="0">
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</table></div>



                                                                                                        Esempio:

Testo1 Testo2 Testo3


Posizione della tabella nella pagina (align="left" (a sinistra), o "right" (a destra), o "center" (al centro).


Per centrarla nella pagina, potete usare anche il comando margin:0 auto; in questo modo:


<table style="margin:0 auto;" border="1" cellspacing="0">
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</table>

Come aggiungere altre celle:

Per aggiungere altre celle, orizzontalmente, ripetete la stringa:

<td>Testo1</td>

Per aggiungere altre celle, verticalmente, ripetete l'intero blocco:

 <tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>


Gli attributi cellspacing e cellpadding:

Gli attributi cellspacing e cellpadding, si riferiscono a questi spazi all'interno della tabella:


Tabella con sfondo colorato:

Testo1 Testo2 Testo3

Codice:

<div align="left"><table border="1" bgcolor="yellow" bordercolor="black" cellspacing="0">
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</table></div>

Parametri modificabili:

  • align="left": posizione della tabella rispetto alla pagina
  • border="1": spessore del bordo
  • bgcolor="yellow": colore dello sfondo
  • border color="black": colore del bordo
I colori possono essere inseriti col nome in inglese o con il loro codice (Editor colori).

Tabella invisibile:

Codice:

 <div align="left">
<table>
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</table></div>

Tabella invisibile con immagini:

Codice:

<div align="left">
<table cellspacing="0">
<tr>
<td>
<img src="URL immagine" alt="" /></td>
<td>
<img src="URL immagine" alt="" /></td>
<td>
<img src="URL immagine" alt="" /></td>
</tr>
</table>
</div>

I parametri da modificare sono gli stessi, più "cellspacing" che è la distanza tra le immagini.
Se volete aggiungere un collegamento alle immagini, dovete inserire il parametro href, in questo modo:

<a href="URL collegamento"><img src="URL immagine">

Per un discorso più approfondito
sull'allineamento delle immagini, potete leggere questa guida.

Tabella ancora più personalizzabile nei colori:


Ciao
..e ancora ciao

Codice:

<div align="left">
<table cellspacing="1">
<tr>
<td style="background: yellow; border: solid 1px blue">
Prima cella
</td>
<td style=" background: green; border: solid 1px red">
Seconda cella
</td>
</tr>
</table>
</div>

I parametri modificabili sono questi:
  • align="left" =è la posizione della tabella nella pagina: left -> a sx, rigth -> a dx, center -> al centro
  • background: yellow = è il colore dello sfondo di una cella. Potete usare nomi di colori in inglese, oppure il codice web dei colori (Editor colori).
  • border: solid 1px blue = 1 è la larghezza del bordo della tabella, aumentando il numero, il bordo si allargherà. Blue è il colore del bordo della tabella. Come sopra, potete mettere il nome del colore in inglese, o tramite il suo codice.

Le stesse cose si ripetono per ogni cella. Potete aggiungere tutte le celle che volete, in successione (Terza cella....Quarta cella....).

Oppure....

testo testo

Codice:

 <div align="left">
<table width="250" border="1">
<tr>
<td bgcolor="#00FF00">
testo
</td>
<td bordercolor="#FF0000">
testo
</td>
</tr>
</table>
</div>


Questo codice può essere usato anche in Google sites e va inserito direttamente nell'HTML della pagina.
Google sites ha un suo strumento integrato per creare le tabelle, puoi trovare le indicazioni relative nella pagina: Google sites - la grafica

Leggi anche: Google sites - come ottimizzare il sito e i contenuti per il mobile in cui indico come rendere responsive una tabella contenente immagini.    



Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?