»  Pagina principala  »  Tutoriale »  Tutorial complet HTML

Tutorial complet HTML

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 <table> si </table>, 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)

HTMLAfisare
<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>
rosugalben
albverde

Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului 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
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

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

HTMLAfisare
<table border="1"> <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>
Titlul 1 Titlul 2
1 2
3 4

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

HTMLAfisare
<table border="1"> <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>
Necesar alimente
Produse Cantitate
Fructe 1 kg
Legume 5 kg
Carne 1,5 kg



« Inapoi 1 2 3 4 5 6 7 8 9 10 11 Inainte »
Pagina Urmatoare: Sunete




Link-ul autorului:
www.drogoreanu.ro/tutorials/html.php

Comentarii



   GAVRILESCU

Sint incepator in cele ale html dar informatiile pe care le dati sint extraordinare.Va felicit si va multumesc.poate imi recomandati ceva pentru documentare....chiar si contra cost
23-Apr-2010 - 23:51


   Cristian

Pentru HTML si CSS gasesti mai multe resurse pe www.tutorialehtml.com (e frate cu etutoriale), care e dedicat in totalitate pentru tutoriale HTML, XHtml si CSS. Daca ai rabdare si nu sari peste pagini in graba nu ai nevoie de nici un manual sau curs platit.
24-Apr-2010 - 19:00


   Andreiul

Poti te rog sa ma ajuti cu doua chestii ? 1. am pus o ancora in pagina ... si a doua nu mai functioneaza daca o pun ... 2. nu stiu cum sa postez situl .. poti sa imi dai niste indicatii :D ; daca ai timp uite-te te rog si la site-ul meu ... ce fac gresit in a pune acele ancore ... si te rog raspunde-mi ;)
(...............)
21-May-2010 - 14:55


   ioana

am facut un site calumea dar nu stiu cum sal postez........ma ajuti pls
23-Jun-2010 - 13:33


   marian

Nu vreu sa fiu rautocios, dar majoritatea tutorialele
sint fortate, sumare, fara introducere, fara intelegerea fenomenelor facute in graba.
12-Sep-2010 - 18:46


   Robert

Eu am invatat de aici cum sa fac un website
http://www.#######.ro
04-Oct-2010 - 16:39


   denisa

cum fac si io un radio ca am urmat pas cu pas tutorialul tau vali si nu merge imi spune invalid password. ce fac ?
06-Oct-2010 - 13:14


   Andreea

ce trebuie sa contina fisierul "script.php" si cum il creez? please help!!!
14-Nov-2010 - 18:47


   upgrade

imi palce mult!
17-Nov-2010 - 14:45


   Ionita Marius

lucruri foarte folesitoare!!!multumim!!
06-Dec-2010 - 13:07


   Extremlym

Thanks !!!
Apreciate
07-Dec-2010 - 16:59


   robi

doresc sa scriu un text langa un video pe care l-am luat de pe youutube si nu reusesc aveti vreo idee cum as putea face?
08-Jan-2011 - 15:14


   s0r1n

Cum mai pot pune un dj? Cu ShoutCast si winamp v5?
19-Jan-2011 - 14:31


   Popa mihai

Cel mai tare blog
29-Mar-2011 - 07:57



Voteaza acest articol!
 



Trimite un comentariu!

Nume *
E-mail *
Comentariu *
  Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

Security image

Catalin Drogoreanu

Inginer electronist din Bucuresti. In 2003 a inceput activitatea de webdesigner ca o activitate in timpul liber. Are cunostinte de HTML, CSS, PHP, MySQL si Adobe Photoshop.
http://www.drogoreanu.ro

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php