Sari la conținut

Tutoriale html - Tabele - Elemente de baza in html


Postări Recomandate

In continutul site-ului vostru veti include tabele, fie ca e vorba de clasificarea unor item-uri, fie ca veti utiliza aceste tabele pentru a particulariza interfata paginii ( intreaga pagina sa fie defapt un tabel cu mai multe celule avand fundaluri diferite si continut corespunzator ).
Pentru a incepe sa folositi tabelele trebuie sa stici ca tagul necesar este <table></table>.
Un simplu tabel arata cam asa :

<table border="1">
  <tr>
    <td>randul 1, celula 1</td>
    <td>randul 1, celula 2</td>
  </tr>
  <tr>
    <td>randul 2, celula 1</td>
    <td>randul 2, celula 2</td>
  </tr>
</table>

Bun, <table> deschide tabelul. <tr> anunta inceperea unui rand. <td> introduce o noua celula( si continutul acesteia ).
Tagurile de inchidere sunt </tr> pentru randuri, respectiv </td> pentru celule.
Tabelul va fi terminat prin </table>
Table headers.
In cadrul tabelelor pot fi introduse capete de lista ca sa zicem asa. Exemplu:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>randul 1, celula 1</td>
    <td>randul 1, celula 2</td>
  </tr>
  <tr>
    <td>randul 2, celula 1</td>
    <td>randul 2, celula 2</td>
  </tr>
</table>

Pentru a vedea rezultatele acestor exemple copiati codul intr-un text editor ( gen notepad si dati save as documentWeb.html )
Dupa cum ati observat am folosit atributul border="1" pentru a evidentia marginile tabelului.
Tagul <table> suporta atributele html globale cum ar fi class, id, style, etc. Atributele globale le gasiti aici : 

https://www.w3schools.com/html/html_tables.asp

Folosind tagurile id sau class va veti usura munca in procesul de stilare a paginii web.
Daca aveti intrebari va rog sa mi le adresati mai jos, lasand un comentariu.
© Tzunyo

Link spre post
Distribuie pe alte site-uri

Alătură-te conversației

Poți posta acum și să te înregistrezi mai târziu. Dacă ai un cont, autentifică-te acum pentru a posta cu contul tău.

Vizitator
Răspunde la acest subiect...

×   Alipit ca text avansat.   Alipește ca text simplu

  Doar 75 emoji sunt permise.

×   Linkul tău a fost încorporat automat.   Afișează ca link în schimb

×   Conținutul tău precedent a fost resetat.   Curăță editor

×   Nu poți lipi imagini direct. Încarcă sau inserează imagini din URL.

×
×
  • Creează nouă...

Informații Importante

Politică Intimitate Am plasat cookie-uri pe dispozitivul tău pentru a îmbunătății navigarea pe acest site. Poți modifica setările cookie, altfel considerăm că ești de acord să continui.