Come creare una tabella online con HTML e CSS.

Tool online per generare il codice HTML e CSS di una tabella che potrà essere personalizzata e resa responsive.

Gli Editor WYSIWYG ovvero What You See Is What You Get (ottieni quanto vedi in italiano) che sono disponibili per Blogger e per Wordpress non hanno dei bottoni per aggiungere una tabella ai post. La soluzione di usare Open Live Writer non è più facilmente praticabile perché non viene più mostrata l'anteprima della tabella in tale Editor rendendo difficile la sua realizzazione.

Molte tipologie di siti hanno spesso l'esigenza di pubblicare tabelle. Sono utili per schede tecniche di prodotti tecnologici ma anche per articoli di genere diversissimo. Una soluzione potrebbe essere quella di usare un Editor CSS gratuito come BlueGriffon che però dovrebbe essere installato nel computer.

Un'alternativa interessante è quella di usare strumenti online specifici per creare tabelle. In sostanza si impostano i parametri come il numero di righe, il numero di colonne, lo spazio tra le celle, il padding all'interno delle celle, la presenza o meno del bordo e il suo stile, la larghezza in pixel o in percentuale. Si digita il contenuto per poi ottenere il codice HTML da incollare nella pagina web in cui inserire la tabella.

In questo articolo mostrerò come creare una tabella online con due di questi strumenti e come eventualmente personalizzarla ulteriormente prima di aggiungerla a una pagina web.

HTML TABLES GENERATOR

HTML Tables Generator fa parte di un tool che insieme alle tabelle HTML permette di creare anche Tabelle di Testo e Tabelle La TeX per pagine web con formule matematiche.

Si inizia costruendo la tabella andando su Column per aggiungere colonne sulla destra o sulla sinistra e su Row per aggiungere le righe. Le colonne possono essere aggiunte a sinistra o a destra e le righe al di sopra o al di sotto.

Quando le celle sono state create bisognerà farci sopra un doppio click per iniziare a digitarne il contenuto. Si possono scegliere la famiglia di font e la dimensione dei caratteri.  Più a destra c'è anche la tavolozza dei colori. 

In alto su Table -> Set Size si possono scegliere il numero di colonne e righe se sono note fin dall'inizio mentre su Table -> Cell spacing si può impostare la distanza orizzontale e verticale tra le celle. Si va su Generate più in basso per generare il codice CSS e HTML da incollare nella pagina web.

Il codice sarà suddiviso in due parti. Nella prima compresa tra <style> e </style> viene generato il CSS mentre nella seconda parte il codice HTML a partire da <table> fino a </table>.  Se abbiamo già creato uno stile personalizzato per le tabelle potremo mettere la spunta su Do Not Generate CSS.

HTML DIV TABLE GENERATOR

HTML Div Table Generator è un altro tool per creare l'HTML di una tabella. Si tratta di un tool più o meno dello stesso livello del precedente. È da preferire al precedente se si ha già un CSS già impostato per le tabelle. Si imposta il numero delle righe e delle colonne cliccando con il mouse sull'apposita griglia 12x12.

Si può aggiungere il valore del bordo, quello della larghezza in pixel o in percentuale oltre al padding delle celle cioè la distanza tra il contenuto e il bordo. In basso su HTML si potrà aggiungere in contenuto in ogni cella.

Occorre digitare il contenuto di ciascuna cella tra i tag <td> e </td>. Si può anche incollare quello che è presente negli Appunti con la scorciatoia da tastiera Ctrl+V. Sulla sinistra verrà visualizzata l'anteprima della tabella. Per personalizzarla nell'aspetto si va su Table Styler che aprirà una seconda pagina.

Ci sono già dei modelli predisposti da applicare alla tabella che sono personalizzabili in ogni loro aspetto

Si possono impostare colori, dimensione dei font, bordi con codici dei colori e spessore per tutta la tabella, per il corpo della tabella e per la sua intestazione. Si potrà copiare il CSS quando siamo soddisfatti per incollarlo tra i tag <style> e </style> prima del codice HTML generato precedentemente.

In tale codice HTML va sostituita la riga <table> con la riga <table class="nomeclasse"> dove tale riga è la prima del riquadro HTML posto a sinistra del tool Table Styler.

COME APPLICARE UNO STILE PERSONALE A UNA TABELLA

Come esempio vi mostro come creare uno stile particolare di una tabella e come renderla Responsive. La prima operazione da fare è quella di ricavare l'HTML della tabella. Per esempio per una tabella 4x4  è il seguente:

<table>
<tbody>
<tr>
<td>C11</td>
<td>C12</td>
<td>C13</td>
<td>C14</td>
</tr>
<tr>
<td>C21</td>
<td>C22</td>
<td>C23</td>
<td>C24</td>
</tr>
<tr>
<td>C31</td>
<td>C32</td>
<td>C33</td>
<td>C34</td>
</tr>
<tr>
<td>C41</td>
<td>C42</td>
<td>C43</td>
<td>C44</td>
</tr>
</tbody>
</table>

Tale codice può essere ricavato con entrambi i tool mostrati senza utilizzare il CSS. Al posto di Cij si digitano i contenuti delle celle. Si incolla il codice della intestazione subito sotto a <tbody> che avrà questo codice

<tr>
       <th>Intestazione1</th>
       <th>Intestazione2</th>
       <th>Intestazione3</th>
       <th>Intestazione4</th>    
</tr>

per una tabella con quattro colonne. Per personalizzare la tabella nei colori si può incollare questo codice subito sopra alla riga ]]></b:skin> del Tema di Blogger o lo si incolla tra <style> e </style> prima dell'HTML

table.personale{
width:95%;
font-family:Georgia;
border-collapse: collapse;
border-spacing: 0;
border: 0px solid #bbb;
}
table.personale,table.personale th,table.personale td{
border:1px solid #ddd;
border-collapse:collapse;
}
table.personale td{
padding:15px;
}
.personale th {
padding:7px 10px;
text-align:left;
font-family:Georgia;
font-weight:400;
font-size:16px;
}
table.personale tr:nth-child(odd){
background-color:#f1f1f1;}
table.personale tr:nth-child(even){
background-color:#fff;}
table.personale th{
background-color:#333;
color:#fff;
border:1px solid #333;}
table.personale th:nth-child(even){
background-color:#555;
}

dove ovviamente i codici dei colori possono essere personalizzati.

Nel tag <table> si aggiunge la classe personale in questo modo <table class="personale"> e il risultato sarà come quello mostrato nello screenshot precedente. Con il CSS presente nel modello basterà modificare la prima riga del codice della tabella per avere tutte le tabelle del nostro sito pubblicate con lo stesso stile. La tabella con questo tipo di CSS e con l'HTML senza larghezze in pixel sarà Responsive cioè si adatterà automaticamente alle dimensioni del dispositivo.