Tutorial HTML Tabel

În acest tutorial este exemplificată folosirea unui tabel în HTML.
În următoarele rânduri va voi explica cum sa ajungeți de la tabelul simplu la cel complex.
Sursele pentru tabelele din site le puteți găsi la sfârșitul tutorialului.

Cuprins:

1. Tabel HTML simplu
2. Tabel simplu folosind colspan
3. Tabel simplu folosind rowspan
4. Tabele HTML si stilul CSS
5. Tagul style si selectorii CSS
6. Fisiere externe CSS

Tabel HTML simplu

În pagina dumneavoastră HTML adăugați următoarele linii de cod pentru a avea rezultatul din exemplu.


Rezultat:

 Cod:


Explicații:

1. Tagul table:
1. este folosit pentru a defini un tabel
2. Atributul border:
1. este folosit pentru a defini grosimea marginii tabelului
2. acceptă numere pozitive
3. pentru valoarea 0 marginea nu este vizibilă
4. dacă atributul este omis marginea nu este vizibilă
2. Tagul <tr>:
1. definește un rand în interiorul tabelului
2. numele acestuia vine de la Table Row, care înseamna rand de tabel
3. în interiorul acestuia se pot introduce celule de tipul th și td
3. Tagul <th>:
1. definește o celula de tipul titlu (antet)
2. numele acestuia vine de la Table Header, care înseamna titlu de tabel
4. Tagul <td>:
1. definește o celula standard
2. numele acestuia vine de la Table Data, care înseamna date tabel
   

Tabel HTML folosind colspan

Rezultat:

Cod:

Explicatii:

1. Atributul colspan:
1. este folosit pentru a stabili pe câte coloane se întinde celula
2. acceptă numere naturale mai mari ca 0
3. se poate aplica atât la tagul <th> cât și la tagul <td>

Tabel HTML folosind rowspan

Rezultat:

Cod:

Explicatii:

1. Atributul rowspan:
1. este folosit pentru a stabili pe câte rânduri se întinde celula
2. acceptă numere naturale mai mari ca 0
3. se poate aplica atât la tagul <th> cât și la tagul <td>

Tabele HTML și stilul CSS

  
În pasul următor o să vă explic cum se poate adăuga stil CSS.
Formatarea CSS poate fi aplicata cu ajutorul:
    - atributului style din tagul țintă
    - tagului style si a selectorilor CSS
    - fișier extern CSS

Pentru început vom adăuga stilul direct elementelor HTML cu ajutorul atributului style.
Acest atribut este recomandat pentru efecte vizuale minore și care se doresc a fi aplicate individual.
Rezultat:

 Cod:



Explicații:
- border-color
    - este folosit pentru a schimba culoarea marginii
    - accepta culoarea sub forma de cod:
        - hexa  #FF0000
        - RGB rgb(255,0,0)
        - numele culorii "blue"
- border-style
    - este folosit pentru a defini tipul marginii
    - accepta următoarele valori :        

	- dotted	- groove
	- dashed	- ridge
	- solid	- inset
	- double	- outset

- text-decoration:
    - aduce modificări de stil textului la care se aplică
    - poate lua următoarele valori:
         - blink
         - line-through
         - overline
         - underline
         - inherit (moștenește setările de la părinte)
         - none  (șterge decorațiunile)

Tagul style și selectorii CSS

  
Tagul style permite folosirea CSS în interiorul tabelului fără a folosi un fișier extern.

Codul CSS se introduce în interiorul tagului <style></style>.
Regulile CSS se adaugă unui sau mai multor elemente folosind selectorii.
De exemplu, pentru a aplica formatarea CSS tuturor celulelor din tabelele pagini HTML se aplică următorul selector:

td {background-color:red;}

Acesta va face fundalul rosu pentru toate elementele de tipul td din pagina HTML.

    Pentru a selecta elemente specifice se poate folosi atributul id a tagului țintă.
De exemplu, daca doriti sa modificați doar un anumit tabel setati atributul id al acestuia
cu un nume semnificativ, pe care mai tîrziu sa-l folosiți în selector.

#elementulMeu {background-color:red;}

Acest selector va face fundalul rosu pentru toate tagurile HTML care au setate atributul
id cu valoarea "elementuMeu" (Ex: <table id="elementulMeu">).

    Pentru a selecta o anumita clasa de taguri se folosește atributul class. Acesta se completează cu
un nume sugestiv pe care mai apoi se va folosi în selectorul CSS.
Daca doriti sa modificați un grup de tabele completati aceeasi valoare in attributul class si folositi selectorul CSS.

.elementulMeu {background-color:red;}

Acesta modifica toate elementele HTML care au atributul class cu valoarea "elementuMeu"
setînd fundalul la culoare roșie.

În următorul exemplu este demonstrata folosirea regulilor CSS cu ajutorul tagului style.

Rezultat:

 Cod:

Fișiere externe CSS

  
Pentru a adăuga un fișier extern CSS adăugați următoarea linie de cod în pagina HTML:

<link rel="stylesheet" type="text/css" href="stilulMeu.css">

Linia de cod se adaugă în interiorul tagului head a paginii. 
    Atributul href conține calea către fișierul extern de stil. Dacă acesta se află în același
folder cu pagina HTML, este necesar sa scrieți doar numele, dacă nu, este necesar să
completați calea întreaga a acestuia.
    Pe o pagina se poate adăuga unul sau mai multe fișiere CSS. De exemplu puteți avea un fișier general de stil care sa-l aplicați pe tot site-ul și unde este cazul sa adăugați un fișier special pentru pagina dorită.
    Formatarea se aplica la fel ca și la secțiunea "Tagul style și selectorii CSS" , doar că în cazul nostru, regulile de stil se află într-un fișier extern.

Rezultat:

 Cod HTML (in prima caseta) si CSS:



Explicații:
Dupa cum ati observat codul CSS se va salva in fisierul stilulMeu.css pentru a avea acces la continutul acestuia in pagina HTML.
Fiindcă nu apare nimic nou în privința codului HTML am sa trec direct la explicațiile codului CSS.
Mai întîi am sa explic selectorii CSS avansați:

.tabelAvansat td b {}

Acesta va selecta tagurile <b>, care au ca părinte un tag <td>, care la rîndul
lui are ca părinte un element HTML cu clasa "tabelAvansat".
Ca elementul <b> sa fie selectat următoarea structură trebuie sa fie îndeplinită:

<table border="1" class="tabelAvansat">
  <tr>
    <td><b>Celula</b></td>
  </tr>
</table>

    După cum ați observat, ca să se facă selecția nu este necesar ca părintele să fie
exact pe nivelul superior fiului.
În cazul nostru nostru următorii pași sunt luati pentru a face selecția:
- se selectează toate tagurile HTML cu clasa "tabelAvansat"
- din rezultatul obținut(în cazul nostru tagul <table>), se caută mai departe în interiorul
  rezultatului doar elementele de tipul <td>
- din rezultat(dacă am fi avut mai multe elemente de tipul <td> ar fi fost selectate și
  acestea, în cazul nostru avem un singur element) se selectează elementele <b>,
  rămînînd cu tagul <b>Celula</b> ca rezultat final

Un alt selector avansat este:

.tabelAvansat tr:nth-child(odd) {}

Pe acesta l-am folosit ca sa selectez rîndurile impare din tabel, asa am reușit
sa alternez culorile la rînduri.
    Spre deosebire de restul selectorilor de pana acum, selectorul :nth-child(odd)
nu cauta în interiorul rezultatului ci filtrează elementele găsite.
Mai exact, din tagurile <tr> găsite sunt selectate doar cele care îndeplinesc
condiția de a avea un număr impar al nodului(pentru numere pare se folosește
valoarea even).
De exemplu, dacă sunt găsite 3 elemente, regula se va aplica primului(nod cu numărul 1)
și ultimului element(nod cu numărul 3).

    Acum ca am clarificat cum se realizează selectările, am sa trec la regulile
CSS folosite:
- background-image:
    - este folosit pentru a seta imaginea de fundal a elementului
    - acceptă urmatorile valori:
        - url('URL') - unde URL este adresa fundalului, dacă fișierul se află în același
          folder cu fișierul CSS se poate scrie doar numele fișierului de tip imagine
        - none - nu se folosește imagine de fundal (valoare implicita)
        - inherit - imaginea de fundal este moștenită de la părinte
- background-repeat:
    - se specifică dacă fundalul se repeta, în cazul în care elementul HTML are
      dimensiunea mai mare decît imaginea
    - accepta următoarele valori:
        - repeat      : imaginea se repeta pe verticală și pe orizontală
        - repeat-y   : imaginea se repeta numai pe verticală
        - repeat-x   : imaginea se repeta numai pe orizontală
        - no-repeat : imaginea nu se repeta
        - inherit      : comportamentul se moștenește de la părinte
-  background-color
    - este folosit pentru a schimba culoarea fundalului
    - accepta culoarea sub forma de cod:
        - hexa  #FF0000
        - RGB rgb(255,0,0)
        - numele culorii "blue"
- font-weight
    - definește grosimea caracterelor
    - acceptă următoarele valori
        - normal (setare implicita)
        - bold
        - bolder
        - lighter
        - inherit (moștenește setarea de la părinte)
- padding
    - definește spațiul dintre marginea elementului și conținutul acestuia
    - se poate defini in urmatoarele moduri
        - padding:25px 50px 75px 100px;
            - spațiul de sus este 25px
            - spațiul din dreapta este 50px
            - spațiul de jos este 75px
            - spațiul din stanga este 100px
        - padding:25px 50px 75px;
            - spațiul de sus este 25px
            - spațiul din dreapta și din stânga este 50px
            - spațiul de jos este 75px
        - padding:25px 50px;
            - spațiul de sus și de jos este 25px
            - spațiul din dreapta și din stânga este 50px
        - padding:25px;
            - spațiul este uniform și are 25px
- font-size
    - definește mărimea textului
    - accepta următoarele valori:
        - xx-small        - xx-large
        - x-small          - x-large
        - small             - large
        - smaller (setează mărimea textului mai mica decât cea a elementului părinte)
        - larger (setează mărimea textului mai mare decât cea a elementului părinte)
        - inherit (moștenește proprietatea de la elementul părinte)
        - valori de tipul procentaj Ex: 10% , 200%
        - valori de tipul lungime Ex: 20px , 1cm
- font-family       
    - definește tipul caracterelor
    - accepta valori de tipul: arial, times, verdana

Sursele pentru tabel le puteti gasi aici.