cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 8
Tabele in HTML
105894 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:
<TABLE BORDER="1" BORDERCOLOR="#FF0000">

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 »
32 comentarii
ovidiucercel 24 august 2011, 23:11 1
La tabelul 3 ii gresit scris height(heigth).
  2    Raspunde
Lucian.Iordache 24 august 2011, 23:29 2
@ovidiucercel: Multumesc pentru sesizare. Am corectat.
  3    Raspunde
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
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.
  2    Raspunde
nera 02 noiembrie 2011, 10:19 5
imi place foarte multacest sit pt ca invat o gramada de lucruriinteresanta:*
  1    Raspunde
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...
  1    Raspunde
Lucian.Iordache 08 noiembrie 2011, 02:15 7
@alinahodoroaba: Ai verificat in cod? Ai scris corect valign="middle" la tagul TR? Ce browser folosesti?
  -1    Raspunde
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"
  -1    Raspunde
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.
  -1    Raspunde
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
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).
  -1    Raspunde
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
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)
  -1    Raspunde
sebastiansergiu 28 martie 2012, 11:35 14
valign="..." nu are sens
  1    Raspunde
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.
  -2    Raspunde
Rapunzell 08 iunie 2015, 18:08 16
@Lucian.Iordache: Lucian,tie cum tia pus imaginile si mie nu?
  0    Raspunde
sebastiansergiu 29 martie 2012, 10:56 17
Lucian, poate ma insel dar, eu m-am referit la toate tabelele cand am spus ca nu are sens valign="..."
  0    Raspunde
Lucian.Iordache 29 martie 2012, 11:08 18
@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
sebastiansergiu 29 martie 2012, 11:03 19
cel putin valign="middle"
  1    Raspunde
sebastiansergiu 29 martie 2012, 11:21 20
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
  2    Raspunde
Lucian.Iordache 29 martie 2012, 11:24 21
@sebastiansergiu: Depinde de setarile initiale ale tabelului. S-ar putea ca in anumite situatii sa folosesti si middle.
  0    Raspunde
sebastiansergiu 29 martie 2012, 11:33 22
Asa este. Multumesc pentru raspunsurile prompte si pentru acest curs bine gandit
  0    Raspunde
Camani 19 iulie 2012, 15:10 23
Am avut mare nevoie sa invat HTML intr-o singura, caci aveam nevoie urgent, iar cu ajutorul acestui curs am reusit sa invat in doar 3 ore :D
Multumesc mult pentru acest curs, mi-a fost de mare ajutor. este foarte bine gandit si realizat!
Felicitari!
  0    Raspunde
skillz 26 februarie 2013, 20:11 24
cum pot fac un tabel cu fiecare materie in parte si sa pun nota
  1    Raspunde
invatacel 07 mai 2013, 02:54 25
Am si eu acest tabel . Intrebarea mea este : ce trebuie sa fac pentru a scapa de acea margine exterioara alba .
Tabelul este OK, bineinteles cu niste tag-uri il customizez, insa in jurul tabelului este un border alb. Cum fac sa nu mai fie ? multumesc

http://imgur.com/LHq8jJ7
  -1    Raspunde
invatacel 07 mai 2013, 03:24 26
Si inca o intrebare : daca la primul rand am 3 casute si la celelalte am 4, cum fac ca acelea din primul rand sa fie pe centru, dimensiuni egale toate 3 ?
  -1    Raspunde
Rapunzell 05 iunie 2015, 15:24 27
mie nu imi citeste imaginile.De ce?
  0    Raspunde
razvannedea 11 iunie 2015, 15:44 28
salut mi imi arata cadrele pe 1/din pagina
  0    Raspunde
razvannedea 11 iunie 2015, 15:44 29
1/4
  0    Raspunde
elenacristina260 14 ianuarie 2016, 17:03 30
Buna! Am o problema cu atributul "width". In cea de-a treia coloana, "Nota", latimea este egala cu celelalte doua coloane cu toate ca am scris alta valoare(ar trbuie sa aiba jumatate din latimea care imi apare) si nu gasesc greseala. Ma poate ajuta cineva? Multumesc!

<HTML>
<head>
<title>Proprietatile tabelelor</title>
</head>
<body>
<center><h2>Rezultatele ob&#355;inute la matematic&#259;</h2></center>
<hr width="50%" align="center" color="#ff0000">
<table width="500" align="center" border="1" bordercolor="#000000" cellspancing="0" cellpadding="0">
<tr bgcolor="#000000" align="center" valign="middle">
<td width="200" height="50"><b><font color="#ffffff">Nume</font></b></td>
<td witdh="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="ffffc" valign="middle">
<td width="200" height="20">Stancu</td>
<td width="200" height="20">George</td>
<td width="200" 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>
  0    Raspunde
Florea_Ion 14 noiembrie 2016, 12:16 31
La coloana a 3-a aveti valoarea de 100 peste tot cu exceptia randului al 3-lea unde aveti valoarea 200.
  0    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera
7 lectii online
Excel prin exemple
10 lectii online
Windows XP prin exemple
10 lectii online
Infiintarea unei firme
6 lectii online
Gramatica limbii engleze
27 lectii online
Introducere in e-Business
25 lectii online
Curs de Machiaj
13 lectii online
Curs de Fashion
17 lectii online
Curs de Barman
10 lectii online
HTML pe intelesul tuturor
11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro Cursuri și certificări GDPR