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=”https://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.
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.
Daca vrei sa apara:
- semneaza cu numele tau, nu al firmei
- nu alerga dupa link
- scrie romaneste, nu kum apucy
- daca tii sa ataci, ataci ideea, nu persoana
Primul comentariu e moderat.