Tabele HTML

.prof. Lacramioara Tufescu

Recapitulare – atributul STYLE
Tabele in HTML
<TABLE> <TR> <TD> <TH>
<DIV>, meniu simplu

L i c e u l T e o r e ti c d e I n f o r m a ti c a
“Grigore Moisil” Iași

Disciplina TIC

An școlar 2021-2022

Semestrul al doilea

4/8/2022
Recapitulare – atributul STYLE

Sintaxa:
<tagname style="property:value;">

atributul Style se adauga la taguri pentru stilizarea elementelor HTML

background-color pentru culoarea de fundal

color pentru culoarea textului

font-family pentru fontul textului

font-size pentru dimensiunile textului

text-align pentru alinierea textului

 Tabele
 au o mare utilizare deoarece tabele constituie structura care sta la baza
organizarii multor pagini web.
 tabelul este format din linii si coloane -- celule. Fiecare celula pastreaza
informatia care va fi afisata
 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.
 Tagurile TD au rol de container  pot conține tot felul de elemente
HTML; text, imagini, liste, alte tabele etc.

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 fundal (bgcolor)

HTML Afisare

<table border="1">

<tr>

<td width="80" bgcolor="red"> rosu </td> rosu galben

<td width="160" bgcolor="yellow"> galben </td> alb verde

</tr>

<tr>
<td bgcolor="white"> alb </td>

<td bgcolor="green"> verde </td>

</tr>

</table>
 Atributele tagului  table sunt:

border = bordura (0 = lipsa bordura)

width = latimea tabelului

height = inaltimea tabelului

bgcolor = culoarea de fundal

cellspacing = distanta intre celule

cellpadding = distanta dintre marginea celulei 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

colspan = uneste celula cu cea din dreapta ei

rowspan = uneste celula cu cea de sub ea

https://www.w3schools.com/html/html_tables.asp video despre tabele

 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

HTML Afisare
<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> R1 C1 R1 C2 R1 C3 R1 C4
<td colspan="2" bgcolor="red">R2 C1+C2</td>
<td bgcolor="yellow">R2 C3</td> R2 C1+C2 R2 C3 R2 C4
<td bgcolor="red">R2 C4</td> R3 C1 R3 C2 R3 C3 R3 C4
</tr> +
R4 C1 R4 C2 R4 C3 R4 C4
<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>

Daca dorim sa evidentiem continutul primului rand (antetul tabelului) 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>

<table border="1">
<tr>
<th width="120">Titlul 1</th>
Titlul 1 Titlul 2
<th width="120">Titlul 2</th> 1 2
</tr>
3 4
<tr>
<td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
 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

<table border="1"> Necesar componente

<caption> Necesar componente </caption>
<tr> Produse Cantitate
<th width="120">Produse</th> Procesoare 1 buc.
<th width="120">Cantitate</th>
</tr> Placi de baza 1 buc.
<tr> <td>Procesoare</td> <td>1 buc.</td> Memorii 2 buc.
</tr>
<tr> <td>Placi de baza</td> <td>1 buc.</td>
</tr>
<tr> <td>Memorii</td> <td>2 buc.</td> </tr>
</table>

Exemplu: tabelului anterior ii adaugam o imagine de fundal folosind style in zona head

<html>
<head>
<style type="text/css">
#fundal { background-image : url(poza.jpg); }
</style>
</head>
<body>
<table border="1" id="fundal">
...
</body>
</html>

Legenda:
tr = Defines a row in a table
td = Defines a cell in a table
th = Defines a table header cell in a table

Tagul img

<img src="url" alt="alternatetext">
 Tagul div
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Efect
 Emoji Characters
Emojis are also characters from the UTF-8 alphabet:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>