B-Wine
Regulament Forum
------------------------
Linkuri Utile
------------------------
Portal Forum
------------------------
Index Forum
------------------------
Conectare

Mi-am uitat parola

Cautare
 
 

Rezultate pe:
 


Rechercher Cautare avansata

Top postatori
SnoppyN1 (750)
 
Valy (226)
 
Crilyng (45)
 
NoName (15)
 
L0ckdawN (13)
 
CataliN1 (12)
 
rarRE (11)
 
endo (8)
 
coLdZ0r (7)
 
Liqua (6)
 

Decembrie 2018
LunMarMierJoiVinSamDum
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Calendar Calendar

Parteneri
BN

Formatare Tabele

In jos

Formatare Tabele

Mesaj Scris de SnoppyN1 la data de Vin Mai 14, 2010 8:29 pm

Reguli Tutoriale
Pagina Principala Tutorial HTML
Formatare Text
Formatare Liste
Formatare Legaturi
Formatare Imagini
Formatare Tabele
Formatare Sunete
Formatare Videoclipuri
Formatare Cadre
Formatare Formulare
Formatare Harti de Imagini
--------------------------
Tabele
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).

Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent  .

Pentru inserarea unui tabel este folosita perechea de etichete si
, pentru un rand < tr> si < /tr> iar pentru o celula < td> si < /td>.

Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.

Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor)
HTML Afisare


< table border="1"> < 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 = 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 in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4
HTML Afisare


< 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>


Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete < th> si < /th> in locul etichetelor < td> si < /td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.

Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele < th> si < /th>
HTML Afisare


< tr> < th width="120">Titlul 1< /th> < th width="120">Titlul 2lt< /th> < /tr> < tr> < td>1< /td> < td>2< /td> < /tr> < tr> < td>3< /td> < td>4< /td> < /tr> < /table>



Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.

Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
HTML Afisare


< caption>Necesar alimente< /caption> < tr> < th width="120">Produse< /th> < th width="120">Cantitatelt< /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 ii adaugam o imagine de fundal folosind style in zona head


< html>
< head>
< style type="text/css">
# fundal {
background-image : url(poza.jpg);
}
< /style>
< /head>
< body>
< table border="1" id="fundal">
...
< /body>
< /html>

Legenda:
tr = Defines a row in a table
td = Defines a cell in a table
th = Defines a table header cell in a table
avatar
SnoppyN1
B-Wine Fondator
B-Wine Fondator

Status : The chosen one!
Sex : masculin
Posts : 750
Puncte : 10003730
Voturi : 3070
Joined : 14/10/2009
Varsta : 24
Location : Bistrita
Detinator Steam : Da
Warn : 0%

Vezi profilul utilizatorului http://b-wine.forumz.ro

Sus In jos

Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum