All’interno del tag <table>, le nostre tabelle, è possibile creare colonne e righe a seconda delle nostre esigenze.
Il tag per creare le righe è <tr>
Il tag per creare le colonne è <td>
Le righe e le celle di una tabella possono contenere i vari attributi visti nella scorsa lezione, quindi è possibile assegnargli una larghezza o un’altezza (height, width) , l’allineamento (align, valign), il colore di sfondo (bgcolor), lo spazio tra le celle (cellspacing) ecc…
Quando diamo un attributo all’interno del tag table diamo questa caratteristica a tutta la tabella. Quando lo diamo solo ad una riga o ad una cella vale solo per questa.
Alcuni attributi utilizzati solo dal tag <td> sono:
- Nowrap : non manda a capo il testo
- Rowspan : unisce le righe, quindi la riga ad es col numero 2 è alta il doppio delle altre righe
- Colspan : unisce le celle, la cella ad es col numero 2 è larga il doppio delle altre celle
Facciamo un esempio:
Apriamo il nostro editor di testo e scriviamo
<html>
<head>
<title> La mia prima tabella</title>
<!--indica ai motori di ricerca di scansionare la mia pagina web-->
<meta name ="robots" content ="index, follow">
<!--le parole chiave della mai pagina web-->
<meta name= "keywords" content ="tabella, creare tabelle in html, html, corso html">
<!-- la descrizione della mia pagina web-->
<meta name ="description" content ="la mia prima tabella html">
<!-- il nome dell'autore della pagina-->
<meta name = "author" content ="IlmioNome">
</head>
<body>
<table align ="center" border="1" bgcolor="red" cellspacing="0">
<tr><td colspan="2">Prima riga larga quanto due celle</td><tr>
<tr>
<td rowspan= "2"> prima cella seconda riga alta due righe</td>
<td> seconda cella seconda riga la metà</td>
<tr>
<td> terza cella seconda riga la metà</td>
</tr>
</table>
</body>
</html>
Avremo ottenuto una tabella del genere:
| Prima riga larga quanto due celle | |
| prima cella seconda riga alta due righe | seconda cella seconda riga la metà |
| terza cella seconda riga la metà | |
Adesso divertiti ad applicare attributi alla vostra tabella.
Alla prossima....
Nessun commento:
Posta un commento