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>
<tbody>
<tr>
<td>Testo1</td>
<td>Testo2</td>
<td>Testo3</td>
</tr>
</tbody>
</table>

Potete inserire le dimensioni della tabella e delle celle e il rispettivo bordo:

<table style="width:100%; max-width:300px; border-collapse: collapse; border-spacing: 0; border: 1px solid black; ">
  <tbody>
    <tr>
      <td style="width:50%; border: 1px solid black;">Testo</td>
      <td style="width:30%; border: 1px solid black;">Testo</td>
      <td style="width:20%; border: 1px solid black;">Testo</td>
    </tr>
  </tbody>
</table>

Esempio:
Testo1 Testo2 Testo3

La larghezza (widht) può variare da cella a cella.
Il comando "border-collapse: collapse" serve ad annullare lo spazio tra le celle. Se volete le celle unite, sostituite collapse con "separate".


Per gli stili del bordo, leggi anche: Come incorniciare testo e immagini (border)

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:

<table style="width:100%; max-width:300px; float:right; border-collapse: collapse; border-spacing: 0; border: 1px solid; ">
  <tbody>
    <tr>
      <td style="width:50%; border: 1px solid black;">Testo</td>
      <td style="width:30%; border: 1px solid black;">Testo</td>
      <td style="width:20%; border: 1px solid black;">Testo</td>
    </tr>
  </tbody>
</table>

La tabella si sposta sulla destra utilizzando il comando float:right.

Potete centrarla nella pagina:

<table style="width:100%; max-width:300px; margin:0 auto; border-collapse: collapse; border-spacing: 0; border: 1px solid; ">
  <tbody>
    <tr>
      <td style="width:50%; border: 1px solid black;">Testo</td>
      <td style="width:30%; border: 1px solid black;">Testo</td>
      <td style="width:20%; border: 1px solid black;">Testo</td>
    </tr>
  </tbody>
</table>

Il comando margin:0 auto mette la tabella al centro della pagina.

Come aggiungere altre celle:

Per aggiungere altre celle, ripetete la stringa:

<td>Testo1</td>

Per aggiungere altre colonne, ripetete l'intero blocco tra i tag tr:

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


Tabella con sfondo colorato:

Testo1 Testo2 Testo3

Codice:

<table style="width:100%; max-width:300px; background-color:yellow; border-collapse: collapse; border-spacing: 0; border: 1px solid black; ">
  <tbody>
    <tr>
      <td style="width:50%; border: 1px solid black;">Testo</td>
      <td style="width:30%; border: 1px solid black;">Testo</td>
      <td style="width:20%; border: 1px solid black;">Testo</td>
    </tr>
  </tbody>
</table>

I colori possono essere inseriti col nome in inglese o con il loro codice (Editor colori).

Tabella ancora più personalizzata nei colori:


Ciao
..e ancora ciao

Codice:

<table style="width:100%; max-width:300px; border-collapse: separate; border-spacing: 2px; ">
  <tbody>
<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>


Oppure....

testo testo

Codice:

<table style="width:100%; max-width:300px; border-collapse: separate; border-spacing: 2px; border: 1px solid black; ">
<tbody>
<tr>
<td style="background: #00FF00; border: solid 1px">
Testo
</td>
<td style="border: solid 1px">
Testo
</td>
</tr>
</table>

Tabella con immagini:


<table style="width:100%; margin:0 auto; border-collapse: collapse; border-spacing: 0; border: 0;" >
<tbody>

<tr>
<td style="width:30%; text-align:center; border:0;">
<img style="width:90%; border:0;" src="URLimmagine">
</td>
<td style="width:30%; text-align:center; border:0;">
<img style="width:90%; border:0;" src="URLimmagine">
</td>
<td style="width:30%; text-align:center; border:0;">
<img style="width:90%; border:0;" src="URLimmagine">
</td>
</tr>
</tbody>
</table>

Questo codice è strutturato per ospitare tre immagini. Per un numero diverso di immagini, le percentuali relative alla larghezza delle celle vanno vanno ricalcolate.


I codici possono essere usato anche in Google sites.
Google sites ha un suo strumento integrato per creare le tabelle, puoi trovare le indicazioni relative nella pagina: Google sites - la grafica




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

Ti e` stato utile questo argomento?