HTML Lentelės

Lukas

HTML Lentelės yra apibrėžiamos žyme <table>. Lentelės visada turi turėti nors vieną eilutę ir nors vieną stulpelį. Eilutė apibrėžiama <tr> žyme, o stulpelis toje eilutėje - <td>. <tr> žymės yra skirtos <td> žymių grupiavimui, į <td> žymės vidų galima talpinti tekstą, paveikslėlius, sąrašus, paragrafus, formas, horizontalias liniuotes, kitas lenteles ir t.t.

Štai kaip atrodo paprasčiausia HTML lentelė:

pirma eilutė, pirmas stulpelis (pirmo <tr> pirmas <td>td>)	pirma eilutė, antras stulpelis (pirmo <tr> antras <td>td>)
antra eilutė, pirmas stulpelis (antro <tr> pirmas <td>td>)	antra eilutė, antras stulpelis (antro <tr> antras <td>td>)

Pažymėkime viską skaičiais:

1.1	1.2	1.3
2.1	2.2	2.3

Kad būtų aiškiau, pridėjau trečią stulpelį. Šios lentelės kodas:

<table width="200" cellspacing="0" cellpadding="5" border="1">
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
</table>

Paaiškinimai

<table> table> - nurodo lentelės pradžią ir pabaigą
<tr>tr> - nurodo naują eilutės pradžią ir pabaigą

Tarp eilutės pradžios ir pabaigos žymių yra aprašyti trys stulpeliai:

Tarp pirmųjų <tr> žymių - 1.1, 1.2 ir 1.3
Tarp antrų - 2.1, 2.2 ir 2.3.

<table> žymė turi kelis savo parametrus: width, cellspacing, cellpadding ir border. Tai yra pagrindiniai parametrai, kuriuos reikia nurodyti kuriant lentelę.

width nurodo plotį, dažniausiai naudojamas tiesiog paprastas skaičius, kas reiškia lentelės plotį pikseliais. Jei norime išsireikšti procentais, gale skaičiaus reikia pridėti procentų ženklą, pvz.: width="50%"
cellspacing nurodo tarpus tarp lentelės <td> elementų
cellpadding vidinį <td> elemento atitraukimą, t.y. jeigu lentelės parametras cellpadding bus lygus 10, tada tekstas, esantis <td> elemento viduje nuo kraštų bus atitrauktas per 10 pikselių
border parametras nurodo koks yra lentelės rėmelio storis

HTML Lentelės - antraštės

Antraštę lentelėje galima nurodyti žyme <th>:

<table width="300" cellspacing="0" cellpadding="5" border="1">
  <tr>
    <th>Antraštė 1.1</th>
    <th>Antraštė 1.2</th>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
  </tr>
</table>

rezultatas bus toks:

Antraštė 1.1	Antraštė 2.1
1.2	2.2

Tušti langeliai

Tušti langeliai ne visada būna atvaizduojami taip, kaip norima, todėl reikia nepamiršti specialiojo simbolio &nbps; (non-breakable space) kuris nurodo nepertraukiamą tarpą. Jei norite turėti tuščią langelį, į jį įrašykite šį nepertraukiamą tarpą ir žinosit, kad visose naršyklėse bus atvaizduota teisingai.

<table width="400" cellspacing="0" cellpadding="5" border="1">
  <tr>
    <th>Paprastas tuščias</th>
    <th>Antraštė 1.2</th>
    <th>Tuščias su spec. simboliu</th>
  </tr>
  <tr>
    <td></td>
    <td>2.2</td>
    <td>&nbsp;</td>
  </tr>
</table>

Paprastas tuščias	Antraštė 1.2	Tuščias su spec. simboliu
	2.2

HTML Lentelės - pavyzdžiai

pabandyti Kelios skirtingos HTML lentelės
pabandyti Elementari HTML lentelė
pabandyti Lentelė su fonu
pabandyti Lentelė su skirtingomis border reikšmėmis
pabandyti Lentelės antraščių pavyzdys, tag'as
pabandyti Lentelės antraštė su tag'u
pabandyti Tusčias lentelės langelis
pabandyti Lentelė lentelėje
pabandyti Lentelės cellpadding atributo pavyzdžiai
pabandyti Lentelės cellspacing atributo pavyzdžiai
pabandyti Lygiavimo atributas lentelės langeliuose
pabandyti Lentelės langelių frame ir border atributai