CURS 5

Liste

Legaturi 
Pentru realizarea unei liste neordonate se

utilizeaz etichetele <ul> i </ul>.  Fiecare element al listei începe cu eticheta <li>.  Eticheta <ul> poate avea atributul type.  Atributul type poate lua urm toarele valori: 
 

disc pentru  (valoare implicit ); square pentru ; circle pentru {.

Exemplul 44
<html> <head> <title>Exemplul 36</title> </head> <body> <ul><u>Lista neordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ul> </body> </html>

Exemplul 45
<html> <head> <title>Exemplul 37</title> </head> <body> <ul type=circle><u>Lista neordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ul> </body> </html>

Exemplul 46
<html> <head> <title>Exemplul 38</title> </head> <body> <ul type=square><u>Lista neordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ul> </body> </html>

Liste ordonate 
Pentru realizarea unei liste ordonate se utilizeaz etichetele

<ol> i </ol>.  Fiecare element al listei începe cu eticheta <li>.  Eticheta <ol> poate avea urm toarele atributele:  type stabile te tipul numerot rii;  start stabile te cu a cât-a valoare începe lista (implicit cu prima).  Atributul type poate lua urm toarele valori: 
   

1 pentru ordonare de tipul 1, 2, 3 etc.(valoare implicit ); a pentru ordonare de tipul a, b, c etc; A pentru ordonare de tipul A, B, C etc; i pentru ordonare de tipul i, ii, iii, iv etc.; I pentru ordonare de tipul I, II, III, IV etc.

Exemplul 47
<html> <head> <title>Exemplul 39</title> </head> <body> <ol><u>Lista ordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ol> </body> </html>

Exemplul 48
<html> <head> <title>Exemplul 40</title> </head> <body> <ol type=a><u>Lista ordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ol> </body> </html>

Exemplul 49
<html> <head> <title>Exemplul 41</title> </head> <body> <ol type=A start=5><u>Lista ordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ol> </body> </html>

Exemplul 50
<html> <head> <title>Exemplul 42</title> </head> <body> <ol type=i ><u>Lista ordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ol> </body> </html>

Exemplul 51
<html> <head> <title>Exemplul 43</title> </head> <body> <ol type=I start=7><u>Lista ordonata</u> <li>Primul termen al listei <li>Al doilea termen al listei <li>Al treilea termen al listei </ol> </body> </html>

Combina ii de liste
<html> <head><title>Exemplul 44</title></head> <body> <ol type=I><b> Atributele etichetei img sunt:</b> <li> src; <li> alt; <li>align care poate lua urmatoarele valori: <ul type=circle> <li> left <li> right <li> top <li> middle <li> bottom </ul> <li>border <li>width <li>height <li>vspace <li>hspace </ol> </body> </html>

Liste de tip defini ie 
Pentru realizarea unei liste de tip defini ie se utilizeaz

etichetele <dl> i </dl>.  În cadrul etichetelor <dl> i </dl> se utilizeaz eticheta <dt> pentru termenul definit i eticheta <dd> pentru descrierea defini iei.

Exemplul 53
<html> <head> <title>Exemplul 45</title> </head> <body> <dl> <dt>Termenul definit <dd>Descrierea definitiei </dl> </body> </html>

Liste personalizate
<html> <head> <title>Exemplul 46</title> </head> <body> <ul type=I ><u>Lista personalizata</u><br> <img src=BD21296_.gif> Primul termen al listei<br> <img src=BD21296_.gif> Al doilea termen al listei<br>  <img src=BD21296_.gif> Al treilea termen al listei<br> </ul> </body> </html>

Tabele 
Pentru a realiza un tabel se utilizeaz etichetele

<table> i </table>.  Un tabel este format din rânduri. Pentru a insera un rând se utilizeaz eticheta <tr>.  Un rând este format din mai multe celule ce con in date. Pentru a introduce o celul de date se utilizeaz eticheta <td>.

Exemplul 55
<html> <head><title>Exemplul 47</title> </head> <body> <table > <tr> <td>c11 <td>c12 <tr> <td>c21 <td>c22 <tr > <td>c31 <td>c32 </table> </body> </html>

Chenarul unui tabel 
Pentru a ad uga un chenar tabelului, se utilizeaz atributul

border al etichetei <table>.  Valoarea atributului border este un num r natural; acest num r reprezint grosimea în pixeli a chenarului.

Exemplul 56
<html> <head> <title>Exemplul 48</title> </head> <body> <table border=5> <tr> <td>c11 <td>c12 <tr> <td>c21 <td>c22 <tr > <td>c31 <td>c32 </table> </body> </html>

Culoarea chenarului unui tabel
Pentru a stabili culoarea chenarului tabelului, se utilizeaz atributul bordercolor al etichetei <table>.

Chenarul unui tabel
<html> <head> <title>Exemplul 49</title> </head> <body> <table border=5 bordercolor=brown> <tr> <td>c11 <td>c12 <tr> <td>c21 <td>c22 <tr > <td>c31 <td>c32 </table> </body> </html>

Culoarea de fond pentru un tabel 
Culoarea de fond pentru un tabel se stabile te cu ajutorul

atributului bgcolor al etichetei <table>.  Culoarea de fond pentru un rând se stabile te cu ajutorul atributului bgcolor al etichetei <tr>.  Culoarea de fond pentru o celul de date se stabile te cu ajutorul atributului bgcolor al etichetei <td>.

Exemplul 58
<html> <head> <title>Exemplul 49</title> </head> <body> <table border=5 bordercolor=red bgcolor=yellow> <tr> <td>c11 <td>c12 <tr> <td>c21 <td>c22 <tr > <td>c31 <td>c32 </table> </body> </html>

Exemplul 59
<html> <head><title>Exemplul 51</title></head> <body> <table border=5 bordercolor=red bgcolor=yellow> <tr> <td>Nume si prenume <td>Functia <tr bgcolor=magenta> <td>Ionescu Dan <td>Contabil <tr > <td bgcolor=lime>Pop Marius <td bgcolor=aqua>Director zonal </table> </body> </html>

Imagini de fond pentru tabel 
Imaginea de fond pentru un tabel se stabile te cu ajutorul

atributului background al etichetei <table>.  Imaginea de fond pentru o celul de date se stabile te cu ajutorul atributului background al etichetei <td>.

Exemplul 60
<html> <head><title>Exemplul 52</title></head> <body> <table border=5 background=bg2.jpg> <tr> <td>Nume si prenume <td>Functia <tr> <td background=bg10aa.jpg>Ionescu Dan <td background=bg6.jpg>Contabil <tr > <td background=bg27.jpg>Pop Marius <td background=bg45.jpg>Director zonal </table> </body> </html>

Distan a dintre celule 
Distan a dintre dou celule al turate se stabile te cu

ajutorul atributului cellspacing al etichetei <table>.  Valoarea atributului cellspacing este un numer natural i reprezint distan a în pixeli dintre dou celule al turate.

Exemplul 61
<html> <head><title>Exemplul 53</title></head> <body> <table border=5 bordercolor=red bgcolor=yellow cellspacing=4> <tr> <td>Nume si prenume <td>Functia <tr bgcolor=magenta> <td>Ionescu Dan <td>Contabil <tr > <td bgcolor=lime>Pop Marius <td bgcolor=aqua>Director zonal </table> </body> </html>

Distan a dintre marginea celulei i con inutul ei 
Distan a dintre marginea celulei i con inutul ei

se stabile te cu ajutorul atributului cellpadding al etichetei <table>.  Valoarea atributului cellpadding este un numer natural i reprezint distan a în pixeli dintre marginea celulei i con inutul ei.

Exemplul 62
<html> <head><title>Exemplul 53</title></head> <body> <table border=5 bordercolor=red bgcolor=yellow cellpadding=9> <tr> <td>Nume si prenume <td>Functia <tr bgcolor=magenta> <td>Ionescu Dan <td>Contabil <tr > <td bgcolor=lime>Pop Marius <td bgcolor=aqua>Director zonal </table> </body> </html>

Atributele width i height 
Stabilirea l imii tabelului se realizeaz cu ajutorul atributului width   



al etichetei <table>. Stabilirea în l imii tabelului se realizeaz cu ajutorul atributului height al etichetei <table>. Valorile atributelor width i height pot fi numere naturale reprezentând l imea, respectiv în l imea în pixeli a tabelului sau un procent din suprafa a paginii Web. Pentru a stabili în l imea unui rând, se utilizeaz atributului height ca atribut al etichetei <tr> Pentru a stabili l imea i în l imea unei celule, se utilizeaz atributului width, respectiv height ca atribut al etichetei <td>

Exemplul 63
<html> <head><title>Exemplul 53</title></head> <body> <table border=5 bordercolor=red bgcolor=yellow width=40% height=25%> <tr> <td>Nume si prenume <td>Functia <tr bgcolor=magenta> <td>Ionescu Dan <td>Contabil <tr > <td bgcolor=lime>Pop Marius <td bgcolor=aqua>Director zonal </table> </body> </html>

Atributele align i valign 
Utilizarea atributului align ca i atribut al etichetei <table> are ca

efect alinierea tabelului în pagina Web. Valorile acestui atribut pot fi: left (valoare implicit ), center i right.  Utilizarea atributului align ca i atribut al etichetei <tr> are ca efect alinierea con inutului celulelor. Valorile acestui atribut pot fi: left (valoare implicit ), center i right.  Utilizarea atributului align ca i atribut al etichetei <td> are ca efect alinierea con inutului celulei pe orizontal . Valorile acestui atribut pot fi: left (valoare implicit ), center i right.  Utilizarea atributului valign ca i atribut al etichetei <td> are ca efect alinierea con inutului celulei pe vertical . Valorile acestui atribut pot fi: top, middle (valoare implicit ), bottom.

Celule vide ale unui tabel 
Dac un tabel are celule vide, atunci aceste celule vor

ap rea în tabel far un chenar de delimitare. În scopul de a afi a un chenar pentru celule vide se scrie dup eticheta <td> caracterul &nbsp; sau eticheta <br>.

Exemplul 64
<html> <head> <title>Exemplul 56</title> </head> <body> <table border=5 bordercolor=brown> <tr> <td>c11 <td>c12 <tr> <td>c21 <td>&nbsp; <tr > <td><br> <td>c32 </table> </body> </html>

Atributele colspan i rowspan 
Num rul de coloane pe care se întinde celula

se stabile te cu ajutorul atributului colspan al etichetei <td>.  Num rul de rânduri pe care se întinde celula se stabile te cu ajutorul atributului rowspan al etichetei <td>.

Exemplul 65
<html> <head> <title>Exemplul 57</title> </head> <body> <table border=5 bordercolor=brown> <tr bgcolor=coral align=center> <td rowspan=2>Nume si prenume<td colspan=3>Data nasterii <tr align=center bgcolor=coral> <td>zi<td>luna<td>an <tr > <td>Avram Adrian<td>23<td>aprilie<td>1981 <tr > <td>Olaru Elvira<td>12<td>august<td>1980 </table> </body> </html>

Titlul unui tabel 
Unui tabel i se poate ata a un titlu cu ajutorul etichetei

<caption>.  Eticheta <caption> trebuie plasat în interiorul etichetelor <table> i </table>.  Alinierea titlului unui tabel se poate realiza cu ajutorul atributului align al etichetei <caption>.  Atributul align poate lua una din urm toarele valori: 
  

left right top bottom

Exemplul 66
<html> <head><title>Exemplul 58</title></head> <body> <table border=5 bordercolor=brown> <caption>Tabel <tr bgcolor=coral align=center> <td rowspan=2>Nume si prenume<td colspan=3>Data nasterii <tr align=center bgcolor=coral> <td>zi<td>luna<td>an <tr > <td>Avram Adrian<td>23<td>aprilie<td>1981 <tr > <td>Olaru Elvira<td>12<td>august<td>1980 </table> </body> </html>

Cap de tabel 
Dac în loc de eticheta <td> se folose te eticheta <th>,

textul din celul apare scris cu caractere îngro ate i centrat.

Exemplul 67
<html> <head><title>Exemplul 58</title></head> <body> <table border=5 bordercolor=brown> <caption>Tabel <tr bgcolor=coral align=center> <th rowspan=2>Nume si prenume<th colspan=3>Data nasterii <tr align=center bgcolor=coral> <th>zi<th>luna<th>an <tr > <td>Avram Adrian<td>23<td>aprilie<td>1981 <tr > <td>Olaru Elvira<td>12<td>august<td>1980 </table> </body> </html>

Sign up to vote on this title
UsefulNot useful