AccessGratuit
Bine ati venit! Very Happy

Daca ati ajuns la aceasta pagina inseamna ca nu sunteti INREGISTRAT sau CONECTAT pe forumul AccessGratuit. Puteti face asta utilizand butoanele din meniu destinare acestor actiuni!
AccessGratuit.com
www.accessgratuit.com
cheers
Urmareste-ne pe FacebookUrmareste-ne pe TwitterUrmareste-ne pe DiggUrmareste-ne pe StumbleuponUrmareste-ne pe Youtube

Nu sunteti conectat. Conectati-va sau inregistrati-va

Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

1 Creearea tabelelor [HTML] la data de Dum Ian 24, 2010 2:21 pm

avatar

Motanel

Membru AccessGratuit
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)

Codul HTMLRezultatul 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>
rosugalben
albverde

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 HTMLRezultatul 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>
R1 C1R1 C2R1 C3R1 C4
R2 C1+C2R2 C3R2 C4
R3 C1 + R4 C1R3 C2R3 C3R3 C4
R4 C2R4 C3R4 C4

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 HTMLRezultatul 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 HTMLRezultatul 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>
http://alexandrumiron.ro

2 Re: Creearea tabelelor [HTML] la data de Dum Ian 24, 2010 2:31 pm

avatar

Louk

Membru AccessGratuit
Acceptat. Wink

3 Re: Creearea tabelelor [HTML] la data de Vin Mar 18, 2011 6:26 am

avatar

Albey

Membru AccessGratuit
nu imi iese,gresesc eu pe undeva cred
http://www.Zone-PGL.tk

Continut sponsorizat

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum