Come inserire nel blog una tabella di testo, di immagini o di bottoni con l'HTML.

L'inserimento di una tabella in un post, in un widget o in una pagina statica risolve molti più problemi di quanto non si pensi. Se per esempio abbiamo installato due o più bottoni di condivisione alla fine del post è proprio attraverso l'utilizzo di una tabella che possiamo allinearli perfettamente.

Un discorso analogo si può fare per esempio se si vogliono allineare orizzontalmente o verticalmente due o più annunci pubblicitari. L'uso delle tabelle è particolarmente indicato quando si vogliono creare delle gallerie fotografiche in modo da mostrare le miniature delle immagini in modo geometrico. L'Editor di Blogger, anche nella sua versione più recente, non ha l'icona per l'inserimento e per la configurazione delle tabelle. Il metodo che consiglio è quello di usare Windows Live Writer per costruire la tabella, di andare quindi su Origine per copiare il codice per poi incollarlo in un widget o in una pagina statica.

La finestra di dialogo di Windows Live Writer per l'inserimento delle tabelle consente di configurare il numero delle righe, quello delle colonne, la larghezza della stessa tabella, lo spazio tra le singole celle e lo spazio all'interno delle stesse

E' anche possibile scegliere se mostrare il bordo della tabella. Se si mette la relativa flag, possiamo sceglierne anche le dimensioni in pixel. La larghezza della tabella non è un parametro essenziale perché, attraverso il mouse, possiamo ridisegnare le dimensioni di righe, colonne e della intera tabella. Se per esempio vogliamo inserire delle immagini, possiamo andare su Inserisci > Immagine > Dal web e incollare l'URL della foto che abbiamo acquisito su Picasa

Successivamente le immagini possono essere ridimensionate a piacere e si può inserire un collegamento a ciascuna di essa, per esempio al post a cui si riferisce. Se invece si vogliono inserire bottoni, banner o altri elementi che sono individuati da un codice dobbiamo andare su Origine e incollarlo al posto della espressione   che rappresenta uno spazio

Dopo aver realizzato la tabella si va su Origine, si copia il codice e si incolla nel widget HTML/Javascript o in una pagina statica in modalità HTML

Coloro che malauguratamente non avessero Windows Live Writer, possono crearsi una tabella scrivendo il codice manualmente. Ricordo quello che è il codice base di una tabella di tre righe per tre colonne

<table border="0" cellspacing="4" cellpadding="2" width="600"><tbody>
    <tr>
      <td width="200">C₁₁</td>
      <td width="200">C₁₂</td>
      <td width="200">C₁₃</td>
    </tr>
    <tr>
      <td width="200">C₂₁</td>
      <td width="200">C₂₂</td>
      <td width="200">C₂₃</td>
    </tr>
    <tr>
      <td width="200">C₃₁</td>
      <td width="200">C₃₂</td>
      <td width="200">C₃₃</td>
    </tr>
  </tbody></table>

Le personalizzazioni riguardano i seguenti parametri:

1. La larghezza del bordo border="0"
2. Lo spazio tra le singole celle cellspacing="4"
3. Lo spazio all'interno delle celle cellpadding="2"
4. La larghezza totale della tabella width="600"
5. La larghezza di una singola cella width="200"
6. Il contenuto che deve essere inserito al posto di C_ij e che deve essere in HTML. Per esempio una immagine va inserita mediante il tag
   <img src="Url Immagine" alt="Nome Immagine">. Si possono inserire anche codici di annunci o anche di pulsanti di ogni tipo
7. Si possono inserire altre righe e altre colonne con l'accortezza che una riga inizia con il tag <tr> e termina con </tr> mentre ogni cella di una riga inizia con <td> e termina con </td>. Le celle devono essere inserite all'interno dei tag delle righe. Nel codice precedente due tag riga e colonna sono stati colorati di viola per evidenziarne la posizione. E' evidente che ci deve essere lo stesso numero di celle per ogni riga.  

Questo codice va poi incollato in un widget o in una pagina statica. Visto che non è possibile ridimensionare le dimensioni della tabella con il mouse, se si incolla il codice nell'Editor di Blogger o in un widget, è preferibile non inserire dimensioni quando abbiamo a che fare con oggetti non omogenei. Si può usare il codice

<table border="0" cellspacing="0" cellpadding="0"><tbody>
    <tr>
      <td>C₁₁</td>
      <td>C₁₂</td>
      <td>C₁₃</td>
    </tr>
    <tr>
      <td>C₂₁</td>
      <td>C₂₂</td>
      <td>C₂₃</td>
    </tr>
    <tr>
      <td>C₃₁</td>
      <td>C₃₂</td>
      <td>C₃₃</td>
    </tr>
  </tbody></table>

con le stesse personalizzazioni di prima. In questo caso la tabella si adatterà alle dimensioni degli oggetti inseriti. Se vogliamo allineare i singoli oggetti oppure aumentare la distanza orizzontale o verticale tra di essi possiamo utilizzare i seguenti tag

<td style="padding-top: 12px;">  al posto di <td> per distanziare un oggetto dalla parte alta

<td style="padding-left: 12px;"> al posto di <td> per distanziarlo da quello alla sua sinistra

<td style="padding-top: 8px; padding-left: 15px;"> al posto di <td> per distanziarlo sia in alto sia a sinistra

I numeri in rosso possono essere calibrati in funzione della forma e delle dimensioni degli oggetti inseriti. Per ricordarsi i tag basta osservare che sono le iniziali dei vocaboli inglesi: table (tabella), raw (riga) e data.  Concludo mostrando come si possa ulteriormente personalizzare una tabella con l'aggiunta di opportuni CSS. Modificando soltanto la prima riga del codice in questo modo

<table style="border: #003366 2px solid; background-color: #ffeae9; color: #003366;" cellspacing="0" cellpadding="0"><tbody>

si colora la parte esterna della tabella e si inserisce uno stile per il bordo oltre a mettere un colore di background. Allo stesso modo si può personalizzare ogni singola cella della tabella intervenendo nel tag <td> per esempio in questo modo

<td style="border: #940F04 2px dashed; padding:10px;">

con l'inserimento di un bordo tratteggiato (dashed) e portando le distanze interne (padding) a 10 pixel.