#jsleiras, #jsleiras3{width: 800px; height: 180px; } #jsleiras2 {width: 800px; height: 450px;} #jsleiras4, #jsleiras5 {width: 800px; height: 300px;} #jsleiras, #jsleiras3, #jsleiras2, #jsleiras4, #jsleiras5 { margin-right: auto; margin-left: auto; background-color: lime; padding: 5px; }
A most bemutatásra kerülő táblázatokat, az XHTML - lapon írjuk meg.
CSS, azaz stíluslapot, most nem készítünk.
Stíluslappal történő formázásukat: A legegyszerűbb táblázatok, stíluslappal formázva témakörben láthatjuk.
A táblázat szélességét, cellák kereteinek vonalvastagságát, cella belső margóját, közvetlen a kezdő < table> címkében adjuk meg.
Nem kell hozzá külön stíluslap.
Megjegyzés: Ez lehetne, egy navigációs gomb, vagy fiók. Ha navigációs meghatározást is készítünk hozzá.
Valóságbeli megjelenése a monitoron.
Áruházak |
---|
A programleírást megnézem. View.
Valóságbeli megjelenése a monitoron.
Áruházak | Kis ABC | Nagy ABC | ||
---|---|---|---|---|
Típus | Érték | Típus | Érték | |
Fazék | Zománcozott | 249.Ft | Alumínium | 259.Ft |
Tányér | Műanyag | 290.Ft | Porcelán | 399.Ft |
Cipő | Bőr | 799.Ft | Vászon | 699.Ft |
Kanál | Fa | 399.Ft | Fém | 420.Ft |
Zokni | Cérna | 569.Ft | Műszálas | 569.Ft |
A programleírást megnézem. View.
Valóságbeli megjelenése a monitoron.
Áruházak | Kis ABC | Nagy ABC |
---|
A programleírást megnézem. View.
Valóságbeli megjelenése a monitoron.
Áruházak |
---|
Kis ABC |
---|
Kis ABC |
---|
Három különálló, egy cellával rendelkező táblázatot láthatunk.
Első:
Áruházak néven szerepel, szélessége width = 30% - ra van beállítva. Ezért 10% - al szélesebb, mint a másik kettő. A keret vastagsága border = 2 , ezért vékonyabb a kerete, mint a másik kettőé.
Második és harmadik:
KIS ÁBC néven szerepel, szélességük width = 20% a keret vastagsága border = 6
A második és harmadik között is van eltérés. A belső margók, más értéken szerepelnek.
A másodiknál cellpadding = 3, a harmadiknál cellpadding = 10
Ebből adódóan, a harmadik táblázat magassága nagyobb, mint a második táblázat magassága.
A programleírást megnézem. View.
A weblapunkat nézők, csak annyit látnak, mintha egy nagy kereten belül, három fiók helyezkedne el.
Valóságbeli megjelenése a monitoron.
|
---|
A programleírásban, ha jól megfigyeljük, a kezdő table és a záró table címke ( kékkel jelőlve.) közrefogja a másik három táblázatot. Ez alkotja, a három táblázat körüli keretformát.
A kezdő táble címkének, a monitoron megjelenő szélessége 30% - ra van beállítva, ez azt jelenti, hogy a monitoron megjeleníthető kép szélességéhez viszonyítva, csak 30% széles lesz.
Most aztán mondhatnánk, hogy mi van azzal a táblázattal mely 100% - ra van beállítva, és mégsem tölti ki az egész monitort.
Oka: A további három táblázatot az első, azaz a kezdő táble címke fogja közre. Ebből adódóan, a kezdő table szélessége, a további beágyazott táblázatnak 100% - ot jelent, és nem a monitor szélességét veszik figyelembe.
Ezért, a kezdő és záró táble között elhelyezkedő táblázatoknak, más és más szélességet adhatunk meg, és mindig a kezdő és záró tábla címke között, azaz egy kereten belül helyezkednek el, de az általunk megadott, szélességi paraméterekkel.
A programleírást megnézem. View.