|
Pe HaiSaRadem.ro vei gasi bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online. Nu ne crede pe cuvant, intra pe HaiSaRadem.ro ca sa te convingi. |
|
|
Pe HaiSaRadem.ro vei gasi bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online. Nu ne crede pe cuvant, intra pe HaiSaRadem.ro ca sa te convingi. |
Una din marile probleme ale designerilor web este pozitionarea exacta in pagina a continutului (texte, imagini, bannere, etc.). Aceasta se poate rezolva inserand in pagina tabele cu bordura transparenta (invizibil) si plasand in celulele acestora informatiile dorite - vezi figura.
Tabelele se definesc folosind eticheta <table>. Aceasta poate contine diferite atribute, dintre care cele mai importante sunt:
• Align = left | center | right - alinierea tabelului in pagina
• Width = ”x | x%” - latimea tabelului in pixeli / fata de latimea paginii
• Height = ”x | x%” - inaltimea tabelului in pixeli / fata de inaltimea paginii
• Border = "x” - grosimea liniei chenarului din jurul tabelului ("0” pentru bordura transparenta si tabel invizibil)
• Bordercolor = "culoare | #rrggbb” - culoarea liniilor de bordura ale tabelului
• Bgcolor = "culoare | #rrggbb” - culoarea de fundal a celulelor tabelului
• Background = "imagine” - imaginea de fundal a tabelului (acopera culoarea de fundal)
• Cellspacing = ”x” - spatiul dintre celulele tabelului
• Cellpadding = "x” - spatiul dintre continutul celulei si bordura acesteia
Exemplu:
<html>
<table border="5" align="center" cellpadding="5" cellspacing="5" bordercolor="#11ff11" bgcolor="yellow" width="50%">
<tr>
<td width="50%">baieti</td>
<td width="50%">100</td>
</tr>
<tr>
<td width="50%">fete</td>
<td width="50%">60</td>
</tr>
</table>
</html>
Liniile din tabel se definesc cu eticheta <tr>, iar celulele – cu eticheta <td> (cele doua etichete aparand intre <table> si </table>).
Antetul tabelului se defineste cu eticheta <th>, aflata de asemenea intre <table> si </table>. Dintre atributele mai importante din eticheta <th>, mentionam:
• Valign = "top | middle| bottom” - alinierea pe verticala a continutului.
• Align = "center | left | right” - alinierea pe orizontala a continutului.
• Colspan = "x” - precizeaza pe cate coloane se intinde antetul.
Se pot folosi si atributele height, bordercolor, bgcolor, cellspacing, cellpadding, prezentate mai sus. Exemplu:
<html>
<table width="50%" border="1">
<th valign="top" colspan="2" align="center" height="50" bgcolor="yellow">Elevi</th>
<tr>
<td width="30%">baieti</td>
<td>100</td>
</tr>
<tr>
<td>fete</td>
<td>60</td>
</tr>
</table>
</html>
Dintre atrinbutele mai importante din eticheta <td>, mentionam:
• Width = "x%” - latimea celulei fata de latimea randului. Randurile urmatoare vor avea automat aceeasi latime pentru celule – vezi <td width="30%"> din exemplul anterior .
• Rowspan = "x” - pe cate randuri din tabel se intinde celula.
• Colspan = "x” - pe cate coloane din tabel se intinde celula
Se pot folosi si alte atribute, dintre cele prezentate in paragrafele anterioare: bgcolor, align, etc.
Exemplu:
<table border="1" bordercolor="#00ff00" width="90%" align="center">
<tr>
<td align="center" bgcolor="#00FF00">Disciplina</td>
<td align="center" bgcolor="#00FF00">Forma de examinare</td>
<td align="center" bgcolor="#00FF00">Numar credite</td>
<td align="center" bgcolor="#00FF00" colspan="2" >Ponderi</td>
</tr>
<tr>
<td align="center">Bazele contabilitatii</td>
<td align="center" rowspan="2">Examen</td>
<td align="center">6</td>
<td align="center">60% Examen</td>
<td align="center">40% Seminar</td>
</tr>
<tr>
<td align="center">Bazele informaticii</td>
<td align="center">5</td>
<td align="center">70% Examen</td>
<td align="center">30% Seminar</td>
</tr>
</table>
Incercati: 1. Bifati in dreptul afirmatiilor adevarate:
[ ] Textul din celulele unui tabel se intinde pe unul sau mai multe randuri, in functie de dimensiunile ferestrei browserului.
[ ] Scrisul pe doua randuri intr - o celula se face separand textul cu ajutorul etichetei <br>.
[ ] In mod implicit coloanele sunt dimensionate in mod egal, dar continutul celulelor poate influenta latimea coloanelor.
2. Realizati un tabel cu bordura transparenta, format dintr – o linie si 3 coloane. Plasati 2 imagini: una in prima si cealalta in ultima celula din tabel. In celula din mijloc, introduceti un text aliniat pe mijlocul paginii (atat pe orizontala cat si pe verticala).
