curs webdesign
Tabele în HTML Tabelele au o mare utilizare deoarece tabele constituie structura care stă la baza organizării marii majorităţi a paginilor web. Tabelul este format din linii şi coloane împărţind zona în celule. Fiecare celulă păstrează informaţia care va fi afişată. Pentru o afişare corectă a tabelului fiecare rând va avea acelaşi număr de celule. Dacă dorim ca o celulă să fie goală vom introduce un spaţiu gol (space) sau codul echivalent &nbsp;. Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> iar pentru o celulă <td> şi </td>. Exemplu: tabel cu 2 coloane şi 2 randuri, border 1, coloană 1 lăţime 80px, coloană 2 latime 160px, fiecare celulă are o altă culoare de fond (bgcolor) HTML
Afisare
<table border="1"> <tr><td width="80" bgcolor="red">rosu</td> <td width="160" bgcolor="yellow">galben</td> </tr> <tr><td bgcolor="white">alb</td> <td bgcolor="green">verde</td></tr> </table>
Rosu Galben Alb Verde
Atributele etichetei table sunt: border = bordura (0 = lipsa bordura) width = latimea tabelului height = inaltimea tabelului bgcolor = culoarea de fundal background = imaginea de fundal (W3C invalid, folositi style) cellspacing = distanta intre celule cellpadding = distanta dintre marginea celulei si continut Atributele etichetei td sunt: align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru) valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc) width = latimea celulei height = inaltimea celulei bgcolor = culoarea de fundal background = imaginea de fundal (W3C invalid, folositi style) colspan = uneste celula cu cea din dreapta ei rowspan = uneste celula cu cea de sub ea Exemplu: un tabel în care am folosit colspan pentru a uni celulele 1 şi 2 din rândul 2 şi rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4 HTML <table border="1"><tr> <td bgcolor="white">R1 C1</td> <td bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td colspan="2" bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td> </tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td> <td bgcolor="yellow">R3 C2</td> <td bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3 C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> </tr> </table> R1 C1 R1 C2 R1 C3 R1 C4 R2 C1+C2
1
curs webdesign R2 C3 R2 C4 R3 C1 + R4 C1 R3 C2 R3 C3 R3 C4 R4 C2 R4 C3 R4 C4 Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> în locul etichetelor <td> şi </td>. Astfel conţinutul celulei va fi afişat îngroşat şi aliniat pe mijloc. Exemplu: un tabel cu 3 rânduri şi 2 coloane folosind pe primul rând etichetele <th> şi </th> HTML <table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
1 2 3 4
Titlul 1 Titlul 2
Eticheta caption va adăuga o linie text deasupra tabelului, centrată pe mijloc, de obicei folosită ca fiind un titlu al tabelului. Caption se plasează obligatoriu imediat dupa tag-ul table dar înainte de prima eticheta tr. Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption HTML
Afisare
<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitate</th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>
Necesar alimente Produse Cantitate Fructe 1 kg Legume 5 kg Carne 1,5 kg
Exemplu: tabelului anterior putem să îi adăugam o imagine de fundal <html> <head> <title>tabel</title> </head>
2
curs webdesign <body> <table border="1" backgorund="imagine.jpg"> ... </body> </html> Legenda: <tr> = rând nou tabel <td> = celulă nouă tabel <th> = antet tabel
3
curs webdesign Exemplu: <HTML> <HEAD> <TITLE>Tabel studenti</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD><B>Nume</B></TD> <TD><B>Prenume</B></TD> <TD><B>Nota</B></TD> </TR> <TR> <TD>Ionescu</TD> <TD>Bogdan</TD> <TD>7</TD> </TR> <TR> <TD>Stancu</TD> <TD>George</TD> <TD>9</TD> </TR> <TR> <TD>Dumitrescu</TD> <TD>Alexandra</TD> <TD>10</TD> </TR> <TR> <TD>Marin</TD> <TD>Paul</TD> <TD>8</TD> </TR> <TR> <TD>Ivanov</TD> <TD>Mihaela</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML>
Aşa cum aţi observat, în exemplul de mai sus am realizat un tabel, dar fără nicio linie. Pentru ca liniile unui tabel să fie vizibile tag-ul <TABLE> trebuie să fie însoţit de atributul BORDER având valoarea egală cu cel puţin 1. În plus, poţi schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR însoţit de codul culorii dorite. Astfel, dacă vrem ca liniile tabelului nostru să aibă culoarea roşie vom folosi următoarea linie de cod: <TABLE BORDER="1" BORDERCOLOR="#FF0000">
4
curs webdesign Înlocuiţi în exemplul de mai sus şi salvaţi pagina. După cum aţi putut observa, liniile tabelului sunt practic nişte linii duble. Pentru a avea decât o singură linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifică distanţa dintre celulele unui tabel. Alături de acest atribut putem folosi şi atributul CELLPADING care indică distanţa dintre marginile celulelor şi textul din cadrul acestora. Pentru a stabili dimensiunea unui tabel, unui rând sau a unei celule, folosim atributele WIDTH pentru lăţime şi/sau HEIGHT pentru înălţime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele tabelului pe verticală folosim atributul VALIGN însoţit de una dintre valorile "top", "middle" sau "bottom". Pentru a schimba culoarea unei celule, unui rând sau chiar a întregului tabel folosim atributul BGCOLOR împreună cu codul culorii alese. Urmează un exemplu de pagină web cu un layout din mai multe tabele. Exemplu: <HTML> <HEAD> <TITLE>Proprietatile tabelelor</TITLE> </HEAD> <BODY> <CENTER><H2>Rezultatele ob&#355;inute la matematic&#259</H2></CENTER> <HR WIDTH="50%" ALIGN="center" COLOR="#FF0000"> <TABLE WIDTH="500" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000" CELLSPACING=”0” CELLPADDING="0"> <TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle"> <TD WIDTH="200" HEIGHT="50"><B><FONT COLOR="#FFFFFF">Nume</FONT></B></TD> <TD WIDTH="200"HEIGHT="50"><B><FONT COLOR="#FFFFFF">Prenume</FONT></B></TD> <TD WIDTH="100" HEIGHT="50"><B><FONT COLOR="#FFFFFF">Nota</FONT></B></TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Ionescu</TD> <TD WIDTH="200" HEIGHT="20">Bogdan</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">7</TD> </TR> <TR BGCOLOR="#FFFFCC" VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Stancu</TD> <TD WIDTH="200" HEIGHT="20">George</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">9</TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Dumitrescu</TD> <TD WIDTH="200" HEIGHT="20">Alexandra</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">10</TD> </TR> <TR BGCOLOR="#FFFFCC" VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Marin</TD> <TD WIDTH="200" HEIGHT="20">Paul</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">8</TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Ivanov</TD> <TD WIDTH="200" HEIGHT="20">Mihaela</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">9</TD> </TR> </TABLE> </BODY> </HTML>
5
curs webdesign Putem introduce în celulele tabelelor şi imagini sau videoclipuri. De exemplu, în tabelul anterior, cu studenţi, putem adaăga în dreapta poza fiecărui student: <HTML> <HEAD> <TITLE>Studenti</TITLE> </HEAD> <BODY> <CENTER><H2>Rezultatele ob&#355;inute la matematic&#259</H2></CENTER> <HR WIDTH="50%" ALIGN="center" COLOR="#FF0000"> <TABLE WIDTH="500" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000" CELLSPACING=”0” CELLPADDING="0"> <TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle"> <TD WIDTH="200" HEIGHT="50"><B><FONT COLOR="#FFFFFF">Nume</FONT></B></TD> <TD WIDTH="200"HEIGHT="50"><B><FONT COLOR="#FFFFFF">Prenume</FONT></B></TD> <TD WIDTH="100" HEIGHT="50"><B><FONT COLOR="#FFFFFF">Nota</FONT></B></TD> <TD WIDTH="100" HEIGHT="50"><B><FONT COLOR="#FFFFFF">Poza</FONT></B></TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Ionescu</TD> <TD WIDTH="200" HEIGHT="20">Bogdan</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">7</TD> <TD WIDTH="50" HEIGHT="50"><IMG SRC="poza1.jpg" width="50" height="50"></TD> </TR> <TR BGCOLOR="#FFFFCC" VALIGN="middle"> <TD WIDTH="200" HEIGHT="20">Stancu</TD> <TD WIDTH="200" HEIGHT="20">George</TD> <TD WIDTH="100" HEIGHT="20" ALIGN="center">9</TD> <TD WIDTH="50" HEIGHT="50"><IMG SRC="poza2.jpg" width="50" height="50"></TD> </TR> </TABLE> </BODY> </HTML> Putem de asemenea să creem tabele de imagini astfel încât acestea să pară ordonate în pagină. De exemplu, putem crea un cod pentru tabel de thumbnail-uri. Vor fi două rânduri de câte două thumbnailuri. <html> <head><title>Thumb</title> </head>
6
curs webdesign <body> <table border=1> <tr> <td><a href="poza1.jpg"><img src="t_poza1.jpg"></a></td> <td><a href="poza2.jpg"><img src="t_poza2.jpg"></a></td> </tr> <tr> <td><a href="poza1.jpg"><img src="t_poza1.jpg"></a></td> <td><a href="poza2.jpg"><img src="t_poza2.jpg"></a></td> </tr> </table> </body> </html>
Folosirea tabelelor ca plan al unei pagini web (layout pagină) Tabelele pot fi imbricate, adică în interior pot conţine unul sau mai multe tabele. Pe baza acestei proprietăţi putem defini layout-uri la viitorul nostru site. O pagină din mini site-ul nostru va fi constituită din mai multe tabele, astfel: de exemplu, putem crea un tabel mai mare care să funcţioneze pe post de container pentru subtabelaşe, fiecare subtabel având funcţia lui. De ex, sus putem defini un subtabel pentru header, jos unul pentru subsolul paginii şi în mijlocul paginii două subtabele, unul pentru meniu, altul pentru conţinut. Aşa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web. Practic, folosind tabelele, putem adăuga o imagine sau un text oriunde în pagina web. În plus faţă de noţiunile învăţate până acum în aceasta lecţie, mai trebuie să reţinem încă două atribute foarte importante ale tag-ului <TD>: COLSPAN (numărul de coloane pe care se întinde celula) şi ROWSPAN (numărul de linii pe care se întinde celula). De exemplu pentru crearea layout-ului cu header, meniu stânga şi conţinut dreapta folosim următorul cod:
<html> <head> <title>Titlu</title> </head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER ============== --> <td colspan="2" style="height: 100px;" bgcolor="#B22222"><h1>Logo</h1></td></tr>
<tr>
7
curs webdesign <!-- ============ MENIUL DIN STANGA ============== --> <td width="20%" valign="top" bgcolor="#A52A2A"> <a href="#">link</a><br> <a href="#">link</a><br> <a href="#">link</a><br> <a href="#">link</a><br> <a href="#">link</a> </td>
<!-- ============ CONTINUTUL PAGINII ============== --> <td width="80%" valign="top" bgcolor="#d2d8c7">
<h2>Welcome</h2> Sectiunea 1 de continut unde puteti adauga ce doriti.<br> <br> Sectiunea 2 de continut unde puteti adauga ce doriti.</td></tr></table> </body> </html>
Layout-ul va arăta astfel:
Logo link link link link link
Welcome Sectiunea 1 de continut unde puteti adauga ce doriti. Sectiunea 2 de continut unde puteti adauga ce doriti.
TEMĂ 1.
Să se creeze un tabel cu 3 linii şi 3 coloane având în conţinut thumbnail-urile unor imagini alese de dvs.
2.
Să se creeze un tabel asemănător cu tabelul de studenţi având culori alternante la rânduri (un rând alb, un rând albastru) în care să adăugaţi articole dintr-un magazin însoţite de poze.
3.
Să se creeze scheletul viitorului dvs site cu ajutorul layout-urilor de pagini web folosind tabelele.
8