Home » Webmaster » Allineamento verticale automatico nelle tabelle di WordPress

Allineamento verticale automatico nelle tabelle di WordPress

Il vertical align è necessario per non sfalsare la grafica di una tabella

Checché se ne dica, se uno deve postare dei dati per confronto ha bisogno di una tabella, c’è poco da fare con i blocchi automatici del nuovo editor di WordPress. Quando si inserisce una tabella è necessario che il testo in ciascuna colonna venga allineato verticalmente, soprattutto se il testo in ognuna di essa è di differente lunghezza e se vi sono più colonne. Sono pochi i temi di wordpress, compresi quelli premium, che hanno risolto in via definitiva questo problema e tocca ancora inserire il codice a mano ogni santa volta.

vertical align tabella

Questo sopra è lo screen di una banale tabella semplice formata da due colonne. Se noi la volessimo postare così com’è ora, avremmo il testo che inizia ad altezze differenti tra la prima e la seconda colonna.

Quindi, per allineare il testo al bordo alto della tabella in ambedue le colonne dobbiamo convertire la tabella in codice HTML, dall’editor Gutenberg di WordPress, e poi inserire il codice valign=”top” in ogni singola cella <td>. Fortunatamente nell’esempio sopra sono solo 2.

<table style="font-size: 11px;">
<tbody>
<tr>
<td valign="top">
<h3>La volpe e la cicogna - Esopo</h3>
<p>&nbsp;</p>
<p>C&rsquo;erano una volta una Volpe e una Cicogna, che avevano fatto amicizia. La Volpe allora pens&ograve; di invitare a pranzo la nuova amica.<br /> Ma quando dovette decidere cosa preparare, la Volpe pens&ograve; bene di fare un piccolo scherzetto alla signora Cicogna.</p>
<p>Prepar&ograve; un succulento brodino di verdure, e lo serv&igrave; su un un bel piatto di porcellana, con i bordi molto bassi e invit&ograve; la Cicogna ad assaggiarlo.</p>
<p>La cicogna, sentito il profumino del brodo, si sedette a tavola e cerc&ograve; di bere il brodino ancora fumante.<br /> Ma con il suo lungo e appuntito becco la Cicogna non riusciva a bere dal piatto basso che la volpe le aveva preparato.</p>
<p>La Volpe, che si stava divertendo un sacco alle spalle della cicogna, la invitava a bere e faceva finta di non capire coma mai non le piacesse.</p>
<p>La cicogna aveva ben capito lo scherzo della Volpe ma decise di far buon viso a cattivo gioco.<br /> &ndash; Scusami signora Volpe, ma oggi non mi sento molto bene, penso torner&ograve; a casa a riposare &ndash; disse la cicogna congedandosi dalla volpe.</p>
<p>Qualche giorno dopo fu la cicogna a invitare la Volpe a pranzo.</p>
</td>
<td valign="top">
<h3>La volpe e l&rsquo;uva - Esopo</h3>
<p>&nbsp;</p>
<p>C&rsquo;era una volta una volpe che vagava tranquilla per il bosco. Aveva appena bevuto ad un ruscello e si stava avventurando in cerca di cibo verso i campi coltivati, appena fuori dal paesello vicino.</p>
<p>Era gi&agrave; mattina inoltrata, e la fame iniziava a farsi sentire con sonori brontolii provenienti dal pancino.<br /> Ad un certo punto, dopo aver camminato per un po&rsquo;, vide una bella vigna piena di bellissimi grappoli d&rsquo;uva.</p>
<p>La volpe controll&ograve; che non ci fossero pericoli in vista e si avvicin&ograve; furtiva ad uno dei grappoli, quello che le sembrava pi&ugrave; vicino.<br /> Non c&rsquo;era nessuno nelle vicinanze. Era il momento perfetto per fare un bel salto e prendersi il grappolo d&rsquo;uva!</p>
<p>La volpe quindi prese la rincorsa e&hellip; hop! Fece un balzo cercando di afferrare coi denti il grappolo, ma niente: non ci arriv&ograve;.<br /> La volpe allora prese un po&rsquo; pi&ugrave; di rincorsa e hop! Fece un altro balzo, ma anche questo non era abbastanza alto per riuscire ad arrivare al grappolo d&rsquo;uva.<br /> La volpe allora prov&ograve; a prendere una rincorsa ancora pi&ugrave; lunga e hop! Niente, non arriv&ograve; a prendere il grappolo d&rsquo;uva.<br /> Intanto il suo pancino brontolava sempre pi&ugrave; dalla fame.</p>
</td>
</tr>
</tbody>
</table>

Il risultato è la tabella sottostante.

La volpe e la cicogna – Esopo


C’erano una volta una Volpe e una Cicogna, che avevano fatto amicizia. La Volpe allora pensò di invitare a pranzo la nuova amica.
Ma quando dovette decidere cosa preparare, la Volpe pensò bene di fare un piccolo scherzetto alla signora Cicogna.

Preparò un succulento brodino di verdure, e lo servì su un un bel piatto di porcellana, con i bordi molto bassi e invitò la Cicogna ad assaggiarlo.

La cicogna, sentito il profumino del brodo, si sedette a tavola e cercò di bere il brodino ancora fumante.
Ma con il suo lungo e appuntito becco la Cicogna non riusciva a bere dal piatto basso che la volpe le aveva preparato.

La Volpe, che si stava divertendo un sacco alle spalle della cicogna, la invitava a bere e faceva finta di non capire come mai non le piacesse.

La cicogna aveva ben capito lo scherzo della Volpe ma decise di far buon viso a cattivo gioco.
– Scusami signora Volpe, ma oggi non mi sento molto bene, penso tornerò a casa a riposare – disse la cicogna congedandosi dalla volpe.

Qualche giorno dopo fu la cicogna a invitare la Volpe a pranzo.

Arrivato il giorno del pranzo, mise tutti i cibi in vasi dal collo lungo, come quelli che si usano per i fiori. La cicogna infilava il suo lungo becco nei vasi, gustandosi i manicaretti prelibati che aveva preparato. La volpe, invece, per quanto provasse ad infilare il muso e ad allungare la lingua, rimase a bocca asciutta.

– Non ti piace il pranzo che ti ho preparato? – chiese la cicogna.
Così, la cicogna si vendicò della volpe burlona.

La volpe e l’uva – Esopo


C’era una volta una volpe che vagava tranquilla per il bosco. Aveva appena bevuto ad un ruscello e si stava avventurando in cerca di cibo verso i campi coltivati, appena fuori dal paesello vicino.

Era già mattina inoltrata, e la fame iniziava a farsi sentire con sonori brontolii provenienti dal pancino.
Ad un certo punto, dopo aver camminato per un po’, vide una bella vigna piena di bellissimi grappoli d’uva.

La volpe controllò che non ci fossero pericoli in vista e si avvicinò furtiva ad uno dei grappoli, quello che le sembrava più vicino.
Non c’era nessuno nelle vicinanze. Era il momento perfetto per fare un bel salto e prendersi il grappolo d’uva!

La volpe quindi prese la rincorsa e… hop! Fece un balzo cercando di afferrare coi denti il grappolo, ma niente: non ci arrivò.
La volpe allora prese un po’ più di rincorsa e hop! Fece un altro balzo, ma anche questo non era abbastanza alto per riuscire ad arrivare al grappolo d’uva.
La volpe allora provò a prendere una rincorsa ancora più lunga e hop! Niente, non arrivò a prendere il grappolo d’uva.
Intanto il suo pancino brontolava sempre più dalla fame.

Allontanandosi allora disse tra sé; – Mah, sono ancora acerbi –

Ora veniamo al punto, come rendere l’inserimento di valign=”top” automatizzato in ogni tabella creata, senza doverlo più inserire a mano.

Dal pannello di controllo dell’amministratore di WP, andate su Aspetto –> Editor del Tema –> sotto “File del tema” selezionare style.css del vostro tema attivo. Inserite in basso a tutto il codice:

table, th, td {
  vertical-align: top;
}

Salvare e fine.

Fonte fiabe: https://maestramile.altervista.org

Condividi l'articolo
Sottoscrivi
Notifica di
0 Commenti
Feedback in linea
Vedi tutti i commenti