Paprastų lentelių kūrimas

Size: px

Start display at page:

Download "Paprastų lentelių kūrimas"

Jordan Hilary Wade
5 years ago
Views:

1 HTML lentelės

2 Lentelės Informacijos pateikimas HTML-dokumentuose lentelių pagalba yra vienas iš dažniausiai naudojamų. HTML kalboje lentelės yra naudojamos ne tik tradiciškai, kaip duomenų pateikimo metodas, bet ir kaip Web puslapio formatavimo būdas įvairių vizualių komponentų tinklas.

3 Paprastų lentelių kūrimas Lentelių aprašymas turi būti talpinamas HTML dokumento <B O D Y > dalyje. HTML-dokumente gali būti patalpintas bet kuris lentelių skaičius, be to vienas lenteles leidžiama įdėti į kitas. Lentelės pagrindinė gairė <T A B L E > Tarp šių gairių poros yra talpinamas lentelės aprašymas. </T A B L E >

4 Gairės <TABLE> </TABLE> <TD></TD> (Table Data) <TR></TR> (Table row) <TH> </TH> (Table Header) <CAPTION> </CAPTION> Aprašymas (komentarai) Pagrindinė lentelės gairė Duomenų ląstelė Lentelės eilutė Ląstelės antraštė Lentelės antraštė. Pagal nutylėjimą, lentelės antraštė yra išlygiuojama centre virš lentelės.

5 Lentelės pavyzdys

6 Lentelės atributai BORDER= skaičius - lentelės rėmelio plotis. CELLSPACING = skaičius-px - tarpas tarp lentelės langelių dydis. CELLPADDING = skaičius-px - atstumas nuo lentelės grafos turinio iki langelio krašto. WIDTH = skaičius_arba_procentai - langelio plotis. HEIGHT = skaičius_arba_procentai - langelio aukštis. ALIGN = kryptis - nurodomas lygiavimo grafose būdas. VALIGN = kryptis - nurodomas vertikalus lygiavimo lentelėje būdas. BGCOLOR= spalvos_vardas_arba_kodas - lentelės spalva. BORDERCOLOR= spalvos_vardas_arba_kodas - rėmelio spalva. BACKGROUND = adresas - nurodomas lentelės fonui naudojamo piešinio adresas.

7 Lentelės antraštė <CAPTION></CAPTION> Atributas ALIGN=" TOP " ALIGN=" BOTTOM " ALIGN=" LEFT " ALIGN=" CENTER " ALIGN=" RIGHT " VALIGN=" TOP " VALIGN=" BOTTOM " Aprašymas (komentarai) antraštė bus talpinama virš lentelės antraštė bus talpinama žemiau lentelės antraštė bus talpinama kairėje lentelės pusėje antraštė bus talpinama lentelės centre antraštė bus talpinama dešinėje lentelės pusėje antraštė bus talpinama virš lentelės vertikaliai antraštė bus talpinama žemiau lentelės vertikaliai ALIGN atributas gali būti naudojamas kaip horizontaliam, taip ir vertikaliam išlyginimui, bet ne abiem vienu metu.

8 Lentelės antraštė <CAPTION></CAPTION>

9 Lentelės antraštė <CAPTION></CAPTION>

10 Lentelės atributas BORDER Atributas Aprašymas (komentaras) į <TABLE> gairę įrašoma BORDER atributas, kuris BORDER =" skaičius " valdo lentelės rėmelio plotį. Įvairių naršyklių atributo BORDER reikšmės pagal nutylėjimą būna skirtingos <TABLE BORDER> <TABLE BORDER=0> <TABLE>

11 Pavyzdys: <HTML> <HEAD> <TITLE>HTML Lentelė</TITLE> </HEAD> <BODY> <TABLE BORDER=15> <TR> <TD>Ląstelė 1 eilutė 1</TD> <TD>Ląstelė 2 eilutė 1</TD> </TR> <TR> <TD>Ląstelė 1 eilutė 2</TD> <TD>Ląstelė 1 eilutė 2</TD> </TR> </TABLE> </BODY> </HTML> Atributas BORDER

12 Atributas CELLSPACING CELLSPACING = skaičius_px - tarpas tarp lentelės langelių dydis. Pagal nutylėjimą, skaičius_px=2. Kuomet CELLSPACING=0, gretimų ląstelių rėmeliai susilies ir suformuos vientiso lentelės tinklo išvaizdą.

13 Atributas CELLSPACING

14 Atributas CELLPADDING CELLPADDING = skaičius-px - atstumas nuo lentelės grafos turinio iki langelio krašto. Pagal nutylėjimą, skaičius_px=1. Kuomet CELLPADDING=0, kai kurios ląstelės teksto dalys gali liesti jos rėmelį.

15 Atributas CELLPADDING

16 WIDTH ir HEIGHT atributai WIDTH = skaičius_arba_procentai - langelio plotis. HEIGHT = skaičius_arba_procentai - langelio aukštis. Kuomet naršyklė atvaizduoja lenteles, jų plotis ir ilgis yra dinamiškai apskaičiuojami, atsižvelgiant į viso dokumento lentelės, jos atskirų ląstelių, ląstelių teksto atributus ir kitus parametrus.

17 WIDTH ir HEIGHT atributai

18 Atributai ALIGN ir VALIGN ALIGN = kairė(left)_arba_dešinė(right) - nurodomas lygiavimo grafose būdas. VALIGN = viršus(top)_arba_apačia(bootom) - nurodomas vertikalus lygiavimo lentelėje būdas.

19 Duomenų formatavimas lentelėje Kiekviena atskira lentelės ląstelė yra nepriklausoma duomenų formatavimo sritis. Viso teksto formatavimo valdymo taisyklės gali būti taikomos ir kiekvienoje lentelės ląstelėje. Deskriptorių, esančių lentelės ląstelės viduje, veikimo sritis apsiriboja ta ląstele. Ląstelės duomenų horizontaliam ir vertikaliam išlyginimui naudojami deskriptorių <TR>, <TD> ir <TH> atributai ALIGN (reikšmės LEFT, RIGHT, CENTER) ir VALIGN (reikšmės TOP, BOTTOM, MIDDLE, BASELINE).

21 Duomenų formatavimas lentelėje Deskriptorių <TR>, <TD> ir <TH> atributas NOWRAP išjungia automatinį ląstelės teksto skaidymą į eilutes. Deskriptorių <TABLE>, <TR>, <TD> ir <TH> atributas BGCOLOR nusako visos lentelės arba atskirų ląstelių fono spalvą. Deskriptorių <TABLE>, <TD> ir <TH> atributas BACKGROUND nusako lentelės foninį paveiksliuką. Deskriptorių <TD> ir <TH> atributai WIDTH ir HEIGHT nusako ląstelės, kuriai jie yra taikomi, plotį ir aukštį. Keleto greta esančių ląstelių apjungimas į vieną yra realizuojamas deskriptorių <TD> ir <TH> atributų COLSPAN ir ROWSPAN pagalba. Atributo COLSPAN reikšmė nusako, kiek stulpelių užims ląstelė horizontaliai, o ROWSPAN nusako, kiek eilučių užims ląstelė vertikaliai. Tai pačiai ląstelei gali būti taikomi abu atributai.

23 Įdėtosios lentelės Lentelės atskiros ląstelės gali talpinti daugelį elementų, kurie yra leidžiami dokumento BODY dalyje. Lentelės ląstelėje gali būti patalpinta ir visai kita lentelė. Tokios lentelės vadinamos įdėtosiomis. Įdėtųjų lentelių kūrimas nesiskiria nuo paprastos lentelės kūrimo.

24 Įdėtoji lentelė

25 Tuščios ląstelės Pagal HTML kalbos aprašymą, visos naršyklės turi užpildyti lentelės eilutes tuščiomis ląstelėmis, jeigu kurioje nors eilutėje jų kiekis yra mažesnis, negu kitose eilutėse. Bet kurioje lentelės vietoje gali būti ląstelės, neturinčios jokių duomenų. Tuščiose eilutėse tarp deskriptorių poros <TD> ir </TD> nėra jokios informacijos, arba vienas arba keli tarpai, kurie nėra traktuojami kaip duomenis. Ląstelės, turinčios nematomus duomenis, pavyzdžiui, gali talpinti kodą arba <BR>, arba bet kurį tekstą, kurio spalva sutampa su ląstelės fonine spalva. Ląstelės, talpinančios savyje duomenis (nors ir nematomus) yra atvaizduojamos visomis naršyklėmis vienodai. Tuščios ląstelės gali būti parodomos skirtingai.

26 Tuščios ląstelės

27 Lentelės rėmelių spalvos Gairių <TABLE>, <TR>, <TD> ir <TH> atributai BORDERCOLOR, BORDERCOLORLIGHT ir BORDERCOLORDARK nusako lentelės rėmelių spalvas. Atributas BORDERCOLOR nusako visų lentelės rėmelių elementų spalvą. Atributas BORDERCOLORLIGHT nuspalvina kairįjį ir viršutinį visos lentelės ribas, ir dešinįjį ir apatinį kiekvienos ląstelės ribas. Atributas BORDERCOLORDARK nuspalvina priešingus atributui BORDERCOLORLIGHT lentelės rėmelių elementus.

28 Lentelės struktūrizavimas Lentelės stulpelių išlyginimui naudojamos gairės <COLGROUP> ir <COL>. Gairės <COLGROUP> ir <COL> turi būti rašomos iš karto po gairės <TABLE> prieš pirmą gairę <TR>. Gairės <COLGROUP> ir <COL> atributai yra ALIGN (nusakantis horizontalų visų stulpelių ląstelių duomenų išlyginimą ir turintis reikšmes LEFT, RIGHT ir CENTER) ir SPAN (nusakantis gretimų stulpelių, kuriems bus taikomos atributų reikšmės, kiekį). Gairė <COLGROUP> atlieka lentelės stulpelių grupavimo vaidmenį.

29 Lentelės struktūrizavimas Gairės <THEAD>, <TBODY> ir <TFOOT> išskiria lentelės antraščių ląsteles, pagrindinę lentelės dalį ir lentelės suvestines ląsteles. Gairės <THEAD>, <TBODY> ir <TFOOT> gali būti rašomos tik gairių poros <TABLE> ir </TABLE> viduje. Gairės <THEAD> ir <TBODY> aprašo viršutinį ir apatinį lentelės kolontitulus ir gali būti sutinkami lentelėje ne daugiau kaip vieną kartą. Gairė <TBODY> gali būti sutinkama kelis kartus ir yra skirta loginiam duomenų grupavimui, kaip gairė <COLGROUP> stulpelių atveju. Lentelės rėmelių piešimas valdomas gairės <TABLE> atributo FRAME reikšmėmis. Lentelės tinklo piešimas valdomas gairės <TABLE> atributo RULES reikšmėmis.

30 Atributo FRAME reikšmės BOX BORDER ABOVE BELOW HSIDES VSIDES LHS VOID RHS Rėmelis piešiamas iš visų keturių pusių Rėmelis piešiamas tik iš viršaus Rėmelis piešiamas tik iš apačios Piešiamos tik apatinė ir viršutinė ribos Piešiamos tik kairinė ir dešininė ribos Rėmelis piešiamas tik iš kairės Lentelė be išorinių rėmelių Rėmelis piešiamas tik iš dešinės

31 Atributo RULES reikšmės ALL GROUPS COLS ROWS NONE Piešiamos viso vidinės linijos Piešiamos tik linijos, skiriančios grupes Piešiamos tik linijos, skiriančios stulpelius Piešiamos tik linijos, skiriančios eilutes Vidinės NONE linijos nėra piešiamos

INFS 2150 / 7150 Intro to Web Development / HTML Programming

XP Objectives INFS 2150 / 7150 Intro to Web Development / HTML Programming Designing a Web Page with Tables Create a text table Create a table using the , , and tags Create table headers