9 – Tabele in HTML

'

Uneori, informaţia e mai uşor de structurat într-un tabel.

Tabelul nu este organizat în rânduri şi coloane, ci în rânduri şi celule ale rândului.

Tag-uri
Întregul tabel va fi încadrat de tag-urile <table> respectiv </table>.
Fiecare rând în parte va fi precedat de <tr> şi se va încheia cu </tr>.
Pentru celulele randurilor de tip titlu se vor folosi tag-urile <th> şi </th>, iar elementele fiecărui rând normal vor fi marcate cu <td> şi </td>.
Lucrează ordonat, ai grijă să închizi fiecare tag, e mult de scris dar nu e greu de înţeles.

[html]
<table border="1">
<tr>
<th>Titlu 1</th>
<th>Titlu 2</th>
<th>titlu 3</th>
</tr>
<tr>
<td>Randul 1, celula 1</td>
<td>Randul 1, celula 2</td>
<td>Randul 1, celula 3</td>
</tr>
<tr>
<td>Randul 2, celula 1</td>
<td>Randul 2, celula 2</td>
<td>Randul 2, celula 3</td>
</tr>
</table>
[/html]

Titlu 1 Titlu 2 titlu 3
Randul 1, celula 1 Randul 1, celula 2 Randul 1, celula 3
Randul 2, celula 1 Randul 2, celula 2 Randul 2, celula 3

Atributele tabelelor HTML:
align – aliniere , cu valorile left, right, center
valign – aliniere pe erticala, cu alorile top, middle, bottom
width – lăţime, valoare numerică, în pixeli
height – înălţime, valoare numerică, în pixeli
border – chenar (nu specifică sau alege border=0 pentru invizibil)
bgcolor – culoare fundal
cellpadding – spaţiu dintre marginea celulei şi conţinut, în pixeli
cellspacing – spaţiul dintre celule, în pixeli
colspan – numărul de coloane pe care va fi scrisă o celula
rowspan – numărul de rânduri pe care va fi scrisă o celula

[html]
<doctype html>
<html>
<head>
<title>Expert in clatite</title>
</head>

<body bgcolor="#ede4c4">
<font color="#7f0006">
<h1 align="center">Invata sa faci clatite ca un adevarat cofetar</h1>
</font>
<h2 align="center" >Clatitele sunt simple, usoare, gustoase si savuroase in orice combinatie!</h2>
<hr>
<p><h4>Ingrediente pentru ~10 clatite:</h4>
<ul type="circle">
<li>250 ml lapte</li>
<li>3 oua</li>
<li>60 g unt</li>
<li>125 g faina</li>
<li>20 g zahar</li>
<li>arome (lamaie,rom,portocala,vanilie etc. )</li>
</ul>
</p>
<img src="imagini/ingrediente.jpg" alt="igrediente clatite" width="300" align="middle">

<p>
<img src="imagini/preparare.jpg" alt="preparare clatite" height="250" align="right">

<img src="imagini/amestec.jpg" alt="amestec clatite" height="250" align="right">

<h4>Preparare:</h4>
<ol type="1" start="1">
<li>Punem la incalzit laptele cu untul astfel incat untul sa se topeasca dar <u>laptele sa nu dea in clocot</u></li>
<li>Se lasa la racit si intre timp amestecam celelalte ingrediente</li>
<li>Se freaca ouale cu zaharul se adauga faina si amestecam bine cu un tel, punem aromele, varsam laptele caldut dar nu fierbinte</li>
<li>Amestecam incetisor pana obtinem un amestec omogen</li>
<li>Punem o tigaie <i>anti-adeziva</i>, o ungem cu <s>otet</s> ulei si lasam la incins</li>
<li>Luam cu un polonic din compozitie si varsam cam 3/4 in tigaia incinsa</li>
<li>Cu miscari circulare intindem aluatul in tigaie si lasam pana se rumeneste</li>
<li>Cand incepe clatita sa se desprinda de pe vas o intoarcem sa se coaca si pe partea cealalta</li>
</ol>
<h4>Servire:</h4>
<dl>
<dt>Clatite dulci</dt>
<dd>dulceata</dd>
<dd>gem</dd>
<dd>inghetata</dd>
<dd>ciocolata</dd>
<dt>Alte clatite</dt>
<dd>carne</dd>
<dd>branza</dd>
</dl>
<br>
<b>Pofta buna!</b>
</p>

<table border="1" width="300">
<tr>
<th colspan="2" bgcolor="a51b22"><b>Pret clatite</th>
</tr>
<tr>
<td>Clatite dulci</td>
<td width="30">10 ron</td>
</tr>
<tr>
<td>Ale clatite</td>
<td>12 lei</td>
</tr>
<tr>
<td>Clatite uriase</td>
<td>20 lei</td>
</tr>
</table>

<table border="1" width="300">
<tr>
<td rowspan="3" bgcolor="a51b22"><b>Pret clatite</td>
<td>Clatite dulci</td>
<td width="30">10 ron</td>
</tr>
<tr>
<td>Ale clatite</td>
<td>12 lei</td>
</tr>
<tr>
<td>Clatite uriase</td>
<td>20 lei</td>
</tr>
</table>

<h3 align="right">Cofetar sef Catalin Cerga</h3>
<hr>
<font color="#3f4c34" size="3" face "arial">
<p align="center">Coypright SolutiiPC.ro, solutii complete pentru bucatarie</p>
<p align="center"><a href="http://solutiipc.ro"><img src="imagini/bucatarie.gif"></a> </p>

<font>
</body>
</html>
[/html]

Revenind la clătite, am adăugat la final un tabel cu lista de preţuri, folosind şi colspan şi rowspan, pentru a a exemplifica cum funcţionează ambele. Pagina completa aici.
Te poţi juca mai departe cu atributele experimentând cu număr diferit de rânduri, alte atribute, până crezi că stăpâneşti materia.
Nelămurit? Întreabă-mă în comentarii.
Lămurit? Te aştept în lecţia viitoare.

Share this post:

Leave a Comment