TABELE

TABELE SIMETRICE (numarul de coloane este egal cu numarul de linii*)

- tabelul se introduce cu marcajul container <table></table>

- fiecare linie se introduce cu marcajul container <tr></tr>
- fiecare celula din linie se introduce cu marcajul container <td></td>
- folosind <th> in locul lui <td> veti obtine formatari de tip cap coloana

De exemplu, pentru obținerea unui tabel cu doua linii si doua coloane, vom scrie
in body, in locul potrivit:
<table>
<tr>
<td>Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
</tr>

<tr>
<td>Randul 2 Coloana 1</td>
<td>Randul 2 Coloana 2</td>
</tr>
</table>

Si vom obține un astfel de tabel in l;ocul ales in pagina html:

Randul 1 Coloana 1 Randul 1 Coloana 2

Randul 2 Coloana 1 Randul 2 Coloana 2

TABELE ASIMETRICE(numarul liniilor difera de numarul coloanelor=sunt si celule

imbinate)

- celulele se imbina pe orizontale cu atributul

rowspan=”unnumardeceluledeimbinat” pentru marcajul <td> sau <th>

- celule se imbina pe verticala cu atributulo colspan=”nrceluledeimbinat”

pentru marcajul td sau th

De exemplu, pentru un tabela re va avea o mega celula in linia a doua cu

înălțimea a doua rânduri si in linșa a treia a unei megacelule care se întinde
peste trei coloane, folosim sursa următoare:
<table>
<tr>
<th>Coloana 1</th>
<th>Coloana 2</th>
 <th>Coloana 3</th>
</tr>

<tr>
<td rowspan="2">Randul 1 Coloana 1</td>
<td>Randul 1 Coloana 2</td>
<td>Randul 1 Coloana 3</td>
</tr>

<tr>
<td>Randul 2 Coloana 2</td>
<td>Randul 2 Coloana 3</td>
</tr>
<tr>
<td colspan="3">Randul 3 Coloana 1</td>
</tr>
</table>

Coloana 1 Coloana 2 Coloana 3

Randul 1 Coloana 1 Randul 1 Coloana 2 Randul 1 Coloana 3

Randul 2 Coloana 2 Randul 2 Coloana 3

Randul 3 Coloana 1

Pentru ca tot tabelul sa aibă un fundal culoare trebuie sa folosim formatul

<table bgcolor=“culoare”> pentru marcajul de deschidere a tabelului. Marcajul de
închidere rămâne același </table>.

Pentru ca tot tabelul sa aibă o imagine de fundal trebuie sa folosim

formatul <table background=“calerelativacatrefisierimagine”>. Închidem tabelul cu
</table>

Pentru ca un rând întreg sa aibă o culoare folosim forma <tr

bgcolor=“culoare”>. Pentru introducerea unui fundal imagine intr-un rând folosim
<tr background=“calerelativafisierimagine”>

Pentru a colora fundalul unei celule folosim forma <td color=“culoare”>.

Pentru un background imagine folosim <td background=“calefisierimagine>

In interiorul unei celule putem face tot ce am învățat: sa formatăm textul,

sa inserat legaturi, sa inserați imagine lângă text. De exemplu pentru a pune o
paza intr-o celula facem astfel: <td> <font color=“red”> Urmează alături o poza,
&nbsp;&nbsp; <img src=“calecatrepozacuextensie”> </td>

Sarcina de lucru!
- realizați o structura arborescentă de foldere formată din folderul
tabele care conține folderelor html, respectiv poze
- In poze puneți pozele a trei fructe de sezon si una despre primavara
- In html Creați fișierul html cu numele fructedesezon.html
- Titlul afișate pagina va fi aliniat la dreapta si va fi “Fructe
sezon” scris cu culoare vernil
- In primul paragraf de 200 de cuvinte, Descrieți anotimpul primăvara
având alături o imagine care sugerează primavara
- După primul paragraf inserați un tabel care sa aibă patru rânduri si
doua coloane; capul de coloana va fi scris boldit, fie cu <b> fie
folosind <th>; titlurile din capul coloanelor vor fi: imaginea
fructului, descrierea fructului
- In rândurile 2, 3 si 4, in prima celula inserați imaginea fructului
si in celula următoare a rândului inserați pe fundal de culoare
verde un text descriptiv al fructului cu galben

https://tutorialehtml.com/ro/tabele-html/