Pubblicato il 04/10/11e aggiornato il

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

tabella-windows-live-writer 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

inserire-immagini-in-una-tabella

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

inserire-codici-bottoni

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">C11</td>
      <td width="200">C12</td>
      <td width="200">C13</td>
    </tr>
    <tr>
      <td width="200">C21</td>
      <td width="200">C22</td>
      <td width="200">C23</td>
    </tr>
    <tr>
      <td width="200">C31</td>
      <td width="200">C32</td>
      <td width="200">C33</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 Cij 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>C11</td>
      <td>C12</td>
      <td>C13</td>
    </tr>
    <tr>
      <td>C21</td>
      <td>C22</td>
      <td>C23</td>
    </tr>
    <tr>
      <td>C31</td>
      <td>C32</td>
      <td>C33</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.





17 commenti :

  1. Sei sicuro di non esserti dimenticato qualche virgola????????
    Scherzo: sempre eccezziunale il nostro Ernesto.

    RispondiElimina
  2. Grazie!!! Geniale usare windows live writer!!!

    RispondiElimina
  3. Ciao ho aperto un blog di pronostici sportivi su blogger, avrei bisogno appunto d una tabella per poter scrivere in modo ordinato gli avventi e pronostici! Sapresti aiutarmi! Grazie

    RispondiElimina
    Risposte
    1. @ Luke
      Oltre a questo codice per creare una tabella non saprei come aiutarti. Dovresti cercare in rete dei siti che offrono widget con i risultati di calcio e simili.

      Elimina
    2. Ho capito, in effetti i siti di pronostici usano quasi tutti proprio delle tabelle per quello volevo crearne una anche io. Grazie lo stesso

      Elimina
  4. In pratica ho il codice IFRAME del badge della pagina facebook e per applicargli il contorno ho usato le risorse trovate nel forum che le dicevo. Inserendo prima del codice facebook la prima porzione di html trovata nel forum e chiudendo in coda al codice facebook sempre con l'HTML trovato sul forum.

    Quel che mi chiedo è: Dato che il badge di facebook è trasparente. E' possibile colorare lo spazio interno alla cornice di bianco? In modo che il badge stesso non sia più a sfondo trasparente bensì: bianco?

    Non so quanto senso possa avere una richiesta di questo tipo. Provando ad applicare (con la mia scarsissima conoscenza in materia) i suggerimenti raccolti qui sopra non sono riuscito ad ottener nulla..

    (sempre grazie)

    RispondiElimina
    Risposte
    1. @ Non credo si possa mettere uno sfondo a un IFrame, al massimo si può mettere alla pagina sorgente cioè a quella che viene dopo src=...

      Elimina
  5. molto molto utile questo post! grazie mille!

    RispondiElimina
  6. articolo utilissimo grazie!!!!!!!!! :)

    RispondiElimina
  7. Ernesto, perdonami, per quale motivo inserendo la tabella su Writer in anteprima è corretta, poi pubblicando il post la tabella medesima va completamente oltre lo spazio del blog?
    devo aggiungere manualmente qualche tag specifico su Blogger?

    P.s. i tuoi contributi sono sempre utilissimi
    Fabio

    RispondiElimina
    Risposte
    1. Diminuisci la larghezza della tabella @#

      Elimina
    2. L'ho fatto, naturalmente, ma poi me la reimposta come cavolo vuole...non capisco...

      Elimina
    3. Ho inserito il tuo codice html base con larghezza 600 px utilizzando direttamente Blogger senza Writer. In anteprima è ok.
      Inserisco una qualunque parola e la tabella va fuori dalla larghezza del post.
      Che cosa impedisce a blogger di mantenere la larghezza imposta?
      Grazie e scusa il disturbo

      Elimina
    4. In prima battuta prova a pubblicare il post direttamente da HTML senza tornare su Scrivi. In seconda battuta prova a mettere la larghezza in percentuale invece che in valore assoluto. Es: width="75%"

      Elimina
  8. ciao ernesto, come faccio a centrare la tabella nel post? grazie

    RispondiElimina
    Risposte
    1. @# Devi usare questo codice
      <div align='center'>
      Codice della tabella
      </div>

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.