Tutorial HTML - Tabele
Tabelele pot aparea dificile la inceput, dar cu putina rabdare si practica vei vedea ca nu sunt asa cum par. Tagul <table> este folosit pentru a deschide un tabel. Inauntrul acestui tag vom gasi alte doua taguri tipice <tr> (liniile tabelului) si <td> (coloanele tabelului). Dar cea mai buna explicatie ar fi in momentul de fata un exemplu:
|
<table border="1"> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> |
Vizualizare
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
Continutul va fi plasat in interiorul casutelor tabelului. O casuta este ceea ce se afla intre <td> si </td>. Atributul border stabileste latimea marginii tabelului.
HTML - Tabele asimetrice
Pentru a forma tabele asimetrice vom folosi "rowspan" pentru a traversa mai mute linii si "colspan" pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri pentru toate coloanele vom folosi tagul <th>. Acestea vor fi scrise cu litere ingrosate dupa cum vom vedea in exemplu urmator:
|
<table border="1"> |
Vizualizare
|
Column 1 |
Column 2 |
Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
HTML - Spatierea celulelor
Cu ajutorul atributelor "cellpadding" si "cellspacing" vom defini distanta dintre celule. "cellspacing" stabileste marimea marginii, iar "cellpandding" stabileste distanta dintre margine si continut. In exemplu urmator a fost adaugata deasemenea putina culoare.
|
<table border="1" cellspacing="10" |
VIzualizare
Pentru a face mai bine diferenta vom elimina marginea din exemplu anterior.
|
<table border="1" cellpadding="10" <tr> <th>Column 1</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> |
Vizualizare
Distanta intre celule si dimensiunea margini va fi inerpretata de browser in pixeli. Conform acestei "legi" o valoare de 10 sunt de fapt 10 pixeli. Acest atribut nu este singurul care foloseste ca unitate de masura, pixeli, dar vom invata despre celelalte pe masura ce vom innainta in urmatoarele tutoriale.
Comentarii
Ma poate ajuta cineva? Vreau sa fac un tabel cu mai multe coloane si randuri in care sa fie inserate in el imagini nu text, si ar mai fi ceva...cum pun acest tabel pe mijlocul paginii, am incercat toate variantele cu center...dar nu-mi iese...
daca vrei sa inserezi imagini atunci la fiecare rand si celula pui comanda background...<td background="adresaimaginii.jpg">
daca vrei sa il pui pe mijloc...<table align="center"> bafta
Sall as fi recunoscator daca miai da un exemplu de cod html care sai faca un tabel ca o grupa la fotbal din 5 randuri in jos si 5 in lateral...Ms
@DjAllex
Daca te referi la un tabel cu 5 randuri si 5 coloane formatul acestui cod e cam asa, in functie si de ce alte atribute ai vrea sa mai adaugi:
Modificat de @catalin
Multumesc @dany20 pentru intentie dar codul este prea lung.
@DjAllex - Gasesti aici un generator de tabele.
am nevoie sa fac un cuprins in stanga paginii insa nu ma pricep.. ma poate ajuta cineva, va rog?
Care din următoarele linii de cod HTML conţin erori si de ce?
- <TABLE valign="top">
- <TR valign="top">
- <TD border=1>
- <TD width=100%>
sall.
@gri:
stiam ca procentajul se pune in ghilimele, asta s-ar putea sa fie eroarea.incearca.
sal am si eu nevoie de ajutor vreau sa fac un tabel dar sami apara o coloana cu scris in stanga si in dreapta o coloana cu un videoclip dar tabelul sa apara asa cum e creata acum pagina asta?
As dori sa stiu cum fac la tabele ca colutile sa fie rotunde.
Cum aliniez un tabel la dreapta, iar paragraful sa fie la stanga(in dreptul tabelului)?
Salut, sunt incepator in ceea ce priveste designul web si am o mare rugaminte, cum creez un tabel in care sa zicem ca am 10 randuri si 10 coloane iar fiecare celula sa aiba inaltime si latime de 10 pixeli. Am incercat in fel si chip si nu iese, am incercat si cu "Seamonkey", degeaba, orice as face celule nu sunt egale. Va rog mult, dati-mi un sfat ca nu mai stiu unde sa caut!
Trimite un comentariu!
