duminică, 15 noiembrie 2015

Tabele HTML

Titlu tabel  <th>.....</th>
Linia sau randul tabel  <tr>......</tr>
Coloanele sau datele   <td>....</td>
Subtitlu  <caption>...</caption>

Atribute tabel:
  • bgcolor="culoare tabel"
  • width-lungime tabel in pixeli sa in procente% din lungimea paginii
  • border-grosimea liniei in pixeli
  • cellspacing- spatiu intre celule in pixeli
  • cellpadding-spatiu dintre linia celulei si continutul acesteia in pixeli
  • align-pozitionarea tabelului in pagina (right,left,center)
  • background-culoarea de fond care poate fi si o imagine
  • bordercolor-culoarea liniei din jurul tabelului

Atributele specifice elementelor pentru titlu si coloane

  • - colspan   = specifica cat de multe coloane ale tabelului aceasta celula va inlocui
  • - rowspan   = specifica cat de multe randuri ale tabelului aceasta celula va inlocui
  • - align   = alinierea datelor celulei pe orizontala (left, right sau center)
  • - valign   = alinierea datelor celulei pe verticala (top, middle sau bottom)
  • - background   = controleaza culoarea de fond a celulei, care poate fi si o imagine
  • - bgcolor   = defineste culoarea celulei (dar nu imagine)
  • - width   = specifica lungimea celulei (In pixeli sau procente din lungimea paginii)
  • - height   = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)


 <table border="1">
<tr>
    <th>elevi</th>
    <th>profesori</th>
</tr>
<tr>
    <td>Chimie</td>
    <td>clasele X</td>
</tr>
<tr>
    <td>Fizica</td>
    <td>Clasele XI</td>
</tr>
<tr>
    <td>Geografie</td>
    <td>Clasele XII</td>
</tr>
</table>

 <html><body><table border="5" bgcolor="cyan" bordercolor="magenta" cellspacing="7" cellpadding="10">
<tr>
    <th>elevi</th>
    <th>profesori</th>
</tr>
<tr>
    <td bgcolor="pink">Chimie</td>
    <td>clasele X</td>
</tr>
<tr>
    <td>Fizica</td>
    <td>Clasele XI</td>
</tr>
<tr>
    <td>Geografie</td>
    <td>Clasele XII</td>
</tr>
</table></body> </html>

Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a uni mai mute linii şi "colspan" pentru a uni mai multe coloane. De asemenea, dacă vrem ca prima linie să conţină titluri pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere îngroşate ca în exemplul următor:

 <html></body>
<TABLE BORDER=10>
<th colspan="2">fructe</th>
<TR> <TD>mere</TD> <TD>pere</TD> </TR>
<TR> <TD>struguri</TD> <TD>portocale</TD> </TR>
</TABLE>
</body></html>
<html></body>
<table border="10" cellpadding="2">
<tr>
    <td rowspan="3">fructe</td>
    <td>ananas</td>
</tr>
<tr>
    <td bgcolor="#ccff33">pere</td>
</tr>
<tr><td bgcolor="#ff3300">mere</td></tr>
</table>
</body></html>

Niciun comentariu:

Trimiteți un comentariu