home > tutoriale > html-css > table-in-html.php

Table in HTML , invata cum sa folosesti un tabel

9 August 2010 de Andrei

Acest tutorial explica definirea tabelelor intr-o forma corecta si completa in HTML.
Cu ajutorul acestui tutorial,incepatorii vor putea invata cum sa introduca manual tabele in documentele HTML,in timp ce o sa definim si o sa descriem toate propietatile pentru avansati ( sunt foarte multi care inca nu stiu toate propietatile unei table ).

tabele in html
Autor :   Andrei

Tabel simplu

Un tabel HTML poate fi definita ca un grup de randuri, fiecare continand un grup de celule.Tabelele, ca structura in documentele HTML sunt definite folosind tags. Un tabel simplu poate fi adaugat intr-un document HTML folosind trei tags : tag-ul HTML table (inceputul unui tabel,parintele a tot ce urmeaza in interior), tag-ul HTML tr (randul) si tag-ul td (celula,copil TR).
Exemplu :

			<table border="1" summary="Exemplu de tabel simpla">
				<tr>
					<td>Celula 1</td>
					<td>Celula 2</td>
					<td>Celula 3</td>
				</tr>
				<tr>
					<td>Celula 4</td>
					<td>Celula 5</td>
					<td>Celula 6</td>
				</tr>
			</table>
		

Codul de mai sus ar arata asa :


Celula 1 Celula 2 Celula 3
Celula 4 Celula 5 Celula 6

Nota: bordura in acest exemplu este creata cu atributul "border", este folosit pentru a putea fi vizualizat mai bine tabelul.Recomand evitarea folosirii atributurilor de prezentare cum ar fi "border", prezentarea in ziua de azi se face folosind CSS.

Trebuie mentionat faptul ca, in cazul in care aveti nevoie de celule goale(fara nimic in ele), este recomandat sa puneti un spatiu (& nbsp;),datorita unor navigatoare care au probleme atunci cand se infrunta cu celule goale.
Atributul "summary" furnizeaza un sumariu despre scopul tabelului(motivul),de asemenea structura pentru "user agents", interpretand pentru "non-visual" media cum ar fi programele care "citesc" paginile sau Braille.

Tipuri de celule

Doua tipuri de celule pot fi definite intr-un tabel HTML. Una dintre ele este celula simpla ( tag td ) folosita anterior si celula speciala ( tag th ) care contine informatii tip antet pentru toate celulele din aceias coloana. Acest tip de celula este situat normal in antetul unui tablou.
In exemplul urmator vom folosi tabloul anterioar, dar ii vom adauga un rand de celule antet :


		<table border="1" summary="Exemplu de tabel simplu cu celule antet.">
			<tr>
				<th>COLOANA 1</th>
				<th>COLOANA 2</th>
				<th>COLOANA 3</th>
			</tr>
			<tr>
				<td>Celula 1</td>
				<td>Celula 2</td>
				<td>Celula 3</td>
			</tr>
			<tr>
				<td>Celula 4</td>
				<td>Celula 5</td>
				<td>Celula 6</td>
			</tr>
		</table>
		

Codul de mai sus ar arata asa :


COLOANA 1 COLOANA 2 COLOANA 3
Celula 1 Celula 2 Celula 3
Celula 4 Celula 5 Celula 6

Unirea Celulelor

De multe ori dorim sa unim doua sau mai multe celule intre ele, acest lucru se poate realiza prin atributele "rowspan" ( pentru unire verticala ) si "colspan" ( pentru unire orizontala ), se pot folosi pentru tag-urile td y th.


		<table border="1" summary="Exemplu de tabel simplu cu unificare intre doua celule din acelasi rand.">
			<tr>
				<td>Celula 1</td>
				<td>Celula 2</td>
				<td>Celula 3</td>
			</tr>
			<tr>
				<td colspan="2">Celule 4 y 5</td>
				<td>Celula 6</td>
			</tr>
			<tr>
				<td>Celula 7</td>
				<td>Celula 8</td>
				<td>Celula 9</td>
			</tr>
		</table>
		

Codul de mai sus ar arata asa :


Celula 1 Celula 2 Celula 3
Celule 4 y 5 Celula 6
Celula 7 Celula 8 Celula 9

Observati in exemplul anterior cum definim o celula care uneste doua celule, aceasta unificare este echivalenta cu a uni doua definitii de celule simple.
La fel putem face atunci cand dorim sa unim vertical,insa exista o mica diferenta datorita naturaletii HTML-ului in momentul unificarii verticale, definirea celulei din coloana afectata nu trebuie declarata. Observa urmatorul exemplu, unde celulele 1, 4 si 7 sunt unite:


		<table border="1" summary="Exemplu de tabel simplu cu unificare intre celulele unei coloane">
			<tr>
				<td rowspan="3">Celula unificata</td>
				<td>Celula 2</td>
				<td>Celula 3</td>
			</tr>
			<tr>
				<td>Celula 5</td>
				<td>Celula 6</td>
			</tr>
			<tr>
				<td>Celula 8</td>
				<td>Celula 9</td>
			</tr>
		</table>
		

Codul de mai sus ar arata asa :


Celula unificata Celula 2 Celula 3
Celula 5 Celula 6
Celula 8 Celula 9

Trebuie sa aveti grija atunci cand uniti celulele ca sa nu se suprapuna.Acest lucru poate da rezultate diferite fata de cele asteptate.

EDIT : Am scurtat tutorialul deoarece partile urmatoare se pot aplica prin intermediul CSS , o continuare Tabeluri cu CSS va veni cat de curand .



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa creezi litere capitale/majuscule cu CSS   -   Un simplu meniu in CSS si HTML   -   Centrarea paginii cu CSS   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Cum sa detectezi ip utilizator   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

1 comenturi pana acum... (posteaza si tu)

referitor la tabeluri , succesuri !

Postat de george pe data de: Saturday, 01.4.14 @ 06:07am

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.