Con questo articolo vediamo due nuovi tag HTML che sono il tag <table> e il tag <div>.
Il tag <table> serve appunto per realizzare delle tabelle; all’interno del tag è necessario inserire i tag <tr> per aggiungere nuove righe e i tag <td> per aggiungere nuove colonne. L’esempio di seguito chiarisce un po’ le idee:
<table style="border: 1px solid black;">
<tr>
<td> 00
</td>
<td> 01
</td>
</tr>
<tr>
<td> 01
</td>
<td> 11
</td>
</tr>
</table>
Con il codice di esempio sarà visualizzata una tabella con due righe e due colonne; inoltre è stato impostato nell’attributo style del tag <table> la proprietà che visualizza il bordo della tabella dello spessore di 1 pixel e di colore nero. Di seguito il risultato:
| 00 | 01 |
| 01 | 11 |
È possibile impostare anche lo stile del contenuto dei tag <tr> e dei tag <td> per modificare a proprio piacimento la visualizzazione della tabella; fai tutte le prove necessarie per capire come funzionano le tabelle e la formattazione delle stesse.
Il tag <div> a differenza delle tabelle si adatta meglio alla realizzazione e formattazione di pagine web.
Il <div> rappresenta un contenitore di qualcosa, che sia testo o codice HTML o altro. Con i <div> componiamo le pagine web in modo più strutturato, per esempio impostando un header, una parte centrale o un footer; possiamo immaginare i div come sezioni delle pagine web così come esistono le sezioni nelle pagine di un quotidiano; in realtà i div sono molto utili per racchiudere e gestire pezzi di codice HTML, sono utilizzati un po’ per tutte le esigenze.
I <div>, sempre attraverso l’attributo style, sfruttano delle proprietà molto importanti che sono “margin” e “padding”; attraverso margin impostiamo lo spazio che ci deve essere tra i div adiacenti; attraverso padding impostiamo lo spazio che ci deve essere all’interno del singolo div. Come sempre un esempio chiarirà le cose:
<div style="margin:20 px; background-color: red">primo div</div> <div style="padding:10 px; background-color: red">secondo div</div>
Il codice precedente produrrà i due blocchi di seguito:
Come puoi notare il primo div ha un margine rispetto ai div adiacenti di 20 pixel mentre il secondo div è più grande del primo poiché ha un padding di 10 pixel; la grandezza del primo div, non essendo impostato il padding, sarà pari al suo contenuto (in questo caso al testo “primo div”).
Non ti resta che fare tutte le prove possibili impostando i margini, i padding, i colori per capire il comportamento del tag <div>.
Cerca di comprendere il funzionamento dei tag e degli stili HTML, fai tutte le prove possibili per “diventare padrone” del codice però ricorda che non serve essere un manuale e memorizzare tutto, quando avrai la necessità di impostare della grafica andrai ad approfondire ciò che ti serve; considera che con il tempo sono stati sviluppati motori di templating che rendono la vita meno difficile ai disegnatori di pagine web; non preoccuparti ne parleremo nei successivi articoli.
Non esitare a lasciare un commento o chiedere informazioni per chiarire i tuoi dubbi!