Štai kaip atrodo paprasčiausia HTML lentelė:

Pažymėkime viską skaičiais:

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

1
2
3
4
5
6
7
8
9
10
11
12

<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>:

1
2
3
4
5
6
7
8
9
10

<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:

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.

1
2
3
4
5
6
7
8
9
10
11
12

<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> 

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