» Lentelės. Lentelių atributai

 TOP meniu » Pradžia » Pomėgiams » IT patarimai » Temos » Konsultuoja IT specialistas Mantas!

• HTML pagrindai »» 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.

• 2020 Gruodžio 1 d. Antradienis.

• Baltosios Metalinės Žiurkės metai (iki 2021-02-12).

• Pasveikink varduvininkus: Aleksandras, Algmina, Baltenė, Baltenis, Baltys, Balys, Butigeidas, Butigeidė, Butigeidis, Eligas, Eligija, Eligijus, Melita, Nata, Natalė, Natalija, Natalis, Natas, Natė,

• Šios dienos istorijos faktai

• Šiandien pasiklausome: Lapalux - Without You (TWOS Remix)

Kaip kovoti su rudeniška depresija?..... visų geriausias vaistas nuo ligų ir depresijos – imuniteto stiprinimas tinkamo poilsio, procedūrų ir vandens SPA pagalba. Tai gali būti poilsis vienam asmeniui, dviems ar visai šeimai. Lietuvoje t...

Aukščiausi pasaulio pastatai..... Tai ar žinote kur pastatytas pats aukščiausias pastatas pasaulyje? Nežinote.. siūlome dirstelti.. aukščiausių pastatų pasaulyje dešimtukas, nors aišku laikas nestovi vietoje ir dangoraižiai dygsta...

Atvirutė - gėlytė..... siūlome pasigaminti atvirutę - gėlytę savo rankomis. Mes darėme naujųjų metų progai, bet belankstant sumąstėme, kad ši atvirutė simbolizuoja gyvybę ir tiktų bet kokiai progai ir gimtadieniui ir ma...

Siūlome paskaityti

 DĖMESIO! Jei radote netikslumų, klaidų, ar žinote tai ko mes nežinome ir norėtute pasidalinti mintimis - brūkštelkit mums :))

Šperų teigiama ir neigiama pusė..... ruošiantis egzaminams, kartais kartu pasidaroma ir taip vadinama "špera". Nežinia čia ko daugiau naudos ar žalos, tačiau turint šperą kišenėje, kartais pasijunti tiesiog visažiniu
Unikalus EBRU menas..... EBRU menas - piešinys kuriamas vandens paviršiuje. Senasis klasikinis darbas apie ebru yra "Tertib-i Risale-i Ebr-i" pamfletas, parašytas turkiškai jau po 1615 metų. Šiandien klasikiniai ebru darb
Kūčių valgių simbolika..... agrindiniai Kūčių valgiai turi ir simbolinę prasmę. Dauguma jų kilę iš biblinių siužetų ir senosios liaudies papročių. Tai, ar žinote ką simbolizuoja kūčių valgiai?