Home -» Network -» Tabelle, come crearle e personalizzarle

Tabelle, come crearle e personalizzarle

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web

Sommario:

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 style=" border-collapse: collapse; border-spacing: 0; border: 1px solid black;">
<tr>
<td style="border: 1px solid black; ">Testo1</td>
<td style="border: 1px solid black; ">Testo2</td>
<td style="border: 1px solid black; ">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)

Larghezza della tabella e delle celle

<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:

Testo

La larghezza (widht) può variare da cella a cella, ma l'altezza (height) deve essere uguale per tutte le celle.

Posizione nella pagina, a destra

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

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

Posizione nella pagina, centrata

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

Il comando margin:0 auto mette la tabella al centro della pagina. Se volete impostare un margine di separazione della tabella dal resto del contenuto, potete mettere un valore in px al posto del valore 0.

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 >Testo</td>
      <td >Testo</td>
      <td >Testo</td>
    </tr>
</tbody>
</table>

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

Tabella personalizzata nei colori

Prima cella

Seconda cella

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: #00B302; border: solid 1px red">
Seconda cella
</td>
</tr>
</table>

Oppure....

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: 1px solid black">
Testo
</td>
<td style="border: 1px solid black">
Testo
</td>
</tr>
</table>

Tabella con immagini

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

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con: