back to top

Gestire l’allineamento con HTML: il tag center e gli attributi align e valign

Attraverso il markup HTML è possibile definire l’allineamento degli elementi costitutivi della pagina (testo, immagini, tabelle, ecc.) per farlo si ricorre al tag <center> e agli attributi align e valign. E’ bene precisare, tuttavia, che ad oggi si tratta di tecniche di allineamento deprecate in quanto la presentazione dei contenuti dovrebbe essere gestita esclusivamente attraverso i CSS.

Il tag <center>

Come è facile immaginare questo tag veniva utilizzato per centrare del testo o degli elementi della pagina come immagini e tabelle. Vediamo un esempio di tabella centrata utilizzando il tag <center>:

<center>
  <table border="0">
  ...
  <table>
</center>

Come potete vedere l’elemento che abbiamo voluto centrare è compreso tra il tag <center> e </center>.

Ad oggi questo tag è uscito dalle specifiche del linguaggio tant’è che HTML5 nè ha escluso il supporto ed il suo utilizzo è vivamente sconsigliato.

Gli attributi align e valign

Questi attributi possono essere applicati a diversi tag HTML. Nello specifico l’attributo align riguarda l’allineamento orizzontale mentre valign quello verticale.

I valori possibili per align sono "left", "center" e "right" (il valore di default è "left"). Questo attributo veniva solitamente applicato ai tag <p>, <div> e <td> per definire l’allineamento dei rispettivi contenuti. Veniva spesso applicato anche al tag <img> per definire l’allineamento dell’immagine stessa in relazione ad eventuali elementi adiacenti.

<img src="foto.jpg" align="right">

L’attributo valign, come detto, definisce l’allineamento verticale e può avere uno di questi valori: "top", "middle", "bottom" e "baseline". Questo attributo veniva utilizzato frequentemente nelle tabelle per allineare verticalmente il contenuto di righe (<tr>) o singole celle (<td>).

<table>
  <tr>
    <td valign="top">
    bla bla bla
    </td>
    <td>
    bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla
    </td>  
  </tr>
</table>

Vediamo, attraverso una semplice immagine, l’effetto degli attributi align e valign applicati alle celle di una tabella:

attributi align e valign

Come detto anche l’utilizzo di questi attributi è assolutamente deprecato dovendosi utilizzare, per raggiungere le finalità descritte, le proprietà dei CSS text-align e vertical-align.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).