Tabelle HTML

Nozioni di base

Le tabelle organizzano i dati in colonne e righe, come in un foglio di calcolo. Ad esempio, considera come sono organizzate le informazioni nella tabella seguente:

Il grafico sopra è stato creato con il seguente codice sorgente.

<table style="border:1px solid black">
 <tr>
  <td><b>HITS</b></td>
  <td><b>MONTH</b></td>
  <td><b>TOTAL INCREASE</b></td>
 </tr>
 <tr>
  <td>324,497</td>
  <td>January 1998 </td>
  <td style="text-align:center">-</td>
 </tr>
  <tr>
  <td>436,699</td>
  <td>February 1998</td>
  <td style="text-align:center">112,172</td>
 </tr>
</table>

Che cosa significa tutto questo?

L’istruzione

deve terminare la prima colonna. L’istruzione b rende il testo in grassetto. Lo stesso vale per le due righe successive.

Termina la prima riga.
Le tre righe successive sono simili a quanto spiegato sopra.

Simile al precedente td tranne che il contenuto è centrato.

Le prossime sei righe sono simili a quanto spiegato sopra.

Termina la tabella senza trasformare il resto del documento nella tabella.

Esempi

Esempio 1

<table>
 <tr>
  <td style="background-color:#FFFF00">1</td>
  <td style="background-color:#00FF00">2</td>
  <td style="background-color:#00FFFF">3</td>
 </tr>
 <tr>
  <td style="background-color:#FF00FF">4</td>
  <td style="background-color:#FF0000">5</td>
  <td style="background-color:#0000FF">6</td>
 </tr>
 <tr>
  <td style="background-color:#008080">7</td>
  <td style="background-color:#FFFF00">8</td>
  <td style="background-color:#00FFFF">9</td>
 </tr>
</table>

Td sta dichiarando una nuova cella, come spiegato nelle basi. Lo style=”background-color:#FFFF00″ dice al browser di che colore visualizzare la cella; in questo caso, #FFFF00 sarebbe giallo; potresti anche scrivere in giallo. Per ulteriori informazioni sui colori, visualizza la nostra pagina dei codici colore.

Esempio 2

L’immagine sopra è tre diverse immagini messe in una tabella che è al 100% della sezione dello schermo. Di seguito è riportato il codice sorgente utilizzato per l’esempio precedente.

<table border="0" style="width:100%">
 <tr>
  <td>
   <img src="https://www.computerhope.com/">
  </td>
  <td style="text-align:center">
   <img src="https://www.computerhope.com/can/ComputerHope-hope.jpg">
  </td>
  <td style="text-align:right">
   <img src="https://www.computerhope.com/">
  </td>
 </tr>
</table>

Esempio 3

Benvenuto in Computer Hope, uno dei siti Web gratuiti più avanzati su Internet, che ti aiuta con tutti i problemi relativi al computer. Aiutarti con argomenti come HTML, dove forniamo esempi, codice sorgente, miglioramenti, suggerimenti e molto altro.

Un modo per pubblicare immagini e testo uno accanto all’altro è utilizzare una tabella. Il codice sorgente sottostante mostra come abbiamo fatto quanto sopra. Abbiamo condensato la nostra dichiarazione per farla sembrare meno intimidatoria.

<table border="0">
 <tr>
  <td><img src="chguy.gif"></td>
  <td style="vertical-align:top">STATEMENT SHOWN ABOVE</td>
 </tr>
</table>

Lo style=”vertical-align:top” dice al browser di allineare l’inizio del testo nella parte superiore dell’immagine. La proprietà di allineamento verticale può anche essere una delle seguenti: middle, bottom, text-top, text-bottom, baseline, sub, super e molte altre.

Esempio 4

<table style="border:10px solid gray">
 <tr>
  <td><a href="https://www.computerhope.com/">Computer Hope</a></td>
 </tr>
</table>

Esempio 5

<table border="0">
 <tr>
  <td style="background-color:#0000FF"><b>WEB PAGE</b></td>
  <td style="background-color:#0000FF"><b>DESCRIPTION</b></td>
  <td style="background-color:#0000FF"><b>HITS</b></td>
  <td style="background-color:#0000FF"><b>MONTH</b></td>
 </tr>
 <tr>
  <td style="background-color:#00FFFF"><a href="https://www.computerhope.com/">ComputerHope</a></td>
  <td style="background-color:#00FFFF">Main page linking to all pages</td>
  <td style="background-color:#00FFFF"><b>3912</b></td>
  <td style="background-color:#00FFFF">Feb 98</td>
 </tr>
 <tr>
  <td style="background-color:#00FFFF"><a href="https://www.computerhope.com/cooltrik.htm">Cool Tricks</a></td>
  <td style="background-color:#00FFFF">HTML cool tricks</td>
  <td style="background-color:#00FFFF"><b>2514</b></td>
  <td style="background-color:#00FFFF">Feb 98</td>
 </tr>
</table>