In questo articolo vedremo un simpatico e semplice script che permette di animare un testo facendolo comparire come se questo venisse digitato tramite una macchina da scrivere.
In altre parole realizzeremo una funzione Javascript che acquisito in input un testo, lo scriverà, un carattere per volta, all’interno di un contenitore: div, textarea o altro.
In fondo all’articolo è possibile provare o scaricare il codice completo.

La funzione che vedremo prende in input 3 parametri:
1 – id del campo dove stampare il testo
2 – il testo da stampare
3 – la velocità (espressa in millisecondi) di digitazione
Inoltre forniremo allo script un quarto parametro opzionale (numerico) ad indicare la posizione nella quale scrivere il prossimo carattere.

Vediamo subito il codice della funzione macchinaDaScrivere:

<script type='text/javascript>
function macchinaDaScrivere(id_campo, testo, velocita, posizione){
    var lunghezza = testo.length;
    posizione = posizione || 0;
    if(posizione<lunghezza){
        var carattere = testo.substring(posizione,posizione+1);
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";
        setTimeout('macchinaDaScrivere("'+id_campo+'", "'+testo+'", '+velocita+', '+(posizione+1)+');', velocita);
    }else{
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,lunghezza);
    }
}
</script>

Analizziamo in maniera dettagliata la funzione Javascript macchinaDaScrivere.
Calcolo la lunghezza del testo da stampare e quindi imposto una variabile posizione ad indicare la posizione nel quale digitare il prossimo carattere.
Il cuore della funzione è chiuso all’interno di un if, valido fino a quando la posizione è minore della lunghezza del testo.
Nella variabile carattere imposto il prossimo carattere da stampare, utilizzando una substring:

var carattere = testo.substring(posizione,posizione+1);

A questo punto accodo il carattere in questione al testo già presente nel box contenitore identificato da id_campo:

document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";

La funzione è praticamente conclusa, non prima che questa venga richiamata con l’incremento della posizione. A tal proposito è ora chiaro il perchè della presenza del quarto parametro opzionale nella chiamata alla funzione; tale parametro alla prima chiamata varrà 0 (di default) e crescerà man mano che si avanzerà nel testo da digitare.
La funzione setTimeout utilizzerà il valore della variabile velocità per ritardare la scrittura del successivo carattere:

setTimeout('macchinaDaScrivere("'+id_campo+'","'+testo+'",'+velocita+','+(posizione+1)+');',velocita);

Infine è necessario notare la presenza di un carattere di underscore basso alla fine di ciascuna digitazione. E’ chiaro come questo carattere sia esclusivamente “ornamentale” e può essere facilmente rimosso dal codice.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Coloro che sviluppano quotidianamente in Javascript si saranno imbattuti almeno una volta in un problema piuttosto semplice da risolvere con linguaggi di programmazione come Java, PHP, C ecc.. ma non così immediato in Javascript: sostituire tutte le occorrenze di una stringa all’interno di un’altra stringa.
In Javascript non esiste una funzione pronta che effettui questo tipo di “lavoro“, infatti la replace(stringa, new_stringa) sostituisce solo la prima occorrenza di “stringa” e non le eventuali successive. In rete, fortunatamente, sono presenti svariate soluzioni le quali, solitamente, utilizzando espressioni regolari per determinare la sostituzione.

In questo articolo vedremo una possibile soluzione che non utilizza espressioni regolari bensì un semplice ciclo while combinato con le funzioni indexOf, substring e replace di Javascript. Il codice della funzione str_replace è il seguente:

<script type='text/javascript'>
function str_replace(s_search, s_replace, s_subject){
    var pointer = 0;
    while(s_subject.indexOf(s_search,pointer)!=-1){
        pointer = s_subject.indexOf(s_search,pointer);
        s_subject = s_subject.substring(0,pointer) + s_subject.substring(pointer).replace(s_search,s_replace);
        pointer = pointer + s_replace.length;
    }
    return s_subject;
}
</script>

La funzione può essere così richiamata:

var new_stringa = str_replace(str_da_cercare,str_da_sostituire,str_originale);

Analizziamo brevemente il codice della funzione str_replace.

Acquisisco tre parametri: stringa da cercare, stringa da sostituire, stringa su cui operare.
Imposto una variabile pointer a 0 (inizio stringa).
Ciclo sulla stringa fino a che indexOf è vera. Bisogna ricordare che indexOf restituisce la posizione della prima occorrenza di stringa da cercare:

s_subject.indexOf(s_search,pointer)

Con l’aiuto della variabile pointer effetto il taglio in due della stringa originale andando a sostituire con una replace la sotto-stringa trovata nella seconda parte di stringa originale:

s_subject = s_subject.substring(0,pointer)+s_subject.substring(pointer).replace(s_search, s_replace);

nel frattempo incremento pointer avanzando nella stringa:

pointer = pointer + s_replace.length;

La funzione può sembrare complessa nel suo insieme ma svolge in maniera adeguata il suo compito. Inutile sottolineare che questa è solo una possibile soluzione.
N.B. La funzione appena realizzata è case sensitive.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

In questo articolo risolveremo la problematica del maxlength di una textarea html utilizzando poche semplici righe di codice Javascript.
Come tutti sapranno, l’attributo maxlength è accettato esclusivamente dai campi di tipo testo e non dalle aree di testo.
Realizzeremo una funzione che chiameremo appunto maxlength che accetta in input 2 parametri obbligatori ed un terzo opzionale:

• riferimento alla textarea
• numero massimo di caratteri
• id campo contatore caratteri mancanti (opzionale)

Prima di vedere il codice chiariamo il concetto del terzo campo opzionale. Vorremmo ad esempio poter predisporre un contatore affiancato alla textarea che visualizzi il numero di caratteri cancora disponibili.
In fondo all’articolo è possibile scaricare il codice completo e testare una demo.

Ecco il codice della funzione maxlength:

function maxlength(area,max,id_campo){
    var conta = max - area.value.length;
    if(id_campo!=null){
        document.getElementById(id_campo).innerHTML=conta;
    }
    if(conta < 0){
        area.value = area.value.substring(0,max);
        if(id_campo!=null){
            document.getElementById(id_campo).innerHTML = '0';
        }
    }
}

Il codice della funzione è molto semplice:

• calcoliamo quanti caratteri sono ancora disponibili (var conta)
• se tale valore è minore di 0 allora cancelliamo i caratteri in più (substring)

Una volta definita la funzione, questa va così richiamata all’evento onKeyUp:

<!-- Soluzione base -->
<textarea rows="7" cols="40" onkeyup="maxlength(this,160)">
</textarea>

Qualora volessimo presentare all’utente anche il contatore dei caratteri ancora disponibili:

<!-- Soluzione con contatore caratteri disponibili -->
Hai a disposizione ancora <span id='conta'>160</span> caratteri:<br/>
<textarea rows="7" cols="40" onkeyup="maxlength(this,160,'conta')">
</textarea>

Da notare che nella seconda soluzione abbiamo aggiunto l’ID di un elemento di tipo span adibito a contatore.
In conclusione la sintassi della funzione maxlength è la seguente:

maxlength(this,max_caratteri,[id_contatore])

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Dopo aver compilato un modulo, l’utente è tenuto ad inviare i dati al server per usufruire di un particolare servizio.
Solitamente sul fondo di un form viene fornito un bottone che conclude la compilazione del modulo. La sintassi per questo particolare bottone è:

<input type="submit" value="Invia i dati" />

L’attributo type è avvalorato a submit e l’attributo value specifica un’etichetta per il bottone.
Al click del bottone di tipo submit, i dati del form vengono organizzati tramite il metodo di invio (attributo method) e quindi inviati alla pagina che li processerà (attributo action).

In alternativa all’invio dei dati, l’utente potrebbe decidere di annullare ciò che ha immesso nel modulo e riportare quindi il form stesso allo stato iniziale.
Per far ciò è necessario fornire un ulteriore bottone, questa volta di tipo reset che al click andrà a pulire in automatico ogni singolo campo del form:

<input type='reset' value='Pulisci form'/>

E’ utile posizionare questo bottone sul fondo della form, in concomitanza del bottone di submit. Il vantaggio è di fornire agli utenti un modo veloce ed efficiente per pulire i campi senza che questi debba cancellare a mano ogni singolo contenuto.

Bottoni di uso generale

Oltre i bottoni di submit e reset è possibile implementare ulteriori bottoni ai quali associare particolari funzioni definite dal programmatore.
La sintassi è la seguente:

<input type='button' value='Bottone' onClick='funzione()'/>

Il type è necessariamente impostato a button. Inoltre va definita la funzione da richiamare ad un particolare evento, in questo caso al clic del pulsante.
La parola chiave onClick rientra nella famiglia dei cosiddetti gestori di eventi dei quali sarà approfondito il significato nelle lezioni su Javascript.

Il tag BUTTON

Con l’HTML 4 è stato introdotto il tag button che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.
Il tag button, a differenza del tag input, dà la possibilità di inserire il testo del bottone tra l’apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice html all’interno del tag, o addirittura delle immagini o oggetti.
Analizziamo il codice html sottostante:

<button>
	<img src='img/esclamativo.jpg' alt='Invia' border='1'  align='middle'>
	Invia i dati
</button>

All’interno del bottone verrà visualizzata un’immagine e quindi un testo. Niente ci avrebbe vietato l’aggiunta di ulteriore testo o immagini al contenuto del bottone.

Disabilitare un bottone

Grazie all’attributo disable, infine, è possibile disabilitare un bottone in modo tale che questo non sia cliccabile.
Inoltre il browser visualizzerà tale bottone nella pagina con uno stile a basso rilievo ad intendere che il pulsante non è abilitato. La sintassi è la seguente:

<input type='submit' value='Invia i dati' disabled />

Il bottone sarà così visibile:

Uno dei fattori che ha decretato negli anni il successo del web è senza dubbio la possibilità che offre agli utenti di interagire con esso.
Pensiamo ad esempio ai forum, alle newsletter e alla possibilità di iscriversi a portali e chat. Per ognuno di questi esempi è indispensabile ritrovarsi dinnanzi a moduli html da compilare per usufruire del servizio e fornire i dati necessari al web server.
I form sono quindi da definirsi come l’area di una pagina html adibita all’inserimento di dati da parte degli utenti. Di seguito un esempio grafico di form:

Ogni modulo html è definito innanzitutto da un tag di apertura e da uno di chiusura:

<form … >
     …
</form>

All’interno di questo contenitore vanno quindi definiti il testo e gli elementi che compongono il form.
Solitamente l’invio dei dati è organizzato in due parti:

• una pagina iniziale che contiene il modulo che consente all’utente di effettuare scelte e immettere testo
• una pagina secondaria che viene richiamata dal modulo ed ha lo scopo di processare i dati ricevuti. Solitamente trattandosi di una pagina di programmazione che risiede sul server e può essere in CGI, ASP, PHP, JSP o altro linguaggio.

A tal proposito è necessario introdurre alcuni attributi indispensabili del tag form:

<form name=‘nome_form’ action=‘pagina_secondaria.php’ method=‘GET’>
    …
</form>

L’attributo name serve per indicare un nome ad un form, necessario per processare lato client(con Javascript) i dati del modulo.
L’attributo action definisce l’url della pagina o del programma che processerà i dati del modulo html.
L’attributo method, infine, definisce il metodo di invio dei dati al server. Può assumere valore GET o POST.

Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè nella stringa di interrogazione) secondo questa forma:

pagina_secondaria.php?parametro=valore&parametro=valore

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).

Controlli del modulo

Per controlli di un modulo html si intende l’insieme degli elementi che costituiscono il modulo stesso e che forniscono all’utente gli strumenti per effettuare scelte e immettere dati.
I tipi di controlli sono:

• Bottoni (submit/reset)
• Caselle di Testo (anche nascoste come pswd)
• Caselle di Spunta
• Radio Button (come caselle di spunta, ma mutex)
• Immagini (come i bottoni)
• Selezione di File
• Controlli nascosti

Per ciascuno di essi è possibile associare un’etichetta per identificare l’elemento in maniera univoca. Ogni controllo ha inoltre un nome (specificato nel codice html dall’attributo name) e un valore (specificato dall’attributo value) che può assumere significati diversi in relazione al tipo di controllo.
Il name e il value vengono accoppiati e passati dal browser al server per essere elaborati.

Il tag INPUT

Il tag <input> definisce un singolo campo che compone un modulo. La sintassi è la seguente:

<input  type=‘…’ />

L’input non prevede il tag di chiusura e l’attributo type specifica il tipo di dato che il campo contempla. Scrivere ad esempio : <input type=‘text’ /> ci permette di definire un campo di input di tipo testo.

Analizziamo il codice html che segue:

<form name='form' action='pagin.php' method='GET'>
	<table border='0'>
	<tr>
		<td>Nome :</td>
		<td><input type='text' name='nome'/></td>
	</tr>
	<tr>
		<td>Cognome:</td>
		<td><input type='text' name='cognome'/></td>
	</tr>
	<tr>
		<td>Codice Fiscale :</td>
		<td><input type='text' name='cf'/></td>
	</tr>
	</table>
</form>

Il form contiene tre campi di input di tipo testo. I campi sono tabellati e provvisti dell’attributo name. Il risultato nella finestra del browser è il seguente:

Grazie all’attributo value è inoltre possibile impostare un testo di default per ciascun campo di testo:

…
		<td><input type='text' name='nome‘ value=‘Il tuo nome’/></td>
…
		<td><input type='text' name=‘cognome’ value=‘Il tuo cognome’/></td>

Il campo di input di tipo testo permette inoltre di specificare il numero massimo di caratteri ammissibile. A tale scopo esistono alcuni attributi, tra i quali:

• SIZE (grandezza della casella mostrata nella pagina)
• MAXLENGTH (numero massimo di caratteri che l’utente può inserire)

La sintassi è la seguente:

<input type='text' name='nome' size='10' maxlength='10'/>

Informatica per le scienze umane
R. Botteri, F. Donatantonio , M. Ceracchi
(2011) Collana Quaderni di Lettere – Ed. C.E.S.D. srl

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso “Informatica per le Scienze Umane” il cui obiettivo è quello di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica, che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati all’attività di un umanista, mediante le lezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo per facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi, affinare e personalizzare le ricerche di area umanistica in Internet e consultare/creare archivi e biblioteche digitali.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

Fondamenti di Informatica
R. Botteri, F. Donatantonio, M. Ceracchi
(2011) Collana Quaderni di Psicologia – Ed. C.E.S.D. srl

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso di “Fondamenti di Informatica” per la Facoltà di Psicologia ed ha l’obiettivo di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati alla psicologia, mediante le sezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo, tesi a facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

In questo articolo realizzeremo un plugin jQuery che ci permetta di implementare una tabella HTML con le righe di due colori alternati.
In altre parole la nostra tabella avrà tutte le righe pari (2,4,6 ecc..) di un colore e quelle dispari (1,3,5 ecc..) di un altro colore.
Personalizzeremo, inoltre, il plugin con ulteriori caratteristiche. Ad esempio al passaggio del mouse su una riga, questa si animerà cambiando di colore e font.

Iniziamo subito lo sviluppo del plugin, che chiameremo “tzebra“, determinando quali saranno i parametri da passare alla funzione:

• Colore per righe dispari
• Colore per righe pari
• Colore per animazione riga

Una volta terminato il lavoro vorremmo poter invocare il plugin con questa sintassi:

$('#myTable').tzebra({
	color1: '#e0ffff',
	color2: '#add8e6',
	focusColor: '#00ffff'
});

Ottenendo quindi il seguente risultato:

Introduciamo il codice del plugin:

(function($){
	$.fn.tzebra = function(options) {

	var defaults = {
	   color1: "#FFFFFF",
	   color2: "#CCCCCC",
	   focusColor: ''
	};

	var options = $.extend(defaults, options);

	return this.each(function() {
		var id_table = $(this).attr('id');

		$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
		$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

		if(options.focusColor!=''){
			$('#'+id_table+ ' tbody tr').css('cursor','pointer');

			$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color1);
				$(this).css('font-weight','normal');
			});

			$('#'+id_table+ ' tbody tr:even').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color2);
				$(this).css('font-weight','normal');
			});
		}

		return false;
	});

	};
})(jQuery);

Analizziamo il codice focalizzando l’attenzione sulle istruzioni fondamentali che lo compongono.
Innanzitutto passiamo alla funzione i parametri all’interno dell’array “options“, per intenderci i tre colori da noi scelti. Nell’array “default” abbiamo invece impostato i tre colori di default qualora i parametri in input siano nulli.
Nella variabile “id_table” scriviamo l’ID della tabella, utilizzando il metodo attr; l’ID ci servirà per accedere alla nostra tabella.
I passi successivi creano l’effetto zebrato:

$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

Tramite un opportuno selettore impostiamo rispettivamente il colore per le righe pari(odd) e poi per quelle dispari(even), manipolando la proprietà background-color grazie al metodo css di jQuery.
Le righe pari avranno come colore di sfondo options.color1, mentre le righe dispari avranno come colore options.color2
A questo punto abbiamo reso zebrata la nostra tabella, resta da animare le righe al passaggio del mouse.
Da notare che di default abbiamo settato il focusColor a blank per permettere una maggiore personalizzazione del nostro plugin, infatti potremo evitare di passare come parametro il terzo colore (il colore del focus riga) lasciando la tabella al semplice stato zebrato.
Una volta controllato che sia stato impostato il focusColor aggiungiamo gli eventi mouseover e mouseout sulle righe della nostra tabella, modificando il css prima per le righe dispari e poi per quelle pari.
I seguenti passi, ad esempio, aggiungono l’animazione sulle righe pari:

$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
	$(this).css('background-color',options.focusColor);
	$(this).css('font-weight','bold');
 }).mouseout(function(){
	$(this).css('background-color',options.color1);
	$(this).css('font-weight','normal');
});

Al passaggio del mouse su una riga questa cambia di colore e il font diventa grassetto, quando il muose lascia la riga si ritorna allo stato precedente ripristinando colore e font.

Il plugin è concluso e pronto per l’uso.
Prima però è necessario salvare il codice in un file con estensione .js che chiameremo jquery.tzebra.js rispettando così la sintassi proposta da jQuery (jquery.[nome del plugin].js).

Richiamiamo il codice del plugin, realizziamo una semplice tabella e invochiamo il metodo tzebra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tabella zebrata</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.tzebra.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#myTable').tzebra({
		color1: '#e0ffff',
		color2: '#add8e6',
		focusColor: '#00ffff'
	});
});
</script>

</head>
<body>

<table id='myTable' border='0' cellpadding="0" cellspacing="0">
<thead>
<tr><th>Nome</th><th>Cognome</th><th>Voto Informatica</th><th>Voto Lettere</th></tr>
</thead>
<tbody>
<tr><td>Marco</td><td>Rossi</td><td>30</td><td>21</td></tr>
<tr><td>Luigi</td><td>Bianchi</td><td>22</td><td>26</td></tr>
<tr><td>Marco</td><td>Neri</td><td>24</td><td>24</td></tr>
<tr><td>Giuseppe</td><td>Rossi</td><td>18</td><td>20</td></tr>
<tr><td>Enrico</td><td>Giallo</td><td>20</td><td>18</td></tr>
<tr><td>Fabio</td><td>Neroni</td><td>27</td><td>30</td></tr>
</tbody>
</table>

</body>
</html>

L’unica attenzione che dobbiamo riporre nello scrivere il codice HTML della tabella è di racchiudere l’intestazione nel tag thead e il corpo nel tag tbody.
Al caricamento della pagina invochiamo tzebra passando i tre colori scelti, oppure volendo solo i primi due per gestire unicamente l’effetto zebrato.

Cliccando qui è possibile vedere in azione il plugin tzebra.

Cliccando qui è possibile scaricare il codice del plugin tzebra.

L’attributo COLSPAN

Finora abbiamo creato tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile.
In realtà è possibile raggruppare le celle all’interno delle colonne in modo da avere ad esempio una riga da 3 colonne e un’altra da 4. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne).
In questo caso si utilizza l’attributo COLSPAN all’interno del tag <td>, specificando come valore il numero di celle che devono essere occupate.
La sintassi è la seguente:

<td colspan='2'>… contenuto cella …</td>

In questo caso la cella occuperà il posto di due celle e il suo contenuto sarà visibile all’interno dello spazio creato.
Analizziamo a questo punto il codice completo di una tabella che contiene 3 righe, la prima composta da 4 celle, la seconda da 3 e la terza da 2 celle:

<html>
<head>
<title>TABELLE - COLSPAN</title>
</head>
<body>
<table border='1' width='400px'>
<tr>
	<td align='center'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 5</td>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td align='center'>Cella 8</td>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

Quando si utilizza l’attributo colspan è facile incorrere in errori. Ad esempio realizzare una riga con 4 colonne (celle) e successivamente una riga con sole 2 colonne provoca in fase di visualizzazione effetti indesiderati.
E’ sempre consigliabile, indipendentemente dal numero di celle unite che si andranno a realizzare, preparare una bozza cartacea della tabella comprensiva di un numero uguale di celle per ogni riga. Successivamente scegliere le celle da unire evidenziandole da un segno grafico e quindi realizzare il codice html.

L’attributo ROWSPAN

Anche l’attributo ROWSPAN è utile ad unire le celle di una tabella html. A differenza di colspan però questo attributo lavora sull’unione di righe.
In altre parole è possibile far si che una cella si estenda su più righe:

<td rowspan='2'>… contenuto cella …</td>

In questo caso infatti il contenuto della cella verrà visualizzato in una cella estesa su due righe (rowspan=’2′). E’ possibile inoltre combinare insieme rowspan e colspan se vogliamo ad esempio che una cella si estenda sia in orizzontale che in verticale.
Riprendendo il codice html proposto nella sezione precedente, modifichiamolo in modo tale che la prima cella si estenda su tutte e tre le righe lasciando intatte le colonne con attributo colspan:

<html>
<head>
<title>TABELLE - ROWSPAN</title>
</head>
<table border='1' width='400px'>
<tr>
	<td align='center' rowspan='3'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>

</body>
</html>

Di seguito è visibile la modifica apportata alla tabella con l’estensione della prima cella su tutte le righe:

Come per l’attributo colspan, anche con rowspan bisogna prestare particolare attenzione nella progettazione di una tabella e quindi valgono le regole definite in precedente. L’unica attenzione in più richiesta è quella di non perdere di vista il numero di righe su cui si estende una cella onde evitare di ritrovarsi con un numero di celle maggiore o minore su una delle righe successive.

Oltre che testo e immagini spesso è necessario inserire dei dati in tabelle e visualizzarle a video all’interno di pagine web.
Inoltre spesso una struttura tabellare è utilizzata per realizzare il layout di un sito web e per disporre i diversi elementi che costituiscono la pagina html. Ad esempio per formattare la pagina con un menu superiore, una barra laterale e un corpo centrale si utilizza una tabella con due colonne di cui una di larghezza minore per il menu laterale e una colonna larga per il corpo.
Per realizzare una tabella è necessario definire il tag:

<table border='1'>
… …
</table>

Al cui interno andranno specificate per ogni riga le celle che la compongono e quindi il contenuto. A tale scopo è necessario introdurre due tag fondamentali:

• TR è il tag che definisce una riga di una tabella;
• TD è il tag che definisce una singola cella della tabella.

La sintassi completa per realizzare una tabella è quindi la seguente:

<table border='1'>
    <tr>
        <td>Cella</td>
        …
    </tr>
    …
</table>

E’ necessario, così come definito nelle lezioni precedenti, attenersi ad una corretta nidificazione dei tag. Nel caso delle tabelle il tag TD deve essere sempre instanziato all’interno del tag TR.
Il codice html seguente descrive un esempio completo di tabella:

<html>
<head>
	<title>TABELLE HTML</title>
</head>
<body>
<h2 align='center'>La prima tabella</h2>

<table border='1'>
	<tr>
		<td>Cella 1</td>
		<td>Cella 2</td>
	</tr>
	<tr>
		<td>Cella 3</td>
		<td>Cella 4</td>
	</tr>
           <tr>
		<td>Cella 5</td>
		<td>Cella 6</td>
	</tr>
	<tr>
		<td>Cella 7</td>
		<td>Cella 8</td>
	</tr>
</table>
</body>
</html>

Analizzando il codice si evidenzia la presenza di una tabella con bordo di 1px composta da quattro righe e due colonne.
Il risultato all’interno del browser è il seguente:

Intestazione delle tabelle

E’ buona norma, soprattutto in presenza di tabelle che contengono dati, impostare una riga iniziale che funga da intestazione per le tabelle.
La sintassi è simile a quella vista per realizzare una singola riga con l’unica differenza che al posto del tag TD va utilizzato il tag TH:

<tr>
	<th>TITOLO COLONNA 1</th>
	<th>TITOLO COLONNA 2</th>
	…
</tr>

Il browser interpreterà il tag TH ed evidenzierà il contenuto utilizzando un carattere in grassetto e lo allineerà al centro della cella. Nonostante solitamente questo tag si usi nella prima riga della tabella, nulla vieta di utilizzare il tag TH in altri punti della stessa, come ad esempio riga del totale in fondo ad una tabella:

Altri attributi del tag TD

Tra gli attributi maggiormente utilizzati per il tag TD se ne identificano essenzialmente due: ALIGN e VALIGN, che rispettivamente hanno la funzione di definire un allineamento orizzontale e verticale del contenuto della cella.
Ad esempio scrivere la seguente riga di codice html:

<td align='center' valign='top'>
    Contenuto della cella...
</td>

comporta un allineamento al centro del contenuto della cella (align=’center’) ed inoltre un allineamento verso l’alto (valign=’top’) dello stesso contenuto.
Altri valori che può assumere l’attributo valign sono: BOTTOM, MIDDLE e BASELINE.
Di default la maggior parte dei browser utilizza MIDDLE come valore di valign.