A lecke célja: Ismerkedés a táblázat tulajdonságaival és a CSS táblaelrendezési elvekkel

Nézzük a CSS tábla alapvető tulajdonságait

határ

Egy ingatlan egynek tekintendő, és egyszerre több ingatlant tartalmaz:

• HATÁR-STÍLUS
• HATÁRSZÉLESSÉG
• HATÁR-SZÍN

Van egy kollektív szabály is:

table.collapse (border-collapse: collapse;) table.separate (border-collapse: külön;)

Eredmény:

szélesség és magasság
(asztal magassága és szélessége)

Értékek:

Példa:

szöveg igazítás
(vízszintes igazítás)

Értékek:

• középen (középen)
• balra (balra igazítva)
• jobbra (jobbra igazítva)
• igazolni (szélesség)

függőleges-igazítás
(függőleges igazítás)

Értékek:

• kiindulási (kiindulási)
• al (alindexként)
• szuper (felső indexként)
• felül (felül)
• középső (középső)
• alsó (alsó szél)
• % (a sorköz magasságától)

Példa:

párnázás
(asztal párnázás)

háttérszín (háttér)
szín (szöveg színe)

CSS tábla elrendezés

A táblázatok tulajdonságainak nagy száma és a kialakításuk változatossága miatt a táblázatok régóta a weblapok elrendezésének szabványai. Ha láthatatlanná teszi a tábla szegélyeit, akkor az egyes celláit az oldal külön blokkjaiként használhatja: fejléc, menü, lábléc stb.

Ez azonban nem teljesen helytálló, mivel minden címkének megvan a maga célja, és a táblázatoknak nem kellett volna az oldal elrendezését szolgálniuk. Az alternatíva hiánya azonban arra késztette a tervezőket, hogy ezt az elrendezési módszert alkalmazzák.

Most van egy másik módszer is - rétegek használata, amelyek fokozatosan felváltották a táblázatokat az ilyen típusú weblapokkal való munkavégzés során. Néhány tervező azonban manapság is sikeresen használja az asztalok elrendezését.

Két oszlopos táblázat elrendezés

Az egyik leggyakoribb elrendezési módszer két oszlop, azaz az oldal két részre van osztva.

Általában a bal oldal a menü és a további elemek, a jobb oldal pedig a fő a fő tartalomhoz.

Ebben az esetben a bal oldal szélessége egy bizonyos értékre van állítva, azaz kemény, és a jobb oldal elfoglalja az oldal többi részét.

Ebben az esetben a teljes tábla (táblázatcímke) teljes szélességét százalékban kell megadni a szélesség tulajdonságon keresztül (100%), az első cella (td címke) esetén pedig a szélességet (szintén a szélességtulajdonságot) képpontokban vagy százalék.

Példa:állítsa az oldal fő keretét két oszlopba: az első - rögzített méretű, a második - a böngésző többi részéhez. Végezze el a feladatot CSS stílusok használatával ()

Teljesítmény:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "helyes"> 2</ td> </ tr> </ táblázat> ...

1

2

...

Eredmény:

Most próbáljuk vizuálisan elválasztani a táblázat két oszlopát egymástól.

Példa:állítson be különböző cellák hátterét (két oszlop elválasztásához), és állítsa be az oszlopok közötti távolságot (elválasztó)

Teljesítmény:
Adjunk hozzá új stílustulajdonságokat:

/ * a bal oldali cellához * / td # left (szélesség: 200 képpont; háttér: #ccc; szegély: 1 képpont fekete; / * ideiglenesen határokat jelöl * /) / * a jobb oldali cellához * / td # jobbra (háttér: # fc3; szegély: 1 képpont egyszínű fekete; / * átmenetileg a szegélyeket jelöli * /) / * az elválasztónál * / #razdel (szélesség: 10 képpont; / * Az oszlopok közötti távolság * /)

Együtt:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "razdel"> <td id = "helyes"> 2</ td> </ tr> </ táblázat>

1

2

Új cella került az elválasztóhoz.
Eredmény:

Az oszlopok közötti elválasztót kevésbé szembetűnővé is teheti. Ehhez szegélystílusokat fogunk használni.

Példa: készítsen elválasztót a táblázat oszlopai között a szomszédos cellák szaggatott szegélyével

Teljesítmény:
Adjunk hozzá új szegélytulajdonságokat a cellákhoz:

/ * bal cella esetén * / td # left (szélesség: 200 képpont; háttér: #ccc; / * A bal oszlop háttérszíne * / / * új * / szegély-jobb: 1 képpont szaggatott # 000; / * Jobb szaggatott szegély opciók * / )

Együtt:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "helyes"> 2</ td> </ tr> </ táblázat>

1

2

Eredmény:

Három oszlopos táblázat elrendezés

Van egy rögzített vagy "folyékony" elrendezés fogalma.

Fix elrendezésű CSS

• Használata rögzített elrendezés a teljes táblázat szélessége pixelben van megadva, majd a monitor és a böngészőablak felbontásától függetlenül a táblázat mindig azonos szélességű lesz.
• Ebben az esetben a többi oszlop szélességét is rögzíteni kell.
• Lehetőség van arra, hogy ne határozza meg egy cella szélességét, akkor az automatikusan kiszámításra kerül a többi cella és a teljes táblázat mérete alapján.

Példa: hozzon létre három oszlopos oldalsablont. Használjon rögzített táblázat elrendezést:

• bal oldali oszlop - 150 képpont;
• középső oszlop - 400 képpont;

Teljesítmény:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "központi"> 2</ td> <td id = "helyes"> 3</ td> </ tr> </ táblázat>

1

2

3

Eredmény:

Gumi makett

• Asztal szélessége a "gumi" kialakítás használatakor állítsa be a böngészőablak szélességének% -ában... Hogy. amikor a böngészőablak megváltozik, a táblázat mérete is megváltozik.
• Az összes cella szélessége telepíthető százalékban.
• A második lehetőség az, hogy mikor egyes cellák szélessége alapítva százalékban, a néhány pixelben.

Fontos: Az összes oszlop szélességének összegének 100%-nak kell lennie, függetlenül a táblázat szélességétől.

Példa:

• bal oldali oszlop - 20%;
• középső oszlop - 40%;
• jobb oszlop - 40%;

Állítsa be az oszlopok hátterét, és vizuálisan válassza el az oszlopokat szegéllyel.

Teljesítmény:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "központi"> 2</ td> <td id = "helyes"> 3</ td> </ tr> </ táblázat>

1

2

3

Eredmény:

Tekintsük a második lehetőséget, amikor a középső oszlop szélességét a böngésző automatikusan kiválasztja; példa erre a kép:

Példa: hozzon létre három oszlopos oldalsablont. Használjon folyékony táblázat elrendezést:

• bal oldali oszlop - 150 képpont;
• középső oszlop - 40%;
• jobb oszlop - 200 képpont;

Állítsa be az oszlopok hátterét, és vizuálisan válassza el az oszlopokat szegéllyel.

Teljesítmény:

</ head> <test> <table id = "maket" cellpacing = "0"> <tr> <td id = "left"> 1</ td> <td id = "központi"> 2</ td> <td id = "helyes"> 3</ td> </ tr> </ táblázat>

1

2

3

Eredmény:
Az eredmény nagyjából ugyanaz lesz, csak a "nyújtás" következik be a központi oszlop miatt.

Beágyazott táblázat használata folyékony elrendezésben

Ha két oszlop szélességét százalékban, a harmadikat pedig képpontokban állítja be, akkor egy táblával nem fog tudni boldogulni. Tehát, ha a teljes táblázat szélessége 100 százalék, az első oszlop 200 képpont, a többi oszlop pedig 20 százalék, akkor egy egyszerű számítás azt mutatja, hogy az első oszlop mérete 60 százalék. Ebben az esetben a böngésző nem fogadja el a megadott értéket pixelben, és a méret százalékban van megadva.

• Az eredeti táblázat két cellával készül. A táblázat szélessége százalékban van megadva.
• A bal sejthez(első oszlop) szélessége be van állítva pixelben.
• Megfelelő cellaszélesség(alap más hangszórókhoz) nem meghatározott... E cellába egy második táblázat is beillesztésre kerül, amely szintén két cellából áll.
• A beágyazott táblázat celláinak szélességét százalékban állítja be..
• A belső asztal szélességét 100 százalékra kell állítani hogy ez az asztal elfoglalja a szabad asztal összes szabad helyét.
• A középső és a jobb oldali oszlop szélessége a cella szélességéhez, nem pedig a külső táblázat egészéhez viszonyítva.

Példa: hozzon létre három oszlopos oldalsablont. Folyadékelrendezés használata a beágyazott táblával:

• bal oldali oszlop - 150 képpont;
• középső oszlop - 60%;
• jobb oszlop - 40%;

Állítsa be az oszlopok hátterét.

Teljesítmény:

1 2 3 A címke attribútumok cellpadding és cellpacing szükségesek, hogy ne legyen "rés" a táblázatok között. Eredmény: Megadja a táblázat celláinak határai közötti távolságot. A border-spacing attribútum nem működik, ha a táblában a border-collapse beállítás összecsukásra van állítva. Szintaxis border-spacing: érték [érték] Érvek Egy érték határozza meg a cellahatárok közötti függőleges és vízszintes távolságot. Ha két érv van, az első határozza meg a vízszintes távolságot, a második pedig a függőleges távolságot. 1 2 3 4 Ennek a példának az eredményét az ábra mutatja. 1. Rizs. 1. A szegélytávolság paraméter alkalmazása jegyzet Ha a címke a cellák közötti paraméter hozzáadásra kerül, majd a szegélytávolság stílus attribútum használatakor nem veszi figyelembe, és a cellák közötti értéket figyelmen kívül hagyja. E szabály alól kivétel az Internet Explorer, amely egyáltalán nem érti a szegélytávolság tulajdonságot. Táblázatok border-collapse beállítja, hogyan jelenjenek meg a szegélyek a táblázat cellái körül. Ez a paraméter akkor játszik szerepet, ha a cellákhoz keret van beállítva, akkor a cellák találkozásánál dupla vastagságú vonal lesz. Az összecsukási érték hozzáadása arra kényszeríti a böngészőt, hogy elemezze az ilyen helyeket a táblázatban, és távolítsa el a dupla sorokat. táblázat-elrendezés határozza meg, hogy a böngésző hogyan számítsa ki a táblázat celláinak magasságát és szélességét a tartalma alapján. border-spacing beállítja a táblázat celláinak határai közötti távolságot. A border-spacing attribútum nem működik, ha a táblában a border-collapse beállítás összecsukásra van állítva. A CSS lehetővé teszi nemcsak a tábla szegélystílusának beállítását, hanem az egyes cellák szegélyeinek stílusát is. Mivel minden cellának saját határai vannak, a szomszédos cellák közötti határ megduplázódik. De lehetséges a szomszédos cellák határainak egyesítése. Erre van egy határ-összeomló tulajdonság. Ez az értékeket veszi fel: border -collapse: külön - minden cella saját szegéllyel rendelkezik (alapértelmezett) border -collapse: összeomlás - az általános határ border -collapse: örököl - az értéket a szülő elemtől vesszük Például hozzunk létre egy táblázatot, és állítsunk be egy keretet az összes táblázat celláihoz, amelyek az oldalon lesznek. Először is, ne változtassunk semmit, hogy lássuk, hogyan fog kinézni a táblázat: Stílus: 1 2 3 4 5 6