Come creare una tabella

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 Testo 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 (Editor colori).

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: 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: 1px solid black">
Testo
</td>
<td style="border: 1px solid black">
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 >
<img src="URLimmagine">
</td>
<td >
<img src="URLimmagine">
</td>
<td >
<img 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 ricalcolate.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti