6 . Lentelės, lentelės, lentelės ... Previous/Main/Forward

[<TABLE>] - [<TR>] - [<TH> ir <TD>] - [<CAPTION>]

Dažnai naudojamas, kompaktiškas, malonus akiai ir lengvai suprantamas informacijos pateikimo būdas yra lentelės. Lentelei naudojama komanda yra sudėtinga ir todėl įvairios jos variacijos leidžia gauti pačius įvairiausius rezultatus. Lentelėms naudojama komanda <TABLE>, ją būtinai turi užbaigti pabaigos žymė </TABLE>. Lentelę sudaro eilutės ir ląstelės. Tiek eilutėms, tiek ląstelėms formuoti yra atskiros komandos, eilutėms - komanda <TR> (Table Row) , su privaloma pabaigos žyme </TR>, o ląstelėms - <TD> (Table Data) ir atitinkamai </TD>. Komanda <CAPTION> su pabaigos žyme </CAPTION> yra skirta lentelės pavadinimui, o komanda <TH> (Table Header) su pabaigos žyme </TH> skirta atskirų stulpelių pavadinimams. Taigi, bendra <TABLE> komandos forma yra:

<TABLE>;
<CAPTION> Pavadinimas </CAPTION>
<TR> < !-- Stulpelių pavadinimai -->
<TH> Pirmas stulpelis </TH> <TH> Antras stulpelis </TH>
</TR>
<TR> < !-- Pirma eilutė -->
<TD> Duomenys </TD> <TD> Duomenys </TD>
</TR>
...
</TABLE>

O tokios komandos rezultatas bus:

Pavadinimas
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys


<TABLE> ... </TABLE>

Gal ir nelabai įspūdinga iš pirmo žvilgsnio, bet visos komandos turi papildomus neprivalomus atributus, galinčius neatpažįstamai pakeisti lentelės vaizdą. Komandos <TABLE> atributai:

ALIGN="LEFT|CENTER|RIGHT"
Na jau turbūt aišku, kad šis atributas leidžia "orientuoti" lentelę puslapyje: į kairę, centre, į dešinę.
WIDTH="taškai|procentai"
Nurodo, kokio pločio turi būti lentelė. Galimi du nurodymo būdai: absoliutus ir relatyvus. Pirmu atveju nurodoma, kiek tiksliai taškų turi užimti lentelė (WIDTH=250), antru - kiek procentų puslapio pločio turi užimti lentelė (WIDTH="50%" - pusė puslapio).
BORDER
Nurodo, kokio pločio (kiek taškų) turi būti lentelės ribojantys borteliai. Jei atributas nurodomas be konkrečių skaičių ar nenurodomas, tai lentelės borteliai bus tokio pločio, kokie yra naršyklėje pagal nutylėjimą (dažniausiai 1 taškas), na o jei bus nurodyta BORDER=0, tai bortelio iš viso nebus.
CELLSPACING="taškai"
Kiekviena lentelės ląstelė HTML dokumente gali būti atskirta nuo kitų ląstelių, o šis atributas ir nustato, kokio pločio bus skiriamoji ląstelių erdvė.
CELLPADDING="taškai"
Nurodo koks turi būti atstumas tarp informacijos ląstelės viduje ir ląstelės bortelio.
BGCOLOR="spalvos_kodas"
Šiuo atributu galima pasirinkti ir lentelės fono spalvą.
BACKGROUND="nuoroda į grafinę bylą"
Dar vienas būdas pakeisti lentelės foną - tai nurodyti grafinį vaizdą. Abu paskutiniai atributai analogiški komandos <BODY> atributams.

Štai komanda:
<TABLE CELLSPACING=10 BORDER=4 CELLPADDING=5 ALIGN="RIGHT" WIDTH="70%" BGCOLOR="#C0C0C0">
<TR> < !-- Stulpelių pavadinimai -->
<TH> Pirmas stulpelis </TH> <TH> Antras stulpelis </TH>
</TR>
<TR> < !-- Pirma eilutė -->
<TD> Duomenys </TD> <TD> Duomenys </TD>
</TR>
...
</TABLE>

Ir jos rezultatas:
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys


<TR> ... </TR>

Kita lentelėms skirta komanda yra <TR>. Jos paskirtis - suskirstyti lentelę į eilutes; kiekviena lentelės eilutė HTML dokumente turi prasidėti komanda <TR> ir baigtis jos pabaigos žyme </TR>. Tik tokiu būdu peržiūros programa gali teisingai sudalinti lentelę į ląsteles. Ši komada taipogi turi savo atributus:

ALIGN="LEFT|CENTER|RIGHT"
Nurodo kokia bus horizontalioji šios eilutės ląstelių turinio orientacija - link kairiojo/dešinio krašto ar lątelės centre.
VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"
Nurodo kokia bus vertikalioji šios eilutės ląstelių turinio orientacija - informacija bus viršuje, centre, apačioje ar visų eilutės ląstelių turinys "lygiuos" savo apačia vienu lygiu.
BGCOLOR="spalvos_kodas"
Nurodo kokia bus šios eilutės ląstelių fono spalva.

Štai komanda:
<TABLE ALIGN="RIGHT" BORDER=1>
<TR BGCOLOR="#C0C0C0">
<TH> Pirmas stulpelis </TH> <TH> Antras stulpelis </TH>
</TR>
<TR BGCOLOR="#FFFFFF" ALIGN="Center">
<TD> Duomenys </TD> <TD> Duomenys </TD>
<TR VALIGN="Middle"><TD> Duomenys <BR> Antra eilutė</TD> <TD> Duomenys </TD>
</TR>
...
</TABLE>

Ir jos rezultatas:
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys
Duomenys
Antra eilutė
Duomenys


<TH> ... </TH> ir <TD> ... </TD>

Komandos <TH> ir <TD> yra labai panašios, tiksliau komanda <TH> yra atskiras komandos <TD> atvejis, kai tekstas ląstelėje yra paryškintas (Bold) ir jos turinys pagal nutylėjimą centruotas tiek horizontaliai, tiek vertikaliai. Pirmoji komanda, kaip jau minėta, "apskliaudžia" ląsteles ir tik nuo šios komandos priklauso, kiek bus lentelėje ląstelių. Pagal nutylėjimą, ląstelės turinys šiuo atveju yra lygiuojamas prie kairiojo krašto ir centruojamas vertikaliai. Antroji komanda gali būti naudojama patogumui, nes dažniausiai lentelės turi "antraštes". Taigi, abi šios komandos turi vienodus atributus, praplečiančius jų galimybes:

ALIGN="LEFT|CENTER|RIGHT"
Analogiškas aukšiau minėtiems kitų komandų atributams, bet galioja vienos ląstelės ribose.
VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"
Analogiškas komandos <TR> atributui, bet galioja vienos ląstelės ribose.
WIDTH="taškai|procentai"
Nurodo ląstelės plotį taškais arba procentais, lyginant su visos lentelės pločiu. Dėmesio: Pakeitus vienos ląstelės plotį, keisis atitinkamai viso stulpelio ląstelių plotis.
HEIGHT="taškai|procentai"
Nurodo ląstelės aukštį. Vienos ląstelės auksčio koregavimas lems ir visos eilutės aukštį.
NOWRAP
Tai reikalavimas neskaidyti teksto ląstelėse į dalis taip, kad lentelė tilptų į peržiūros langą. Analogišką rezultatą galima pasiekti visą ląstelės turinį "apskliaudžiant" komanda <NOBR>.
COLSPAN="skaičius"
Šis atributas naudojamas nurodyti, kiek stulpelių turi aprėbti konkreti ląstelė. Paprastai ląstelės plotis yra vienas stulpelis, bet kartais reikalinga, kad ta pati ląstelė būtų kelių stulpelių pročio.
ROWSPAN="skaičius"
Analogiška COLSPAN bet eilučių atžvilgiu: nurodo kiek eilučių aprėbs konkreti ląstelė.
BGCOLOR="spalvos_kodas"
Nurodo, kokia bus šios ląstelės fono spalva.

Štai komanda:
<TABLE BORDER=1 ALIGN="RIGHT" WIDTH="70%">
<TR BGCOLOR="#C0C0C0"><TH COLSPAN=2> Pirmas stulpelis </TH>
<TH ROWSPAN=2> Antras stulpelis </TH></TR>
<TR BGCOLOR="#C0C0C0"><TH BGCOLOR="#808080"> Pirma stulpelio dalis </TH>
<TH> Antra stulpelio dalis</TH></TR>
<TR BGCOLOR="#FFFFFF" ALIGN="Center"><TD>Daug daug daug daug duomenų </TD>
<TD NOWRAP> Daug daug daug daug duomenų </TD>
<TD VALIGN="Bottom">Kiti duomenys</TD></TR>
<TR VALIGN="Middle"> <TD ALIGN="Right" ROWSPAN=2>Duomenys <BR>Antra eilutė</TD>
<TD ROWSPAN=2> Duomenys </TD><TD>Pirma eilutė</TD></TR>
<TR><TD ALIGN="Right">Antra eilutė</TD></TR>
</TABLE>

Ir jos rezultatas:
Pirmas stulpelis Antras stulpelis
Pirma stulpelio dalis Antra stulpelio dalis
Daug daug daug daug duomenų Daug daug daug daug duomenų Kiti duomenys
Duomenys
Antra eilutė
Duomenys Pirma eilutė
Antra eilutė

<CAPTION> ... </CAPTION>

Na ir paskutinė lentelėms skirta komanda, apie kurią dar nebuvo snekėta yra <CAPTION>. Tai komanda, specialiai skirta lentelės pavadinimui. Pavadinimas gali būti lentelės viršuje (TOP) arba apačioje (BOTTOM). Komandos bendra forma yra:

<CAPTION ALIGN="TOP|BOTTOM"> Pavadinimas </CAPTION>

Čia atributas ALIGN turi įprastinę prasmę ir reikšmes.


TABLE
Align
Width
Border
Cellspacing
Cellpadding
Bgcollor
Background
CAPTION TR
Align
Valign
Bgcolor
TD arba TH
Align Align
Valign
Width
Height
Nowarp
Colspan
Rowspan
Bgcolor
Lentelės formavimo schema
Pastaba:Jei pavyzdys aprašyme neatitinka to kas parašyta, tai dar nereiškia, kad jis neteisingas, gal tiesiog Jūsų naršyklė "nesupranta" kai kurių naudojamų komandų ar jų atributų. Patikrinkite tai. Be to, čia paminėtos tik dalis komandų ir atributų, o skirtingos naršyklės dažnai "supranta" skirtingas komandas.

[ Pradžia 1 2 3 4 5 6 7 8 ]