Lentelės. Lentelių atributai

Pomėgiams » IT patarimai » Temos


Dažnai internetiniuose puslapiuose, naudojamos įvairios lentelės, nes, tai kompaktiškas, malonus akiai ir lengvai suprantamas informacijos pateikimo būdas, leidžiantis išdėstyti tekstus ir iliustracijas eilutėse bei stulpeliuose. Lenteles tikslinga naudoti, kai:

... turi būti pateikiama lentelinė informacija, tai vardų sarašai, numeracija ir t.t.

... norite glaudžiau susieti tekstą ir piešinėlius, ir jums nepakanka <IMG align=left> arba <IMG align=right>

... norite įrėminti tekstą ar iliustraciją.

... norite tekstą išdėstyt stulpeliais.



Lentelė prasideda komanda <TABLE>...</TABLE> Rėmelis gaunamas įterpus BORDER ir nurodžius linijos stori, jei reiksme 0 – lentelė yra be rėmelio, ir realiai pati lentelė nematoma.

Po žymės <TABLE> seka žymė <TR>...</TR>. Ji skirta lentelės eilutėms, kuriose gali būti keletas langelių, skirtu informacijai, aprašymui. Kiekvienam informacijos langeliui sudaryti naudojama žymė <TD>...</TD>. Į langelius galite patalpinti betkurią kitą žymę su atributais (komandomis), tačiau ji galios tik tam pačiam langelyje, ir kitame langelyje reiks nustatymus pakartoti.

PVZ.: Paprasta lentelė su 2x2 langeliais.

<TABLE border="1">

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

</TABLE>

PIRMASANTRAS
TrečiasKetvirtas


Tikslesnių lentelės išmatavimų nustatymui įterpiama į <TABLE> komandas WIDTH ir HEIGHT. O norint nustatyti atskirų langelių dydžius, minėtos komandos į terpiamos Į <TD>. Aukščio ir pločio reikšmės rašomos arba pixeliais arba % nuo bendros lentelės dydžio.

<table BORDER="1" WIDTH="90%" >

<tr>

<td WIDTH="20%">SIAURAS</td>

<td WIDTH="80%">PLATUS</td>

</tr>

</table>

SIAURASPLATUS


Pagal nutylėjimą, visa informacija langeliuose, bus išlygiuota pagal kairįjį kraštą ir centruojama vertikaliai pagal centrą. Jei reikia kitaip, langelių turinį horizontaliai ir vertikaliai žymėse <TD> lygiuojama komandomis ALIGN ir VALIGN. Įterpus į <tr> bus lygiuojama visa lentelės eilutė.

ALIGN - left/right/center.

VALIGN - top/bottom/center/middle/baseline.

<table BORDER COLS=1 WIDTH="90%" >

<tr ALIGN=RIGHT VALIGN=BOTTOM>

<td WIDTH="20%">1</td>

<td WIDTH="80%">2</td>

</tr>

<tr>

<td ALIGN=CENTER VALIGN=BOTTOM>3</td>

<td ALIGN=LEFT VALIGN=TOP>4</td>

</tr>

</table>

12
34


Dar kelios komandos, galinčios pakeisti bendrą lentelės vaizdą.

CELLSPACING="taškai" - Kiekvienas lentelės langelis HTML dokumente gali būti atskirtas nuo kitų langelių... būtent šis atributas ir nustato, kokio pločio bus skiriamoji langelių erdvė.
» S k a i t y t i  t o l i a u
<TABLE border="1" CELLSPACING="5">

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

</TABLE>

PIRMASANTRAS
TrečiasKetvirtas


CELLPADDING="taškai" - Nurodo koks turi būti atstumas tarp informacijos langelio viduje ir langelio bortelio.

<TABLE border="1" CELLPADDING="10">

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

<TR>

<TD>PIRMAS</TD>

<TD>ANTRAS</TD>

</TR>

</TABLE>

PIRMASANTRAS
TrečiasKetvirtas


Lentelės komanda <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ę į langelius. Ši komada taip pat turi savo atributus:

ALIGN="LEFT|CENTER|RIGHT" - Nurodo kokia bus horizontalioji šios eilutės langelių turinio orientacija - link kairiojo/dešinio krašto ar langelio centre.

VALIGN="TOP|MIDDLE|BOTTOM|BASELINE" - Nurodo kokia bus vertikalioji šios eilutės langelių turinio orientacija - informacija bus viršuje, centre, apačioje ar visų eilutės langelių turinys "lygiuos" savo apačia vienu lygiu.

BGCOLOR="spalvos kodas" - Nurodo kokia bus šios eilutės langelių fono spalva.

Lentelės stulpelių pavadinimams yra skirta atskira komanda <TH>...</TH>. Šiaip komandos <TH> ir <TD> yra labai panašios, tiksliau komanda <TH> yra atskiras komandos <TD> atvejis, kai tekstas langelyje yra paryškintas (Bold) ir jos turinys pagal nutylėjimą centruotas tiek horizontaliai, tiek vertikaliai.

<TABLE border="1" WIDTH="90%">

<TR BGCOLOR="#C0C0C0">

<TH> Pirmas stulpelis </TH>

<TH> Antras stulpelis </TH>

</TR>

<TR BGCOLOR="#999999" ALIGN="Center">

<TD> Duomenys </TD>

<TD> Duomenys </TD></TR>

<TR VALIGN="Middle">

<TD> Duomenys <BR> Duomenys2</TD>

<TD> Duomenys </TD>

</TR>

<TR BGCOLOR="#999999" ALIGN="Center">

<TD> Duomenys </TD>

<TD> Duomenys </TD>

</TR>

<TR VALIGN="Middle">

<TD> Duomenys <BR> Duomenys2</TD>

<TD> Duomenys </TD>

</TR>

</TABLE>

Pirmas stulpelis Antras stulpelis
Duomenys Duomenys
Duomenys Duomenys2 Duomenys
Duomenys Duomenys
Duomenys Duomenys2 Duomenys


Paminėsiu dar kelis lentelių atributus:

NOWRAP - Tai reikalavimas neskaidyti teksto ląstelėse į dalis taip, kad lentelė tilptų į peržiūros langą. Analogiškas rezultatui, apskliaudžiant komanda <NOBR>.

COLSPAN="skaičius" - Šis atributas naudojamas nurodyti, kiek stulpelių turi aprėbti konkretus langelis. Paprastai llangelio plotis yra vienas stulpelis, bet kartais reikalinga, kad tas pats langelis būtų kelių stulpelių pločio.

ROWSPAN="skaičius" - Analogiška COLSPAN bet eilučių atžvilgiu: nurodo kiek eilučių aprėbs konkretus langelis.

<TABLE BORDER=1 WIDTH="90%">

<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="#999999" ALIGN="Center">

<TD>Duomenys</TD>

<TD NOWRAP> Duomenys</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>

Pirmas stulpelis Antras stulpelis
Pirma stulpelio dalis Antra stulpelio dalis
Duomenys Duomenys Kiti duomenys
Duomenys Antra eilutė Duomenys Pirma eilutė
Antra eilutė


PASTABOS:

Jei perskaičius, neaišku, pabandykit realiai ir viskas bus aišku.

Taip pat, vertėtų prisiminti, kad skirtingos naršyklės dažnai "supranta" skirtingai komandas. Visa info pritaikyta Internet Explorer naršyklei.



Patiko [0]  Nepatiko [0]


Jūsų nuomonė padeda mums tobulėti
Įrašoma tik pirmą Jūsų nuomonė.
Jei turite ką plačiau parašyti.. administratoriaus el.paštas llaimaa[et.]gmail.com



Siūlome pasidairyti..

E-atvirukai Rugsėjo 1-osios proga

E-atvirukai Rugsėjo 1-osios proga... Jau beržai ir kaštonai liepsnoja, neša vasarą gervės ant sparnų vis tolyn ir tolyn, paklausykite! Kažkas skambina, šaukia,- tai juk rugsėjo pirmosios varpai.....

Draugams » E-ATVIRUKAI

Vandens pramogų naujovės: išbandysite ir pamilsite

Vandens pramogų naujovės: išbandysite ir pamilsite.. turbūt niekas nepaneigs, kad geriausias laisvalaikio praleidimo būdas šią vasarą – vandens pramogos. Tačiau pabodus nardyti Lietuvos ežeruose ar šokinėti į vandenį nuo tramplino, vandens pramogų..

Nuotaikai » IDĖJOS laisvalaikiui

Faktai apie mikrobangų krosneles

Faktai apie mikrobangų krosneles... Ar žinote, kad mikrobangų krosnelės veikia efektyviausiai kai sušyla. Jei prieš šildydami maistą paliktume mikrobangų krosnelę veikti tuščią 3 sekundėms, tai sumažintų bendras energijos sąnaudas i..

Įdomybės » FAKTAI

Tinginio taisyklių TOP dešimtukas

Tinginio taisyklių TOP dešimtukas... daryk poryt tai, ką gali padaryti šiandien, turėsi dvi laisvas dienas ..

Įdomybės » TOPAI

Pagrindiniai aspektai renkantis vyriško šaliko raštą ir spalvą

Pagrindiniai aspektai renkantis vyriško šaliko raštą ir spalvą... Šalikai, gali būti vienas iš pagrindinių akcentų, bet kokioje aprangoje. Renkantis vyriško šaliko modelį, reikia atsižvelgti į keletą veiksnių. Pirma, svarbu atsižvelgti į progą ir aprangos stilių..

Aktualijos » VERTA žinoti

Į ką atkreipti dėmesį renkantis auskarus su deimantais?

Į ką atkreipti dėmesį renkantis auskarus su deimantais?... Renkantis auskarus su deimantais, svarbu atkreipti dėmesį į kelis esminius kriterijus, kurie užtikrins, kad Jūsų pasirinkimas būtų ne tik gražus, bet ir vertingas ilgalaikėje perspektyvoje. Deiman..

Aktualijos » VERTA žinoti


GYVENKIME • sveikaispalvotaipatogiaiskaniaidraugiškaistipriaietiškailinksmaipokštaujantgrybaujantkeliaujant • su meile ir Gyvenimo būdo žurnalu!