Come creare una tabella personalizzata con Open Live Writer.

Come creare con il CSS e pubblicare una tabella personalizzata con Open Live Writer.

Le tabelle sono oggetti HTML usati abitualmente nelle pagine web e nei blog. Sono un modo piuttosto semplice per organizzare i contenuti e per mostrarli in modo graficamente accattivante. Nel post precedente abbiamo visto quali siano i codici HTML e CSS da usare per creare e personalizzare una tabella.

In questo articolo invece vedremo come nello specifico si possa creare uno stile personale della tabella attraverso delle regole CSS, come incollare queste regole nel modello e come creare una tabella personalizzata con Open Live Writer senza dover digitare tutto il codice visto che OLW è un Editor WYSIWYG che supporta l'inserimento delle tabelle.

CREARE UNO STILE PERSONALIZZATO

Si parte dalla creazione di una classe di stile per la nostra tabella che potremo chiamare personale. Potremo realizzare anche più di una classe per poter creare tabelle con più stili personalizzati. Partiamo quindi da un codice come il seguente

/* CSS TABELLA INIZIO */
table.personale{
width:100%;
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:Helvetia;
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:#138679;
color:#fff;
border:1px solid #ddd;}
table.personale th:nth-child(even){
background-color:#138679;
}
/* CSS TABELLA FINE */

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera posta a sinistra della sezione <b:skin> in modo da visualizzare tutta la sezione. Il codice precedente si incolla subito sopra alla riga ]]></b:skin>.  Se si vogliono creare più stili diversi si può sostituire personale con personale1, personale2 per poi modificare i parametri dei codici dei colori, dello stile del bordo, della famiglia di font, margini e padding, ecc. Per poter utilizzare OLW al meglio si deve aggiornare il modello andando su Blog Account > Update Theme. In questo modo il software rileverà il CSS della tabella appena aggiunto nel template

COME CREARE UNA TABELLA CON OPEN LIVE WRITER

Per creare una tabella si va su Insert > Table

Nella finestra che si apre digiteremo il numero delle righe (Rows), il numero delle colonne (Columns), la larghezza in Pixel della tabella quindi si clicca su Insert.

Si visualizzeranno tutte le celle della tabella. In Open Live Writer così come su WLW non viene però inserita nella tabella la Intestazione che invece è un elemento importante. Si va quindi su Source per visualizzare l'HTML della tabella e aggiungervi l'intestazione manualmente

Il codice si aggiunge subito sotto il tag <tbody> come mostrato nello screenshot e come questo

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

in cui viene usato oltre al tag <tr> per la riga anche il tag <th> per la intestazione. Il codice è solo un esempio e serve per una tabella con tre colonne. Se le colonne fossero di più dovremo aggiungere altre righe con la stessa sintassi. Il testo Intestazione1, 2, 3, ecc sarà sostituito dal titolo della colonna. Ora si aggiunge al tag <table> la classe della tabella cioè <table class="personale"> 

nel modo mostrato nello screenshot precedente. Se adesso si passa da Source a Edit visualizzeremo quasi tutti i colori della tabella (non saranno visibili quelli delle pseudo-classi tr:nth-child

A questo punto digiteremo i contenuti nelle varie celle oppure incolleremo immagini con Ctrl+V (scorciatoia da tastiera di OLW). I contenuti delle celle possono anche essere formattati

Non resta che pubblicare il post con la tabella secondo le solite modalità. Il risultato avrà

visibili anche i colori delle righe che invece non sono rilevati da Open Live Writer. OLW inserisce alcuni tag deprecati come cellspacing e cellpadding e anche la larghezza della tabella. Questi tag si possono eliminare o si possono anche lasciare visto che l'aspetto finale non ne risente.