6. Ako odstrániť medzeru medzi rámcami buniek

V predvolenom nastavení sú okraje buniek tabuľky oddelené malým priestorom. Ak pre tabuľku nastavíte border-collapse: collapse, medzera sa odstráni. Majetok sa dedí.

Syntax

Tabuľka (border-collapse: collapse;)
Ryža. 3. Príklad tabuliek so zlučovaním a rozdeľovaním okrajov buniek

7. Ako zväčšiť priestor medzi okrajmi buniek

Pomocou vlastnosti medzery môžete zmeniť vzdialenosť medzi okrajmi buniek. Táto vlastnosť platí pre tabuľku ako celok. Dedičná.

Syntax

Tabuľka (zbalenie orámovania: oddelené; medzery medzi okrajmi: 10 pixelov 20 pixelov;) tabuľka (zbalenie okrajov: samostatné; medzery medzi okrajmi: 10 pixelov;)
Ryža. 4. Príklad tabuliek so zväčšenými medzerami medzi rámcami buniek

8. Ako skryť prázdne bunky tabuľky

Vlastnosť prázdnych buniek skryje alebo zobrazuje prázdne bunky. Ovplyvňuje iba bunky, ktoré neobsahujú žiadny obsah. Ak je pre bunku zadané pozadie a pre tabuľku tabuľka (border-collaps: collapse;), bunka nebude skrytá. Dedičná.

9. Rozloženie rozloženia tabuľky pomocou vlastnosti table-layout

Rozloženie rozloženia tabuľky je určené jedným z dvoch prístupov: pevné rozloženie alebo automatické rozloženie. Rozloženie v tomto prípade znamená, ako je šírka tabuľky rozdelená medzi šírku buniek. Nehnuteľnosť sa nededí.

Syntax

Stôl (rozloženie stola: pevné;)

10. Najlepšie rozloženie tabuľky

1. Horizontálny minimalizmus

Horizontálne tabuľky sú tabuľky, v ktorých sa text číta horizontálne. Každá entita je samostatný riadok. Tabuľky môžete takto štylizovať v minimalistickom štýle tak, že pod nadpis umiestnite dvojpixelové orámovanie.

Vzhľadom na veľký počet riadkov je tento dizajn tabuliek ťažko čitateľný. Na vyriešenie tohto problému môžete pridať jednopixelové orámovanie pod všetky prvky td.

Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; transition: .3s linear;) / * the rest of code is as in the example above * /

Pridanie efektu a: hover k prvku tr zjednoduší čítanie tabuliek v minimalistickom štýle. Keď umiestnite kurzor myši na bunku, ostatné bunky v rovnakom riadku sa zvýraznia súčasne, čo zjednodušuje proces sledovania informácií, ak majú tabuľky viac stĺpcov.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)

2. Vertikálny minimalizmus

Aj keď sa takéto tabuľky používajú zriedka, vertikálne orientované tabuľky sú užitočné na kategorizáciu alebo porovnávanie popisov objektov reprezentovaných stĺpcom. Môžete ich štylizovať v minimalistickom štýle pridaním medzery oddeľujúcej stĺpce.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- vpravo: 30 pixelov plná #fff; hranica vľavo: 30 pixelov plná #fff; farba: #669; výplň: 12 pixelov 2 pixely;)

3. Štýl "Box"

Najspoľahlivejším štýlom na zdobenie stolov všetkých typov je takzvaný „krabicový“ štýl. Stačí zvoliť dobrú farebnú schému a potom nastaviť farbu pozadia pre všetky bunky. Nezabudnite zdôrazniť rozdiel medzi čiarami nastavením okrajov ako oddeľovačov.

Th (veľkosť písma: 13 pixelov; hmotnosť písma: normálna; pozadie: # b9c9fe; horný okraj: 4 pixely plné #aabcfe; spodný okraj: 1 pixel plný #fff; farba: # 039; výplň: 8 pixelov;) td (pozadie : # e8edff; spodný okraj: 1px plný #fff; farba: # 669; horný okraj: 1px pevný priehľadný; výplň: 8px;) tr: hover td (pozadie: #ccddff;)

Najťažšie je nájsť farebnú schému, ktorá bude harmonicky ladiť s vašim webom. Ak je stránka nabitá grafikou a dizajnom, bude pre vás dosť ťažké používať tento štýl.

Tabuľka (rodina písem: "Lucida Sans Unicode", "Lucida Grande", bezpatkové; veľkosť písma: 14 pixelov; maximálna šírka: 70%; šírka: 70%; zarovnanie textu: stred; zbalenie okraja: zbaliť ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- vľavo: 1px plná # 9baff1; farba: # 039; výplň: 8 pixelov;) td (pozadie: # e8edff; pravé ohraničenie: 1px plné #aabcfe; ľavé orámovanie: 1px plné #aabcfe; farba: # 669; výplň: 8 pixelov ;)

4. Horizontálna zebra

Stôl Zebra vyzerá celkom atraktívne a šikovne. Doplnková farba pozadia môže ľuďom slúžiť ako vizuálny podnet na čítanie tabuľky.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( pozadie: # e8edff;)

5. Novinový štýl

Aby ste dosiahli takzvaný novinový efekt, môžete na prvky stola aplikovať orámovanie a hrať sa s bunkami vo vnútri. Ľahký, minimálny štýl novín môže vyzerať takto: pohrajte sa s farebnou schémou, pridajte okraje, výplne, rôzne pozadia a efekt:: hover pri vznášaní sa nad čiarou.

Tabuľka (okraj: 1px plná # 69c;) th (hmotnosť písma: normálna; farba: # 039; dolná hranica: 1 pixelov prerušovaná # 69c; výplň: 12 pixelov 17 pixelov;) td (farba: # 669; výplň: 7 pixelov 17 pixelov; ) tr: hover td (pozadie: #ccddff;)

Tabuľka (okraj: 1px plná # 69c;) th (hmotnosť písma: normálna; farba: # 039; výplň: 10 pixelov;) td (farba: # 669; horná hranica: 1 pixelov prerušovaná #fff; výplň: 10 pixelov; pozadie: #ccddff;) tr: hover td (pozadie: # 99bcff;)

Tabuľka (orámovanie: 1px plné # 6cf;) th (hmotnosť písma: normálna; veľkosť písma: 13px; farba: # 039; transformácia textu: veľké písmená; pravé orámovanie: 1px plné # 0865c2; horný okraj: 1px plný # 0865c2; ľavý okraj: 1px plný # 0865c2; spodný okraj: 1px plný #fff; výplň: 20px;) td (farba: # 669; pravý okraj: 1px prerušovaný # 6cf; výplň: 10px 20px;)

6. Pozadie tabuľky

Ak hľadáte rýchly a jedinečný spôsob dizajn stola, vyberte atraktívny obrázok alebo fotografiu súvisiacu s témou stola a nastavte ho ako pozadie stola.

Png ") 98% 86% sa neopakuje;) th (hmotnosť písma: normálna; veľkosť písma: 14 pixelov; farba: # 339; výplň: 10 pixelov 12 pixelov; pozadie: biela;) td (farba: # 669; okraj- horná časť: 1px plná biela; výplň: 10 pixelov 12px; pozadie: rgba (51, 51, 153, .2); prechod: .3s;) tr: vznášadlo td (pozadie: rgba (51, 51, 153, .1); )

Ahojte všetci! Teraz teda viete, ako vytvoriť elementárne tabuľky, ktoré pozostávajú z toľko riadkov a stĺpcov, koľko potrebujete. Nie je to zlé, nie je to zlé. Teraz sa porozprávajme o dizajne týchto tabuliek.

V poslednej lekcii boli tabuľky zobrazené bez okrajov. A vidíte, vyzerá to tak-tak, že to nemôžete ani nazvať znakom. Ak chcete vytvoriť ohraničenie tabuľky v HTML, pridajte ho do značky

Urobme teda okraje pre stôl. Napríklad pre ten, ktorý už máme:

Výsledok v prehliadači:

Ako odstrániť orámovanie tabuľky

Na druhej strane, aby ste odstránili hranice HTML tabuľky alebo môžete tiež povedať, aby boli neviditeľné, potrebujete tento atribút hranica nastavená hodnota 0 ... Po týchto jednoduchých akciách bude rám odstránený.

Atribút vám umožňuje vytvárať, ale nie spravovať hranice. Umožňuje iba zmeniť ich hrúbku.

Preto teraz budeme hovoriť o CSS ktorého vlastnosti to umožňujú s hranica okolo stolu ako celku vytvorte rôzne hranice, a to vo vnútri každej bunky, ako aj mimo nej.

Pozrime sa, ako použiť CSS na vytvorenie vonkajších a vnútorných okrajov tabuľky.
Za týmto účelom odstráňte atribút border z našej tabuľky a pridajte štýly:

Výsledok v prehliadači:

Teraz pridáme hranice aj pre každú bunku. Ak to chcete urobiť, stačí pridať štýly:

Výsledok v prehliadači:

Ako odstrániť vypchávky medzi bunkami v tabuľke HTML

Súhlaste s tým, že je stanovená hranica pomocou CSS, má niečo iné vzhľad ako by sme chceli. Nepochybne, z hľadiska estetiky je na čom pracovať. Na stránke prehliadača vidíte, že v predvolenom nastavení zobrazuje okraje tabuliek a buniek oddelene. Jasne to ukazuje príklad.

Je však celkom možné zbaviť sa takýchto hraníc, ktoré sa nazývajú dvojité, ak použijeme vlastnosť CSS border-collaps. V praxi to vyzerá takto:

Tabuľka (orámovanie: plná 1 pixelov modrá; hraničné zbalenie: zbaliť;) ...

V dôsledku toho sa vzdialenosť medzi bunkami odstráni:

Hodnota zbalenia priradená k atribútu border odstráni dvojité ohraničenie. Ako vidíte, výsledkom je zrútenie susedných okrajov buniek, ako aj okrajov buniek a vonkajšieho okraja tabuľky. Pokiaľ ide o ten druhý, dá sa úplne odstrániť. A ak je potrebné ho zobraziť, musíte zväčšiť jeho šírku. Tým sme sa zbavili oddeľovačov v tabuľke. A v ďalšej lekcii si povieme, ako môžete nastaviť zvislé a vodorovné ohraničenie. Veľa šťastia všetkým!

Účel lekcie: Oboznámenie sa s vlastnosťami tabuľky a zásadami rozloženia tabuľky CSS

Zvážte hlavné Vlastnosti CSS stoly

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 odchýlky v ich dizajne, tabuľky dlho boli niektoré zo štandardov pre usporiadanie webových stránok. 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. Absencia 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 metód 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ýsledok:

Príklad: nastaviť iné pozadie buniek (na oddelenie dvoch stĺpcov od seba) a nastaviť vzdialenosť medzi stĺpcami (oddeľovač)

/ * 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:

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

/ * 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:

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ý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:

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ý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: