Sari la conținut

Secțiunea de JOCURI

Punem la dispoziția Dvs. o multitudine de jocuri pentru PC de toate categoriile, pornind de la acțiune până la jocuri de strategie. Toate aceste jocuri le găsiți în secțiunea jocuri din categoria Download Zone.
Click pentru detalii

Secțiunea de FILME

Punem la dispoziția Dvs. o multitudine de filme de toate categoriile, pornind de la Acțiune până la jocuri de Thrillere. Toate aceste filme le găsiți în secțiunea FILME din categoria Download Zone.
Click pentru detalii
Informații
  • Despre proiect
  • Conținutul pe care vi-l oferim este unul de calitate, foarte informativ și foarte util. Aveți posibilitatea de a descărca o multitudine de resurse, cât și jocuri sau filme. Totodată puteți vizualiza și o multitudine de tutoriale și noutăți din orice domeniu.
  • Despre noi
  • Echipa noastră dorește să vă țină mereu la curent cu ultimile noutăți, dar și să vă ofere o experiență plăcută pe acest forum.
  • Bun venit pe Resursele.ro!

    Bun venit pe Resursele.ro! Pentru a avea un acces total la forum și pentru a beneficia de:

    • Navigarea pe un forum bine pus la punct și fără nici un fel de întrerupere
    • Privilegiul de a-ți face noi prieteni si de a învăța lucruri noi
    • Șanșa de a face parte din staff și dintr-o comunitate sigură
    • Posibilitatea de a învăța tot ceea ce nu cunoști
    • Șanșa și sprijinul de a-ți dezvolta planurile în lumea internetului și mai mult.

    Te invităm să te Înregistrezi acum pe forumul nostru, să ne cunoaștem și să ne începem împreună aventura și colaborarea pe internet!

Bobillho

[Tutorial] - Cum creezi un tabel in limbajul HTML?

Postări Recomandate

 

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.

Tabel:

bLE0IaN.png

 

 

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: 

Conținut ascuns

    Trebuie să te loghezi sau să te înregistrezi pentru a vedea link-urile și imaginile externe.


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: 

Conținut ascuns

    Trebuie să te loghezi sau să te înregistrezi pentru a vedea link-urile și imaginile externe.

Partajează acest post


Link spre post
Distribuie pe alte site-uri

Creează un cont sau autentifică-te pentru a adăuga comentariu

Trebuie să fi un membru pentru a putea lăsa un comentariu.

Creează un cont

Înregistrează-te pentru un nou cont în comunitatea nostră. Este simplu!

Înregistrează un nou cont

Autentificare

Ai deja un cont? Autentifică-te aici.

Autentifică-te acum

×