Účel lekcie: Oboznámenie sa s vlastnosťami tabuľky a zásadami rozloženia tabuľky CSS
Pozrime sa na základné vlastnosti tabuľky CSS
hranica
Nehnuteľnosť sa považuje za jednu a zahŕňa niekoľko nehnuteľností súčasne:
- HRANIČNÝ ŠTÝL
- ŠÍRKA HRANICE
- HRANIČNÁ FARBA
Existuje tiež kolektívne pravidlo:
table.collapse (border-collapse: collapse;) table.separate (border-collapse: separate;)
Výsledok:
šírka a výška
(výška a šírka stola)
Hodnoty:
Príklad:
zarovnanie textu
(horizontálne zarovnanie)
Hodnoty:
- v strede (v strede)
- vľavo (zarovnané doľava)
- vpravo (zarovnané vpravo)
- zarovnať (šírka)
vertikálne zarovnanie
(zvislé zarovnanie)
Hodnoty:
- základná línia (východisková hodnota)
- sub (ako subindex)
- super (ako horný index)
- hore (hore)
- stred (stred)
- dole (dole)
- % (z výšky riadkovania)
Príklad:
vypchávka
(polstrovanie stola)
farba pozadia (pozadie)
farba (farba textu)
Rozloženie tabuľky CSS
Vzhľadom na veľký počet vlastností tabuliek a variácií ich dizajnu sú tabuľky už dlho štandardom pre rozloženie webovej stránky. Ak urobíte okraje tabuľky neviditeľnými, môžete použiť jeho jednotlivé bunky ako samostatné bloky stránky: hlavička, ponuka, päta atď.
To však nie je úplne správne, pretože každá značka má svoj vlastný účel a tabuľky nemali slúžiť na rozloženie stránky. Neexistencia alternatívy však prinútila dizajnérov použiť tento typ metódy rozloženia.
Teraz je tu ďalší spôsob - pomocou vrstiev, ktoré pri tomto spôsobe práce s webovou stránkou postupne nahradili tabuľky. Avšak aj v dnešnej dobe niektorí návrhári úspešne používajú rozloženie tabuľky.
Rozloženie tabuľky v dvoch stĺpcoch
Jednou z najbežnejších spôsobov rozloženia sú dva stĺpce, t.j. stránka je rozdelená na dve časti.
Príklad: nastavte hlavný rámec stránky do dvoch stĺpcov: prvý - s pevnou veľkosťou, druhý - pre zvyšok oblasti prehliadača. Vykonajte úlohu pomocou štýlov CSS ()
Výkon:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "vpravo"> 2</ td> </ tr> </ stôl> ... |
| 1 | 2 |
Výsledok:
Príklad: nastaviť iné pozadie buniek (na oddelenie dvoch stĺpcov od seba) a nastaviť vzdialenosť medzi stĺpcami (oddeľovač)
Výkon:
Pridajme nové vlastnosti štýlu:
/ * pre ľavú bunku * / td # vľavo (šírka: 200 pixelov; pozadie: # ccc; orámovanie: 1 px plná čierna; / * dočasne označí okraje * /) / * pre pravú bunku * / td # vpravo (pozadie: # fc3; orámovanie: 1px plná čierna; / * dočasne označuje okraje * /) / * pre oddeľovač * / #razdel (šírka: 10px; / * Rozstup medzi stĺpcami * /)
Spolu:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "razdel"> <td id = "vpravo"> 2</ td> </ tr> </ stôl> |
| 1 | 2 |
Do oddeľovača bola pridaná nová bunka.
Výsledok:
Príklad: urobte oddeľovač medzi stĺpcami tabuľky pomocou prerušovaného okraja susedných buniek
Výkon:
Pridajme nové vlastnosti ohraničenia pre bunky:
/ * pre ľavú bunku * / td # vľavo (šírka: 200 pixelov; pozadie: # ccc; / * farba pozadia ľavého stĺpca * / / * nová * / hranica doprava: 1 pixel prerušovaná # 000; / * možnosti prerušovaného okraja vpravo * / )
Spolu:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "vpravo"> 2</ td> </ tr> </ stôl> |
| 1 | 2 |
Výsledok:
Rozloženie tabuľky v troch stĺpcoch
Existuje koncept pevného alebo „tekutého“ rozloženia.
Opravené rozloženie CSS
- Použitím pevné rozloženie šírka celej tabuľky je stanovená v pixeloch, a potom, bez ohľadu na rozlíšenie okna monitora a prehliadača, bude mať tabuľka vždy rovnakú šírku.
- V tomto prípade šírka ostatných stĺpcov by mala byť tiež stanovená.
- Nie je možné špecifikovať šírku jednej bunky, potom sa bude automaticky počítať na základe rozmerov zostávajúcich buniek a celej tabuľky.
Príklad: vytvorte šablónu stránky s tromi stĺpcami. Použiť pevné rozloženie tabuľky:
- ľavý stĺpec - 150 pixelov;
- stredný stĺpec - 400 pixelov;
Výkon:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "centrálny"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ stôl> |
| 1 | 2 | 3 |
Výsledok:
Gumová maketa
- Šírka stola pri použití „gumového“ dizajnu nastavené v% šírky okna prehliadača... To. keď sa zmení okno prehliadača, zmení sa aj veľkosť tabuľky.
- Šírka všetkých buniek je možné nainštalovať v percentách.
- Druhá možnosť je kedy šírka niektorých buniek je založená v percentách, a niektoré v pixeloch.
Dôležité: Súčet šírok všetkých stĺpcov by mal byť 100%bez ohľadu na šírku tabuľky.
Príklad:
- ľavý stĺpec - 20%;
- stredný stĺpec - 40%;
- pravý stĺpec - 40%;
Nastavte pozadie stĺpcov a stĺpce vizuálne oddeľte orámovaním.
Výkon:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "centrálny"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ stôl> |
| 1 | 2 | 3 |
Výsledok:
Zvážte druhú možnosť, keď prehliadač automaticky vyberie šírku stredného stĺpca; príkladom je obrázok: 
Príklad: vytvorte šablónu stránky s tromi stĺpcami. Použite rozloženie tabuľky:
- ľavý stĺpec - 150 pixelov;
- stredný stĺpec - 40%;
- pravý stĺpec - 200 pixelov;
Nastavte pozadie stĺpcov a stĺpce vizuálne oddeľte orámovaním.
Výkon:
| </ hlava> <telo> <table id = "maket" cellspacing = "0"> <tr> <td id = "vľavo"> 1</ td> <td id = "centrálny"> 2</ td> <td id = "vpravo"> 3</ td> </ tr> </ stôl> |
| 1 | 2 | 3 |
Výsledok:
Výsledok bude približne rovnaký, iba k „natiahnutiu“ dôjde kvôli stredovému stĺpcu.
Použitie vnorenej tabuľky v tekutom rozložení
Ak je šírka dvoch stĺpcov nastavená v percentách a tretí v pixeloch, s jednou tabuľkou sa nezaobídete. Ak je teda šírka celej tabuľky 100 percent, prvý stĺpec je 200 pixelov a zvyšné stĺpce sú 20 percent, potom jednoduchý výpočet ukazuje, že veľkosť prvého stĺpca je 60 percent. V takom prípade prehliadač neakceptuje zadanú hodnotu v pixeloch a veľkosť bude nastavená v percentách. 
- Pôvodná tabuľka je vytvorená s dvoma bunkami. Šírka stola je stanovená v percentách.
- Pre ľavú bunku(prvý stĺpec) je nastavená šírka v pixeloch.
- Pravá šírka bunky(základ pre ostatné reproduktory) nešpecifikované... Do tejto bunky je vložená druhá tabuľka, ktorá tiež pozostáva z dvoch buniek.
- Šírka buniek vnorenej tabuľky je stanovená v percentách..
- Vnútorná šírka stola musí byť nastavená na 100 percent takže táto tabuľka zaberá všetok voľný priestor vo vonkajšej tabuľke.
- Šírky stredného a pravého stĺpca sú relatívne k šírke bunky, nie k vonkajšej tabuľke ako celku.
Príklad: vytvorte šablónu stránky s tromi stĺpcami. Použiť tekuté rozloženie s vnorenou tabuľkou:
- ľavý stĺpec - 150 pixelov;
- stredný stĺpec - 60%;
- pravý stĺpec - 40%;
Nastavte pozadie stĺpcov.
Výkon:
Atribúty značky cellpadding a cellspacing sú tu povinné, aby medzi tabuľkami nebola žiadna „medzera“. Určuje vzdialenosť medzi okrajmi buniek v tabuľke. Atribút border-spacing nefunguje, ak je v tabuľke nastavené zbalenie orámovania. Syntaxmedzery medzi okrajmi: hodnota [hodnota] ArgumentyJedna hodnota nastavuje vertikálnu aj horizontálnu vzdialenosť medzi okrajmi buniek. Ak existujú dva argumenty, potom prvý definuje horizontálnu vzdialenosť a druhý vertikálnu vzdialenosť.
Výsledok tohto príkladu je znázornený na obr. 1.
Ryža. 1. Použitie parametra medzery medzi okrajmi PoznámkaAk tag
|
