Solutii IT&C

  • Cum cumperi?
  • Laptopuri
  • Tablete
  • Telefoane mobile
  • Imprimante
  • Stiri
  • Programe utile
  • Facebook
Te afli la: SolutiiPC Cod HTML 9 – Tabele in HTML

9 – Tabele in HTML

Catalin 18/02/2013 Leave a Comment

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.

Similare

Filed Under: HTML Tagged: refacute

Despre autor

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.

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Categorii

  • Aparate Foto (29)
  • Console Jocuri (12)
  • CPanel (8)
  • Cum cumperi? (23)
  • Desktop PC (6)
  • Diverse (49)
  • Electrocasnice (24)
  • Facebook (14)
  • Frigidere (5)
  • Gadgeturi (9)
  • Gmail (2)
  • Guestposts (5)
  • Hardware (27)
  • HDD Extern (10)
  • HTML (11)
  • Imprimante (19)
  • Laptopuri (47)
  • Masini de spalat (5)
  • Microsoft Office (1)
  • Programe utile (4)
  • Reduceri Promotii (3)
  • Reduceri si Promotii (34)
  • Securitate (8)
  • Sisteme Audio (12)
  • Sisteme de Andocare (9)
  • Sisteme de navigatie GPS (14)
  • Sisteme Home Cinema (4)
  • Software (10)
  • Stiri (319)
  • Tablete (43)
  • Telefoane mobile (88)
  • Televizoare (13)
  • Webmasteri (5)
  • Windows (7)
  • Yahoo (4)

Etichete

A4 (4) Acer (11) Allview (17) amazon (7) AMD (12) android (54) apple (49) Asus (23) BlackBerry (6) canon (8) dell (7) facebook (15) featured (310) google (39) Google Nexus (5) HP (14) htc (8) huawei (6) IBM (5) intel (25) ios (5) iphone (5) Lenovo (22) LG (29) linux (6) microsoft (39) motorola (8) nikon (10) Nokia (18) nvidia (6) quad-core (8) qualcomm (12) refacute (24) Samsung (80) seagate (6) snapdragon (7) sony (25) toshiba (10) twitter (6) western digital (7) windows (10) windows phone (5) xiaomi (5) yahoo (7) zuckerberg (5)

Pagini

  • Contact
  • Ghid cumparaturi electronice
  • Ghid de cumparaturi electrocasnice
  • Propune un articol
  • Termeni si conditii

Copyright © 2025 · SolutiiPC.ro