![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJ_4ZvGODerbl1qUb5-Rpkgw4LoiJV6MJfBuPgahIE6N21pmyjv-xbsPzFBa7158sKWjeJkw0-LIBofcxpB7enOJZXnNwLSMyTjuhzA4FwiH20AHpLlI6FQBRHe3-o7mp3ayAyRPgqdla/s1600-rw/how-to-grid-tutorial.jpg)
Il sistema utilizzato da me è quello delle tabelle (presto un tutorial - se non video tutorial - sull'argomento), che possono sembrare difficili da realizzare, ma che una volta capito il sistema, non c'è niente di più semplice!
Prima di ogni altra cosa avrete bisogno delle immagini che richiamino i vostri tutorials...
eccone una...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaf8RGZPBDgapy_yQf1gNPtmT0tnb0lZwJm5Imsu6txyq4BIV3mNpFxQDLYD1ckMd8x8SK8H4xVQegMn8eeAlHXOWcs2D-lHMHdZYWVK57Ovsbn3Uf5xbNTkR3JOWL6-qL9uOqDb_CUWWy/s1600-rw/19.png)
ed eccona un'altra...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Y54Zf82_tI4Co_VUuELQFVU0TUDHqQ50On8Lhk2pJcNAiBTqr8FNmb6CGYtZKCMlCHbgbw-Jv4Cd2PyKLs2_bPvL6DYLZ-atikTLv-FqmFou4OTApNOi0400zXCN_rhW0KUirhvyyhGC/s1600-rw/20.png)
Proprio per evitare questo stile a colonna, o di inserirle affiancate, ma averle quasi appiccicate (mi riferisco alle blogger che non hanno dimestichezza con i codici), è possibile affidarsi alle tabelle.
Piccolo promemoria!
Ricordate i tag, ovvero le paroline inserite nelle '<...>', hanno un'apertura ed una chiusura, riconoscibile dalla barretta trasversale subito dopo la prima virgoletta '</...>'.
Se non chiudete bene il tag, sicuramente vi sarà segnalato un errore!
La base del codice è questo:
<table>
<tr>
<td>
</td>
</tr>
</table>
<tr>
<td>
</td>
</tr>
</table>
Vediamo un po' cosa significano questi tags:
- table sta per tabella e racchiude tutto ciò che sta all'interno.
- tr sta per table row, ovvero la riga nel quale sono contenuti gli elementi.
- td sta per table data, ossia cella conosciuta meglio come colonna (è così che la chiamerò io) nel quale inserire i dati (scritti o immagini).
Questo giusto per farvi capire in linea di massima come sono strutturate le tabelle, ma in un altro contesto vi spiegherò come utilizzarle al meglio.
Torniamo a noi!
Le immagini che io ho inserito nella mia pagina sono racchiusi in una tabella a due colonne e tante righe, quante me ne servono.
Quando si deve lavorare con i codici, vi consiglio (ma certamente lo sapete già) di utilizzare sempre in modalità HTML del post, e anche di caricare le immagini da qui. Sarà più semplice posizionarle nelle varie colonne.
Ecco il codice per una tabella ad una riga e due colonne:
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
Vi basterà cliccare all'interno del tag td, ovvero nello spazio che intercorre fra '<td>' e '</td>' (per facilitarvi ho creato questo spazio) e caricare la vostra immagine.
Una volta caricate le immagini, vi basterà andare in modalità Scrivi, cliccare sulle di esse e dare il comando inserisci link. Così vi sarà più facile aggiungere un collegamento, ma anche a quale immagine lo stiamo facendo :)
Per avere più righe a due colonne, vi basterà duplicare i tag tr con tutto il loro contenuto (meglio se prima di aggiungere le immagini).
PER APPROFONDIRE
- Questo metodo vale anche per l'inserimento di tabelle all'interno di gadget nella sidebar, come visto qui.
- Ricorda che puoi sempre creare un post apposito dove ospitare le immagini che usi nella sidebar, quasi fosse una cartella immagini.
Grazie Simona! Leggo, studio e prima o poi applicherò!! ^_^
RispondiEliminaQuante cose ho ancora da imparare ...mi sembra di gattonare ancora nel mondo del blog,,,
RispondiEliminaper fortuna che ti ho trovata!
Un grande abbraccio e grazie per essere passata a trovarmi!
Waoooooooo già fatto. Sei splendida.
RispondiEliminaGrazieeeee
Sei sempre molto carina.... ottime spiegazioni.
RispondiEliminaBrava Simona! Ottimo post per iniziare a prendere confidenza con i codici delle tabelle. Ci proverò :-) Io le avevo scoperte tempo fa ed utilizzate in qualche post, ma se non avessi CodePen non riuscirei a scrivere il codice corretto! Per le neofite di codici come me che si mordono le labbra ogni volta che ci mettono mano è davvero uno strumento indispensabile per non morire in mezzo ai tr < " /.
RispondiEliminaBuon fine settimana :)
Cecilia K
Grazie a tutte :D
RispondiElimina@Cecilia K... al limite ora puoi salvare questo codice in un post 'bozza' così da averlo sempre a portata di mano ;)
:-) si, è più pratico sicuramente!
EliminaAdoro te e il tuo blog <3
RispondiEliminaWow sei troppo gentile ♥
EliminaCaspita un'altra chicca da non perdere!
RispondiEliminaGrazzissime!!!
Simona, grazie davvero!
RispondiEliminaSono riuscita a realizzare l'inserimento delle immagini.
Un bacione!
Grazie Mary, ho visto!!!!!!! e fanno un figurano ihihihih
EliminaBaci!!!
ma che ho scritto? volevo dire figurone XD
EliminaSimona, ho provato ma non funziona, almeno a me, sicuramente sbaglio qualcosa, mi puoi aiutare? ti ho scritto un email, qualche giorno fa,..... grazie
RispondiEliminaciao Marilù!!
EliminaTi ho risposto quasi subito, prova a guardre nella cartella dello spam, magari gmail lo ha inserito lì, visto che ci sono dei links...
Ti ho inviato il codice corretto [effettivamente avevi sbagliato qualcosina ;) ]
Splendido tutorial! Chiarissima come sempre! E arriva a proposito: mi serviva giusto capire come disporre le immagini a griglia per un post che sto preparando.
RispondiElimina