Promo Host Market Promotie! 50% mai mult spatiu, 50% mai mult trafic!

4,89 $/luna, Gazduire Web pe servere in Germania!

17,49 $/luna, Servere VPS, DC LambdaNet Kiel, Germania!
Acasa Tabele

Gazduire - WebHosting

Tutoriale

Vizitatori Online

Avem 4 vizitatori online

Curs BNR

03 septembrie 2010
EUR   EUR   4.2796
USD   USD   3.3328
GBP   GBP   5.1351
HUF   HUF   1.5068
MDL   MDL   0.2749

Schimb Valutar

Currency Converter
Convertorul valutar foloseste ca sursa de actualizare Yahoo Finance si prezinta o valoare medie de piata a cursului de schimb.
Nu includeti in cuprinsul valori de schimb semnele $ sau £
Puteti folosi valori cu zecimale , exemplu 1345.89
Valoare:
Din:
In:

Easy Newsletter


Muta
Inchide

Nume:

E-mail:



Host Market
Recomanda

Inca folosesti
Internet Explorer 6.0?!
WOW!!!
Descarca acum
Firefox 4.0
Ultima versiune
Pentru siguranta ta pe
INTERNET!
Firefox 4.0


FileZilla
Ultima versiune
Cel mai popular client FTP
File Zilla

Alege un nume pentru Domeniul tau si verifica daca este liber si valid.

www.

arrowmmDaca ai gasit un domeniu valid si liber, Inregistreaza un pachet de gazduire din oferta curenta.
arrowmmDaca esti proprietarul domeniului verificat acceseaza functia Transfer.
arrowmmDaca numele de domeniu verificat nu se incadreaza in niciuna din situatii, introdu un nou nume si Cauta.



Tutoriale Web Hosting | Tutoriale HTML | Despre Tabele | Definitii de inceput
Tabele Imprimare Email
Evaluare utilizator: / 1
Cel mai slabCel mai bun 
Scris de Undertaker   
Marţi, 13 Ianuarie 2009 10:27

Tabele

Easy Cont RO

Easy Cont ROAceste etichete au o mare utilizare deoarece tabelele 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 <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.

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

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

Afisare:

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

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

Afisare:

R1 C1 R1 C2 R1 C3 R1 C4
R2 C1+C2 R2 C3 R2 C4
R3 C1 + R4 C1 R3 C2 R3 C3 R3 C4
R4 C2 R4 C3 R4 C4

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:

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

Afisare:

Titlul 1 Titlul 2
1 2
3 4

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, de obicei 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:

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

Afisare:

Necesar alimente
Produse Cantitate
Fructe 1 kg
Legume 5 kg
Carne 1,5 kg

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

Servicii Profesionale | Gazduire Site | Gazduire Magazin On-line



Comments
Comentariu nou Cautare
+/-
Scrieti comentariu
Nume:
Email:
 
Web:
Titlu:
UBB:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Va rog sa introduceti codul anti-spam pe care il puteti citi in imagine.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

< Anterior   Următor >
Ultima Actualizare Miercuri, 21 Iulie 2010 21:16
 
Parteneri Host Market
© Host Market - Preturile afisate nu includ TVA - Designed by Http://HostMarket.RO
| Gazduire E-Commerce | Suport |
| Termeni si conditii gazduire web |

Pentru prevenirea fraudei, IP-ul dvs. 38.107.191.86, a fost inregistrat.
This site is optimized for Internet Explorer and Firefox at 1024 x 768 pixels and higher