Come creare una tabella in HTML

Come creare una tabella in HTML

—————————————————————–

Ciao a tutti ragazzi! Oggi capiremo insieme come creare una tabella in HTML. Come me qualcuno penserà che  è una cosa alquanto difficile e che ci vuole parecchio tempo per impararla, e invece no! Con 5 minuti impareremo come creare una tabella in HTML a tutti gli effetti. Ovviamente quando dico HTML, qualche codice tipo le tabelle, i collegamenti ipertestuali, gli iFrame etc…, si intende anche il PHP, o l’ASP, ASPX XHTML e/o HTML5. WordPress ad esempio usa il PHP, quindi possiamo andare tranquilli e seguire le istruzioni. Ora basta parlare, andiamo!

 


 

Allora, per cominciare iniziamo ad aprire il TAG della tabella con questo codice:

<table>

Ok, ci siamo? Fin qui è tutto estremamente facile? Giusto? Bene!

Ora però ci dovremo mettere anche delle colonne orizzontali, giusto? Perfetto! Andiamo a vedere come fare.

<table>
     <tr>
           <td>Ciao</td>    
     </tr>  
</table>

Dopo aver fatto questa cosa, siamo a questo punto:

Ciao!

Perfetto…come puoi vedere siamo già a buon punto! 😀

Ora però dobbiamo aggiungere anche altre colonne. Ecco come:

<table>
     <tr>
           <td>Ciao</td>
           <td>Ecco la seconda colonna!</td>
     </tr>
</table>

Ecco il risultato:

Ciao Ecco la seconda colonna!

Ok, fatto? Bene, procediamo!

Ora creiamo una nuova riga.

<table>
     <tr>
           <td>Ciao</td>
           <td>Ecco la seconda colonna!</td>
     </tr>
     <tr>
           <td>Tutto ok fin qui?</td>
</table>

Se tutto va bene, otteniamo questo:

Ciao Ecco la seconda colonna!
Tutto ok fin qui?

 

Se volete ulteriori spiegazioni, continuate a leggere! 

Quindi, come avrete sicuramente capito per aggiungere un altro paragrafo alla seconda colonna della seconda riga, basterebbe aggiungere un altro

<td> *testo* </td>

per ottenere questo:

Ciao Ecco la seconda colonna!
Tutto ok fin qui? *testo*

Ecco invece delle altre “impostazioni” della tabella.

Fino ad adesso abbiamo visto come creare una tabella, ma ad esempio, se volessimo il bordo della tabella più spesso, come fare?

È semplice, di default la tabella mette spessore 1 PX (pixel), ma per modificarlo? Ecco come:

Andando all’apertura del TAG

<table>

Lo sostituiamo con:

<table border="2">

Se vogliamo due pixel di spessore, se ne vogliamo tre invece

<table border="3">

Se ne volessimo 4

<table border="4">

E via di seguito…


Come possiamo vedere qui ad esempio:

Ciao Ecco la seconda colonna!

La tabella non è perfetta, ossia che la colonna di sinistra è meno spaziosa rispetto a quella destra. Non disperate, c’è un modo per “rimediare”. 

Prendiamo l’HTML della tabella soprastante:

<table>
     <tr>
           <td>Ciao</td>
           <td>Ecco la seconda colonna!</td>
     </tr>

</table>

Basta che aggiungiamo

<td width="50%">Ciao</td>
<td width="50%">Ecco la seconda colonna!</td>

In modo tale da specificare la percentuale ( % ) dello spazio nella pagina. In questo caso io ho usato 50% e 50% così da avere mezza pagina della riga “Ciao” e mezza pagina della riga “Ecco la seconda colonna”. Vediamo insieme il risultato:

Ciao Ecco la seconda colonna!

Se invece volessimo avere la cella “Ecco la seconda colonna” più spaziosa della cella “Ciao”, Dovremo semplicemente modificare i valori quindi…

<td width="20%">Ciao</td>
<td width="80%">Ecco la seconda colonna!</td>

Tutto ok? Controlliamo:
😉

Ciao Ecco la seconda colonna!

Ok, e per finire…

Una TABELLA riassuntiva: 😀

Tag Descrizione:
 <table> Apre la tabella
 <tr> “Table Row”:Apre una riga
<td> Apre una colonna

Grazie dell’attenzione! Ciao da…

Andrea De Angelis !


Comments are closed.