Lectia 8- Tabele in HTML

Astazi vom invata sa creem tabele in html. Tabelele sunt foarte importante in cadrul unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa, putem controla mai bine elementele din cadrul paginilor web.

Crearea unui tabel

Pentru a crea un TABEL vom folosi perechea de taguri <table> si </table>. Tot ce va fi scris intre aceste taguri va forma un tabel. Dupa tagul <table> urmeaza tagurile <tr> si </tr> care vine de la „Table Row” (randul tabelului) si reprezinta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intre <tr> si </tr> va forma un rand al tabelului. Dupa crearea unui rand trebuie sa adaugam in cadrul acestuia cateva celule cu ajutorul tagurilor <td> si </td>. Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod 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 tagul <table> trebuie sa fie insotit de atributul BORDER avand valoarea egala cu cel putin 1. 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 a 5-a a exemplului de mai sus si salveaza pagina cu numele de table2.html. Pentru a vedea rezultatul: click aici

Dupa cum observi, liniile tabelului sunt linii duble. Pentru a avea o singura linie, volosim atributul CELLSPACING cu valoarea 0 . Acest atribut specifica distanta dintre celulele unui tabel. Langa acest atribut putem folosi si atributul CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora.

Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, vom folosi atributul WIDTH care indica latimea si HEIGHT ce indica inaltimea. Pentru alinierea datelor din cadrul tabelului putem folosi 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 intrebului tabel, vom folosi atributul BGLOLOR impreuna cu codul culorii alese. Acum vom face impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care le-am invatat acum in aceasta lectie. Sa scriem urmatorul cod in cadrul unui editor de text (NotePad sau WordPAd) si sa salvam apoi pagina cu numele de table3.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 v-am spus mai sus, cu ajutorul tabelelor putem controla mai bine elementele din cadrul unei pagini web. Practic folosind tabele, putem adauga o imagine sau un tex oriunde in cadrul paginii web.  Acum hai sa scriem codul:

 <HTML>
<HEAD>
<TITLE>Gradina Zoologica</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=”745″ BORDER=”0″ CELLPADDING=”0″ CELLSPACING=”0″>
<TR>
<TD HEIGHT=”26″ COLSPAN=”5″ ALIGN=”CENTER” VALIGN=”TOP” BGCOLOR=”#000000″><FONT COLOR=”#FFFFFF”><H2>
Gradina Zoologica</H2>
</FONT></TD>
</TR>
<TR>
<TD WIDTH=”149″ HEIGHT=”100″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals02.jpg” WIDTH=”63″ HEIGHT=”50″></TD>
<TD WIDTH=”149″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals03.jpg” WIDTH=”66″ HEIGHT=”50″></TD>
<TD WIDTH=”149″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals44.jpg” WIDTH=”110″ HEIGHT=”50″></TD>
<TD WIDTH=”149″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals06.jpg” width=”37″ HEIGHT=”50″></TD>
<TD width=”149″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals09.jpg” width=”70″ HEIGHT=”50″></TD>
</TR>
<TR>
<TD HEIGHT=”20″ ALIGN=”CENTER” VALIGN=”TOP”>
Rinocer</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Tigru</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Leu</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Girafa</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Pisica</TD>
</TR>
<TR>
<TD HEIGHT=”30″ colspan=”5″ VALIGN=”TOP”>
</TD>
</TR>
<TR>
<TD HEIGHT=”100″ ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals22.jpg” width=”62″ HEIGHT=”50″></TD>
<TD ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals28.jpg” width=”54″ HEIGHT=”50″></TD>
<TD ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals30.jpg” width=”82″ HEIGHT=”50″></TD>
<TD ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals55.jpg” width=”62″ HEIGHT=”50″></TD>
<TD ALIGN=”CENTER” VALIGN=”MIDDLE”><IMG SRC=”../Poze/canimals65.jpg” width=”58″ HEIGHT=”50″></TD>
</TR>
<TR>
<TD HEIGHT=”20″ ALIGN=”CENTER” VALIGN=”TOP”>
Urs Polar</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Lup</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Broasca Testoasa</TD>
<TD ALIGN=”CENTER” VALIGN=”TOP”>
Elefant</TD>
<TD ALIGN=”CENTER” VALIGN=”MIDDLE”>
Camila</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Salveaza pagina in folderul Pagini cu numele table4.html.

Acum salvati urmatoarele imagini in folderul Poze

Pentru a vedea cum ar trebui sa arate: click aici

In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem doua atribute foarte importante ale tagului <TD> si anume COLSPAN care indica numarul de cooane pe care se intinde celula si ROWSPAN care indica numarul de linii pe care se intinde celula. Un exemplu vom da tabelul urmator:

Am folosit pentru celula rosie COLSPAN=”2″, deoarece se intinde pe doua coloane, iar pentru celula albastra am folosit ROWSPAN=”3″ deoarece se intinde pe 3 randuri. Codul compet al tabelului de mai sus este urmatorul:

<head>
</head>
<body>
<center>
<table width=”70%” border=”1″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<td colspan=”2″ valign=”top” bgcolor=”#FF0000″ height=”83″></td>
</tr>
<tr>
<td rowspan=”3″ valign=”top” bgcolor=”#0000FF” width=”151″></td>
<td valign=”top” bgcolor=”#FFFF00″ width=”402″ height=”66″></td>
</tr>
<tr>
<td valign=”top” bgcolor=”#66FF00″ height=”95″></td>
</tr>
<tr>
<td valign=”top” bgcolor=”#9933FF” height=”127″></td>
</tr>
<table>
</tbody>
<html>
Pentru a intelege mai bine utilizarea tagurilor si a atributelor lor, nu uita sa exersezi si sa incerci sa realizezi diferite pagini web. Exercitiul este mama invataturii!

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *