Ideale per chi cerca una vacanza tutta spiaggia e relax o per chi desidera visitare Venezia e immergersi nella sua unicità fatta di arte e storia.

sabato 9 gennaio 2016

HTML in pillole: come inserire una tabella

L'html è il linguaggio usato in informatica per formattare e impaginare  documenti sotto forma di pagine web.

Nato negli anni '80 ha subito enormi cambiamenti e al giorno d'oggi esistono applicazioni che generano automaticamente i codici.

Per chi utilizza Blogspot, eBay o mantiene dei siti "artigianali", può essere ancora utile sapere come integrare i testi con alcuni semplici codici.

Vediamo quindi come inserire una tabella con un numero di celle uguali all'interno di ciascuna riga (utile anche se si vogliono inserire immagini affiancate).

I tag necessari per creare una tabella sono:
<table> : apre la tabella
<tr>  “table row”: indica l’apertura di una riga
<td> “table data”: indica una cella all’interno di una riga


L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle.

ES 1:

<table border="2">
   <tr>
      <td>prima cella</td>
      <td>seconda cella</td>
   </tr>
  <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
   </tr>
</table>

Che viene visualizzato così:

prima cellaseconda cella
terza cellaquarta cella

Le celle si adatteranno alla larghezza del testo/immagine.

Se invece vogliamo specificare noi larghezza e altezza delle tabelle dobbiamo utilizzare gli attributi width e height.
Il valore di questi attributi può essere specificato con una larghezza fissa: in pixel (indicando un numero intero), oppure in percentuale e possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>).

ES 2:

<table width="300" height="100" border="1">
   <tr>
      <td>prima cella</td>
      <td>seconda cella</td>
  </tr>

   <tr>
      <td>terza cella</td>
      <td>quarta cella</td>
  </tr>
</table>
Che viene visualizzato così:

prima cella seconda cella
terza cella quarta cella


ES 3:

<table width="70%" border="1">
   <tr>
       <td width="30%">prima cella</td>
       <td width="70%">seconda cella</td>
  </tr>

  <tr>
       <td width="30%">terza cella</td>
       <td width="70%">quarta cella</td>
  </tr>
</table>
Che viene visualizzato così:

prima cella seconda cella
terza cella quarta cella




Nessun commento:

Posta un commento

Related Posts Plugin for WordPress, Blogger...

Per investimenti effettuati tramite questa promozione.