Creearea tabelelor [HTML]
3 participanți
Creearea tabelelor [HTML]
Dum Ian 24, 2010 2:21 pm
Aceste etichete au o mare utilizare deoarece tabelele constituie structura care stă la baza organizării marii majorităţi a paginilor web (inclusiv cea de faţă).
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 html echivalent
Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> (table rows) iar pentru o celulă <td> şi </td> (table data cell) .
Tabele pot fi îmbricate, adică în interior pot conţine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane şi 2 rânduri, border 1, coloana 1 lăţime 80px, coloana 2 lăţime 160px, fiecare celulă are o altă culoare de fond (bgcolor)
Atributele etichetei table sunt:
border = bordura (0 = lipsă bordura)
width = lăţimea tabelului
height = înălţimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc style)
cellspacing = distanţa între celule
cellpaddind = distanţa dintre marginea celului şi conţinut
Atributele etichetei td sunt:
align = aliniere pe orizontală a conţinutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticală a conţinutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)
width = lăţimea celulei
height = înălţimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc atributul style)
colspan = uneşte celula cu cea din dreapta ei
rowspan = uneşte 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:
Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> (table header cell) î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>:
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 după tag-ul table dar înainte de prima etichetă tr.
Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption:
Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:
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 html echivalent
Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> (table rows) iar pentru o celulă <td> şi </td> (table data cell) .
Tabele pot fi îmbricate, adică în interior pot conţine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane şi 2 rânduri, border 1, coloana 1 lăţime 80px, coloana 2 lăţime 160px, fiecare celulă are o altă culoare de fond (bgcolor)
Codul HTML | Rezultatul codului | ||||
<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> |
|
Atributele etichetei table sunt:
border = bordura (0 = lipsă bordura)
width = lăţimea tabelului
height = înălţimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc style)
cellspacing = distanţa între celule
cellpaddind = distanţa dintre marginea celului şi conţinut
Atributele etichetei td sunt:
align = aliniere pe orizontală a conţinutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticală a conţinutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)
width = lăţimea celulei
height = înălţimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal (W3C invalid, folosiţi în loc atributul style)
colspan = uneşte celula cu cea din dreapta ei
rowspan = uneşte 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:
Codul HTML | Rezultatul codului | |||||||||||||||
<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> |
|
Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> (table header cell) î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>:
Codul HTML | Rezultatul codului |
<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> |
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 după tag-ul table dar înainte de prima etichetă tr.
Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption:
Codul HTML | Rezultatul codului |
<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> |
Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:
<html> <head> <style type="text/css"> #fundal { background-image : url(poza.jpg); } </style> </head> <body> <table border="1" id="fundal"> <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> </body> </html> |
- LoukMembru AccessGratuit
- Sex :
Numarul mesajelor : 910
Varsta : 73
Re: Creearea tabelelor [HTML]
Dum Ian 24, 2010 2:31 pm
Acceptat.
- Primii pasi in HTML si WWW: Ce este HTML-ul, standardele si extensiile acestuia si continutul si aspectul unui docment HTML
- Primii pasi in HTML si WWW: Uneltele necesare crearii si testarii unui document HTML
- Gestionarea si utilizarea tabelelor in Microsoft Office Word 2007
- Creare pagina web HTML din tabele (3 parti)
- Meniu de navigare vertical si personalizat (HTML)
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum