marți, 11 octombrie 2016

S5:11.10-14.10


FISE DE LUCRU:
HTML-elemente avansate - tabele

Tabelele permit organizarea informaţiilor într-un document HTML.
Inserarea unui tabel se face prin intermediul tag-urilor <TABLE> şi </TABLE>.
Tag-ul TABLE admite următoarele atribute:
  • SUMARRY = text – specifică  o descriere a rolului şi structurii tabelului, aceste informaţii nu sunt vizualizate în pagina Web;
  • ALIGN =  LEFT │ RIGHT │CENTER  – specifică alinierea tabelului în document;
  • WIDTH = valoare – specifică lăţimea întregului tabel; valoarea poate fi specificată în număr de pixeli sau în procente;
  • HEIGHT = valoare – specifică înălţimea întregului tabel; valoarea poate fi specificată în număr de pixeli sau în procente;
  • BORDER = valoare – specifică în număr de pixeli grosimea liniei chenarului din jurul tabel;
  • COLS = valoare – specifică numărul de coloane ale tabelului;
  • CELLSPACING = valoare – specifică spaţiul dintre celule şi spaţiul dintre celule şi marginea tabelului; 
  • CELLPADING = valoare – specifică spaţiul dintre chenarul celulei şi spaţiul conţinutul ei; valoarea poate fi specificată în număr de pixeli sau în procente;
Conţinutul elementului TABLE este constituit din liniile tabelului. Specificarea unei linii se realizează cu ajutorul elementului TR (Table Row), între eticheta de început <TR> şi cea de sfârşit </TR> (opţională) fiind descrise celulele de pe linia respectivă.

Exemplu:

<TABLE>
  <TR> continutul primei linii
  <TR> continutul celei de a doua linii </TR>
</TABLE>

Specificarea celulelor care constituie o linie se realizează prin intermediul elementelor TH (Table Header), pentru celulele care constituie antetul tabelului (capul de tabel), respectiv TD (Table Data) pentru celulele care conţin informaţiile din tabel.
Elementele TH şi TD admit următoarele atribute:
  • ROWSPAN = număr_de_linii – specifică numărul de linii acoperite de celula respectivă; valoarea implicită este 1; valoarea 0 semnifică faptul că această celulă acoperă toate liniile începând cu cea curentă;
  • COLSPAN = număr_de_coloane – specifică numărul de coloane acoperite de celula respectivă; valoarea implicită este 1; valoarea 0 semnifică faptul că această celulă acoperă toate coloanele începând cu cea curentă;
  • WIDTH =  valoare  –  specifică lăţimea celulei în număr de pixeli;
  • HEIGHT =  valoare  –  specifică înălţimea celulei în număr de pixeli;
<html>
<head>
<title> Tabel HTML</title>
</head>
<body>
  <table border="2" width="50%" align="center">
    <tr>
      <th colspan="5" bgcolor="#AAFFFF"><b>ORAR</b></th>
    </tr>
    <tr>
      <th>Luni</th>
      <th>Marti</th>
      <th>Miercuri</th>
      <th>Joi</th>
      <th>Vineri</th>
    </tr>
    <tr>
      <td>Matematica</td>
      <td>E</td>
      <td>Geografie</td>
      <td>Desen Tehnic</td>
      <td rowspan="2">Informatica-TAC</td>
    </tr>
    <tr>
      <td>Fizica</td>
      <td rowspan="2">LB. Romana</td>
      <td>B</td>
      <td>D</td>
    </tr>
    <tr>
      <td>M</td>
      <td>I</td>
      <td>E</td>
      <td>B</td>
    </tr>
    <tr>
      <td>L</td>
      <td>C</td>
      <td>B</td>
      <td>I</td>
      <td>B</td>
    </tr>
   </table>
</body>
</html>

Sarcina de lucru:
 1.       Realizati o pagina web cu numele "TABEL HTML" si salvat tabel.html cu urmatorul continut:
Hobby-uri
sport
muzica
pictura
dans
2.       Formatati tabelul astfel:
a.       Borduraalbastra, grosime7;
b.      Inaltime tabel 50%;
c.       Aliniati tabelul la dreapta paginii;
  
3.       Realizati o pagina web cu numele "TABEL HTML" si salvat tabel.html cu urmatorul continut:
Hobby-uri
sport
muzica
dans
4.       Formatati tabelul astfel:
a.       Bordura rosie, grosime 5;
b.      Latime tabel 50%;
c.       Aliniati tabelul in centrul paginii;


la

Niciun comentariu:

Trimiteți un comentariu

Abonați-vă la: Postare comentarii (Atom)