Activitatea nr.8: 7.11- 11.11

Tema nr.3: HTML –Tabele HTML

Unitatea de invatare:

Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Dobandire de noi cunostinte

 

Tabelele ne permit să creăm o reţea dreptunghiulară de zone, fiecare zonă având propriile opţiuni pentru culoarea fondului, culoarea textului, alinierea textului, etc.
 

Pentru a insera un tabel se folosesc etichetele <TABLE>...</TABLE>. 

Un tabel este format din rânduri. 

Pentru a insera un rând într-un tabel se folosesc etichetele <TR> ...</TR> (de la "table
row" = rând de tabel ). 

Un rând este format din mai multe celule ce conţin date. 

O celulă se introduce cu etichetele <TD>...</TD>.
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al etichetei numit "border". Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în pixeli a chenarului tabelului. Dacă atributul "border" nu este urmat de o valoare, atunci tabelul va avea o grosime prestabilită egală cu 1 pixel. O valoare egală cu 0 a grosimii semnifică absenţa chenarului. Când atributul "border" are o valoare nenulă, chenarul unui tabel are un aspect tridimensional.

Alinierea tabelului

Pentru a alinia un tabel într-o pagină Web se utilizează atributul "align" al etichetei <TABLE>, cu următoarele valori posibile: "left" (valoarea prestabilită), "center" si "right ".

Alinierea este importantă pentru textul ce înconjoară tabelul. 

Astfel:
- dacă tabelul este aliniat stânga, atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea dreaptă a tabelului.
- dacă tabelul este aliniat dreapta, atunci textul care urmează după punctul de inserare al tabelului va fi dispus în partea stânga a tabelului.
- dacă tabelul este aliniat pe centru, atunci textul care urmează după punctul de inserare al tabelului va fi afişat pe toată lăţimea paginii, imediat sub tabel.

Culoarea de fond se stabileşte cu ajutorul atributului "bgcolor", care poate fi atasat întregului tabel prin specificarea in cadrul etichetei <table> sau numai celulelor de date prin specificarea sa in etichetele de celula (<td>). Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute pentru o culoare.

Dimensionarea celulei unui tabel

Distanţa dintre două celule vecine se defineşte cu ajutorul atributului "cellspacing" al etichetei <TABLE>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli dintre două celule vecine. Valoarea prestabilită a atributului "cellspacing" este 2.

Distanţa dintre marginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului "cellpadding" al etichetei <TABLE>. Valorile acestui atribut pot fi numere întregi pozitive şi reprezintă distanţa în pixeli dintre bordurile celulelor şi conţinutul lor. Valoarea prestabilită a atributului "cellpadding" este 1.

Dimensionarea unui tabel
 

Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul a două atribute - "width" si "height" - ale etichetei <TABLE>. 

Valorile acestor atribute pot fi:
1. numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
2. numere întregi între 1 şi 100, urmate de semnul %, reprezentând procentul din lăţimea şi respectiv înălţimea totală a paginii.

Tabele cu forme oarecare

 Un tabel trebuie privit ca o reţea dreptunghiulară de celule. Cu ajutorul a două atribute ale etichetelor <TR> si <TD>, o celulă se poate extinde peste celule vecine. 
Astfel:
1. extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului "colspan", a cărui valoare determină numărul de celule care se unifică.
2. extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului "rowspan", a cărui valoare determină numărul de celule care se unifică.
Sunt posibile extinderi simultane ale unei celule pe orizontală şi pe verticală. În acest caz, în etichete vor fi prezente ambele atribute "colspan" si "rowspan".

Sarcina de lucru

 1. Scrieti urmatorul cod HTML:

<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>

2. Comentati rezulatul obtinut.

3. Bifati raspunsurile corecte:

1. Într-o secvenţă de marcaje HTML marcajul de început <td> este utilizat pentru inserarea unei linii de tabel.

a) adevarat

b) fals

2. Secvenţa de marcaje HTML de mai jos:
 
<table border = "1">
<tr>
<td align = "center" valign = "top"> <img src = "cartoon_house.jpg" width = "200" height = "242"> </td>
<td  valign = "top">  In stanga este imaginea unei case, <br>
 iar in dreapte cea a unei masini. </td>
<td align = "center" valign = "top"> <img src = "cartoon-car.png" width = "200" height = "150"> </td>
</tr>
 
inserează într-o pagină HTML un tabel format dintr-o:

a. coloană şi trei linii, care conţine 2 imagini.

b. linie şi trei coloane, care conţine 2 imagini.

c. linie şi trei coloane, care conţine o singură imagine.

4. Explicati ce realizeza urmatorul cod HTML:

<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="10" cellspacing="15" width="100%">
<tr>
<td align="middle" rowspan="3">data data data</td>
<td align="middle" colspan="2">data data data</td>
</tr>
<tr>
<td align="middle">data data data</td>
<td align="middle">data data data</td>
</tr>
<tr align="right">
<td>data data data</td>
<td>data data data</td>
</tr>
</table>
</body>
</html>