Tabele in HTML » HTML pe intelesul tuturor


	Am uitat utilizatorul Am uitat parola

Cursuri online
Cursuri online gratuite

Tutoriale
Cum sa faci orice

Teste online
Testeaza-ti cunostintele

Revista
Aboneaza-te gratuit

Referate
Descarca referate

Jocuri
Jocuri educative

Inregistreaza-te
Intra in comunitate

eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 8

Tabele in HTML

5328 afisari

Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.

Crearea unui tabel

Pentru a crea un tabel, trebuie sa folosim tag-urile <TABLE> si </TABLE>. Tot ce va fi scris intre aceste tag-uri va forma un tabel. Dupa tag-ul <TABLE> urmeaza tag-ul <TR> care vine de la "Table Row" (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre tag-urile <TR> si </TR> va forma un rand al tabelului. Dupa crearea unui rand, trebuie sa adaugam in cadrul acestuia cateva celule, cu ajutorul tag-urilor <TD> si </TD>. Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod HTML:

<HTML>
<HEAD>
<TITLE>Primul tabel</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>

Salveaza pagina cu numele de tabel.html. Pentru a vedea rezultatul: click aici

Proprietatile tabelelor

Asa cum ai observat, in exemplul de mai sus am realizat un tabel, dar fara nici o linie. Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul BORDER avand valoarea egala cu cel putin 1. In plus, poti schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite. Astfel, daca vrem ca liniile tabelului nostru sa aiba culoarea rosie vom folosi urmatoarea linie de cod:

Inlocuieste linia 6 din exemplul de mai sus si salveaza pagina cu numele tabel2.html. Pentru a vedea rezultatul: click aici

Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si atributul CELLPADDING care indica distanta dintre marginile celulelor si textul din cadrul acestora.

Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele WIDTH pentru latime si HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top", "middle" sau "bottom".

Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim atributul BGCOLOR impreuna cu codul culorii alese. Sa facem impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta lectie. Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cu numele de tabel3.html:

<HTML>
<HEAD>
<TITLE>Proprietatile tabelelor</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Rezultatele obtinute la matematica</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>

Pentru a vedea rezultatul: click aici

Folosirea tabelelor ca plan al unei pagini web

Asa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini web. Practic, folosind tabelele, putem adauga o imagine sau un text oriunde in pagina web. Sa vedem un exemplu: click aici. Acum hai sa vedem codul pentru pagina din exemplul nostru:

Pentru a citi continuarea lectiei trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)

« Crearea listelor in HTML

Folosirea cadrelor intr-o pagina web »

22 comentarii

	ovidiucercel 24 august 2011, 23:11	1
	La tabelul 3 ii gresit scris height(heigth).
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 24 august 2011, 23:29	2
	@ovidiucercel: Multumesc pentru sesizare. Am corectat.
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	florinsabin 29 septembrie 2011, 02:27	3
	In exemplul 2 (tabel2) culoarea marginilor nu se schimba. Ramane negru indiferent ce cod de culoare folosesc. Culoarea nu se schimba nici in exemplul dvs. Care e problema? Se poate sa fie din cauza browser-ului? Eu folosesc Opera mini.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 15 octombrie 2011, 04:08	4
	@florinsabin: Salut, scuze de intarzierea cu care iti raspund. Da, in mod sigur este de la browser. In Google Chrome, Internet Explorer si Mozilla Firefox ... este ok.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	nera 02 noiembrie 2011, 10:19	5
	imi place foarte multacest sit pt ca invat o gramada de lucruriinteresanta:*
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alinahodoroaba 04 noiembrie 2011, 09:43	6
	la tabelul 3 am o probleama, ca textele "nume", "prenume" si "nota" nu apar pe centru ca in exemplu, ci in partea de sus a casutei...
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 08 noiembrie 2011, 02:15	7
	@alinahodoroaba: Ai verificat in cod? Ai scris corect valign="middle" la tagul TR? Ce browser folosesti?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	silvian 19 februarie 2012, 13:20	8
	Scuze ca revin si eu cu o corectura. La textul care prezinta atributele pentru tabelul trei: "Alaturi de acest atribut putem folosi si atributul CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora." "CELLPADDING" e scris cu un singur "D"
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 06 martie 2012, 07:51	9
	@silvian: Multumesc pentru observatie. S-a corectat. Legat de corectura, nu este nici o problema, cu cat ne implicam mai multi in acest proiect cu atat va deveni mai bun.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	cipriancm 16 martie 2012, 08:58	10
	la al doilea tabel CELLSPACING="0" nu are cum sa fie 0 este minim 1 ca sa arata ca in poza;)
		-1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 16 martie 2012, 09:06	11
	@cipriancm: Nici nu am spus ca are valoarea 0. Initial nu este specificata valoarea, apoi am pus valoarea 0 (vezi codul de la tabelul 3).
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	cipriancm 16 martie 2012, 19:11	12
	1.de la ultimul tabel cel cu, culori ce face vlign="top" ca nu vad diferenta? 2.ce trebuie sa fac sa mut coloana albastra din stanga in dreapta am icercat <TD WIDTH="151" ROWSPAN="3" VALIGN="TOP" BGCOLOR="#0000FF" align="right" >
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 28 martie 2012, 12:08	13
	@cipriancm: 1. nu are sens (asa cum spunea si Sebastian), l-am scos din codul tabelului. 2. nu are legatura align="right" e pentru continutul celulei doar. Pentru a pune coloana albastra in dreapta, e de ajuns sa inversezi cele doua linii de cod: <TD WIDTH="151"... cu <TD WIDTH="402"... (fara nici o modificare, doar le inversezi si o sa fie coloana albastra in dreapta)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sebastiansergiu 28 martie 2012, 11:35	14
	valign="..." nu are sens
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 28 martie 2012, 11:56	15
	@sebastiansergiu: Corect. Avea sens doar daca era text in celulele tabelului. L-am scos din codul tabelului.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sebastiansergiu 29 martie 2012, 10:56	16
	Lucian, poate ma insel dar, eu m-am referit la toate tabelele cand am spus ca nu are sens valign="..."
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 29 martie 2012, 11:08	17
	@sebastiansergiu: Sa presupunem ca am avea un cuvant scris in celula albastra din tabelul colorat din lectie. Unde va fi afisat cuvantul? Cu valign=top va fi sus, middle la mijloc si bottom in partea de jos. Are sens in anumite situatii.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sebastiansergiu 29 martie 2012, 11:03	18
	cel putin valign="middle"
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sebastiansergiu 29 martie 2012, 11:21	19
	ai dreptate cu valign=top si valign=bottom, dar middle e in plus, deoarece scrisul sau imaginile din tabelul de fata apare initial la mijloc, iar optiunile bottom si top le folosesti in cazul in care doresti sa apara scrisul altundeva decat la mijloc. La mine cel putin asa e
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 29 martie 2012, 11:24	20
	@sebastiansergiu: Depinde de setarile initiale ale tabelului. S-ar putea ca in anumite situatii sa folosesti si middle.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	sebastiansergiu 29 martie 2012, 11:33	21
	Asa este. Multumesc pentru raspunsurile prompte si pentru acest curs bine gandit
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!