domenica 29 novembre 2015

Come inserire una tabella in blogspot

Le tabelle sono elementi importanti nell'impaginazione di un documento o di un post; danno un senso di ordine e aumentano la leggibilità.

Purtroppo Blogspot non offre nessun strumento per inserire e gestire le tabelle nei post: in teoria, uno dovrebbe inserirsele "a mano", scrivendosi direttamente tutto il codice HTML necessario. Impresa non difficilissima (almeno se si hanno rudimenti elementari di HTML), ma abbastanza tediosa, soprattutto se si desidera formattare la propria tabella in maniera non elementare.

Per intenderci, una tabella semplicissima, come la seguente:

 
intestazione prima colonna intestazione seconda colonna
intestazione prima riga prima riga, prima colonna prima riga, seconda colonna
intestazione seconda riga seconda riga, prima colonna seconda riga, seconda colonna

richiede che si scriva il seguente codice:

<table border="1">  <tbody><tr>    <th></th>    <th>intestazione prima colonna</th>    <th>intestazione seconda colonna</th>  </tr><tr>    <td>intestazione prima riga</td>    <td>prima riga, prima colonna</td>    <td>prima riga, seconda colonna</td>  </tr><tr>    <td>intestazione seconda riga</td>    <td>seconda riga, prima colonna</td>    <td>seconda riga, seconda colonna</td>  </tr></tbody></table>

Se poi vogliamo usare tecniche più sofisticate (celle di differente colore, fondere assieme più celle, stili di testo differenti nelle varie celle) allora la quantità di codice da scrivere diventa veramente pesante; e, per esperienza, per quanto lo si scriva in maniera ordinata, è facilissimo commettere qualche errore; ed identificare gli errori nell'impaginazione HTML delle tabelle non è né semplice né gratificante.

Per fortuna ci viene in aiuto un bel tool gratuito on line, HTML Table Generator

Con questo tool possiamo creare tabelle di qualsiasi dimensione, inserendo i dati in un editor visuale (oppure importandoli da vari formati, csv compreso), impaginarle in qualsiasi maniera, e creare il codice HTML relativo che poi dovrà essere semplicemente copincollato all'interno del nostro post.

Alcune note:
  • lo strumento è potente ma semplice; l'uso è più o meno autoesplicativo ed autoevidente. Prendetevi magari dieci minuti di tempo e fate qualche esperimento, per familiarizzarvi con le funzioni e scoprirne il funzionamento.
  • Opzionalmente, è possibile generare il CSS. L'inserimento del CSS in Blogger richiede però un minimo esperienza; se ce l'avete non oncontrerete difficoltà, altrimenti semplificatevi la vita e selezionate "do not generate CSS"
  • Oltre che tabelle in HTML, Table Generator può creare anche tabelle in formato testo, per LaTeX ed in altri formati.
    particolarmente quelle in formato testo possono esser utili per semplici tabelle da inserire in un post (bisogna perèò avere l'accortezza di selezionare un font non proporzionale, come
Esempio di inserimento di tabella in formato testo (usando un font non proporzionale, ovvero Courier):

+---------------------------+-----------------------------+-------------------------------+
|                           | intestazione prima colonna  | intestazione seconda colonna  |
+---------------------------+-----------------------------+-------------------------------+
| intestazione prima riga   | prima riga, prima colonna   | prima riga, seconda colonna   |
+---------------------------+-----------------------------+-------------------------------+
| intestazione seconda riga | seconda riga, prima colonna | seconda riga, seconda colonna |
+---------------------------+-----------------------------+-------------------------------+

Se invece commettiamo l'errore di usare un font proporzionale il risultato sarà il seguente.:

+---------------------------+-----------------------------+-------------------------------+
|                           | intestazione prima colonna  | intestazione seconda colonna  |
+---------------------------+-----------------------------+-------------------------------+
| intestazione prima riga   | prima riga, prima colonna   | prima riga, seconda colonna   |
+---------------------------+-----------------------------+-------------------------------+
| intestazione seconda riga | seconda riga, prima colonna | seconda riga, seconda colonna |
+---------------------------+-----------------------------+-------------------------------+



Nessun commento:

Posta un commento