pomocou selektora table td: first-child, table td: last-child môžete štylizovať prvý alebo posledný stĺpec tabuľky (okrem prvej bunky hlavičky tabuľky);
pomocou selektora tabuľky td: nth-child (pravidlo výberu stĺpcov) môžete štylizovať akékoľvek stĺpce v tabuľke.
Môžete si prečítať viac o selektoroch CSS.
, a pomocou vlastnosti na strane titulkov ju môžete umiestniť pred alebo pod tabuľku. Vlastnosť zarovnania textu sa používa na horizontálne zarovnanie textu nadpisu. Dedičná.
Tabuľka č. 1
| Spoločnosť |
Q1 |
Q2 |
Q3 |
Q4 |
...
titulok (strana s titulkami: dole; zarovnanie textu: vpravo; odsadenie: 10 pixelov 0; veľkosť písma: 14 pixelov;) 
Ryža. 2. Príklad zobrazenia hlavičky pod tabuľkou 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á.
| Spoločnosť |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
tabuľka (border: 1px solid # 69c; border-collapse: separate; empty-cells: hide;) th, td (border: 2px solid # 69c;) 
Ryža. 5. Príklad skrytia prázdnej bunky tabuľky 9. Rozloženie tabuľky rozloženia 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 upravovať v minimalistickom štýle tak, že pod nadpis umiestnite dvojpixelové orámovanie.
| Zamestnanec | Plat | Bonus | Supervízor |
|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin tan | $150 | - | Annie |
| Joyce ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
tabuľka (rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; veľkosť písma: 14 pixelov; pozadie: biele; maximálna šírka: 70%; šírka: 70%; zbalenie orámovania: zbaliť; text -align: left;) th (weight-font: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: # 669; padding: 9px 8px; transition: .3s lineárne;) tr: hover td (farba: # 6699ff;)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 pixelov 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ť nasledovne: 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, ako vyzdobiť stôl, vyberte si 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
atribút hranica tým, že mu dáte inú hodnotu ako nulu.
Urobme teda okraje pre stôl. Napríklad pre ten, ktorý už máme:
| Ľavá horná bunka | Vpravo hore bunka |
| Vľavo dole bunka | Vpravo dole bunka |
Výsledok v prehliadači:
Ako odstrániť orámovanie tabuľky
Na druhej strane, na odstránenie okrajov tabuľky HTML alebo tiež môžete povedať, že ich urobíte neviditeľnými, potrebujete 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:
Príklad tabuľky
| Ľavá horná bunka |
Vpravo hore bunka |
| Vľavo dole bunka |
Vpravo dole bunka |
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úhlasíte s tým, že okraj definovaný pomocou CSS nemá rovnaký vzhľad, ako by ste 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-collapse. 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!
Tabuľkové údaje- informácie, ktoré je možné zobraziť vo forme tabuľky a logicky rozdeliť na stĺpce a riadky. Značka HTML sa používa na zobrazenie tabuľkových údajov na webových stránkach
, čo je kontajner s obsahom tabuľky. Obsah tabuľky HTML je popísaný riadok po riadku, každý riadok začína úvodnou značkou a končí sa zatváracou značkou
.
Vnútri značky
bunky tabuľky sú umiestnené reprezentované značkami | alebo | ... Sú to bunky, ktoré obsahujú všetok obsah tabuľky zobrazený na webovej stránke.
Rám stola
Tabuľka HTML na webovej stránke je predvolene vykreslená bez orámovania. Na pridanie orámovania do tabuľky sa ako všetky ostatné prvky používa vlastnosť CSS border. Je však potrebné poznamenať, že ak pridáte orámovanie iba k prvku , potom sa zobrazí okolo celej tabuľky. Aby bunky tabuľky mali aj ohraničenie, budete musieť pre prvky nastaviť vlastnosť border | a | . Tabuľka, th, td (okraj: 1px plná čierna;) Skúste to " Teraz majú tabuľka aj bunky ohraničenie, zatiaľ čo každá bunka a tabuľka majú svoje vlastné ohraničenie. V dôsledku toho sa medzi rámcami objavil prázdny priestor; vlastnosť medzery medzi okrajmi vám umožňuje ovládať veľkosť tohto priestoru, ktorý je nastavený pre celú tabuľku. Inými slovami, nemôžete ovládať medzery medzi rôznymi bunkami jednotlivo.
Aj keď odstránite medzery medzi bunkami pomocou hodnoty 0 vlastnosti medzery medzi okrajmi, okraje buniek sa navzájom dotknú a zdvojnásobia sa. Vlastnosť border-collapse sa používa na zlúčenie okrajov buniek. Môže mať dve hodnoty:
- samostatné: je predvolené. Bunky sú zobrazené kúsok od seba, každá bunka má svoj vlastný okraj.
- zbaliť: spojí susedné rámce do jedného, všetky medzery medzi bunkami, ako aj medzi bunkami a rámcom tabuľky sa ignorujú.
Názov dokumentu
| názov | Priezvisko |
|---|
| Homer | Simpsonovci |
| Marge | Simpsonovci |
| názov | Priezvisko |
|---|
| Homer | Simpsonovci |
| Marge | Simpsonovci |
Skús " Veľkosť stola
Po pridaní rámcov do buniek tabuľky bolo zrejmé, že obsah buniek je príliš blízko okrajov. Vlastnosť padding môžete použiť na pridanie medzier medzi okraje buniek a ich obsah: Th, td (vypchávky: 7 pixelov;) Skúste to " Veľkosť stola závisí od jeho obsahu, ale často nastanú situácie, keď je stôl príliš úzky a je potrebné ho roztiahnuť. Šírku a výšku tabuľky je možné zmeniť pomocou vlastností šírky a výšky a nastaviť požadované rozmery buď na samotnú tabuľku, alebo na bunky: Tabuľka (šírka: 70%;) th (výška: 50px;) Skúste to " Zarovnanie textu
Štandardne je text v bunkách hlavičky tabuľky zarovnaný na stred a text v normálnych bunkách je zarovnaný doľava. Pomocou vlastnosti zarovnania textu môžete ovládať vodorovné zarovnanie textu.
Vlastnosť CSS na zvislé zarovnanie vám umožňuje ovládať zvislé zarovnanie textového obsahu. V predvolenom nastavení je text vertikálne zarovnaný so stredom buniek. Zvislé zarovnanie je možné prepísať jednou z hodnôt pre vlastnosť zvislého zarovnania:
- hore: text je zarovnaný k hornej časti bunky
- stred: zarovná text na stred (predvolené)
- dole: text je zarovnaný k spodnej časti bunky
Názov dokumentu
| názov | Priezvisko |
|---|
| Homer | Simpsonovci |
| Marge | Simpsonovci |
Skús " Striedanie farby pozadia riadkov tabuľky
Pri pohľade na veľké tabuľky obsahujúce veľa riadkov s veľkým počtom informácií môže byť náročné sledovať, ktoré údaje patria do konkrétneho riadka. Aby ste používateľom uľahčili navigáciu, môžete striedavo používať dve rôzne farby pozadia. Na vytvorenie popísaného efektu môžete použiť selektor tried a pridať ho do každého druhého riadka tabuľky:
Názov dokumentu
| názov | Priezvisko | Pozícia |
|---|
| Homer | Simpsonovci | otec |
| Marge | Simpsonovci | matka |
| Bart | Simpsonovci | syn |
| Lisa | Simpsonovci | dcéra |
Skús "Pridanie atribútu triedy do každého druhého riadka je únavná úloha. Aby sa tento problém vyriešil alternatívnym spôsobom, do CSS3 bola pridaná pseudotrieda: n-child. Účinok prekladania je teraz možné dosiahnuť výlučne pomocou CSS bez toho, aby ste sa museli uchyľovať k zmene označenia HTML dokumentu. S pseudotriedou: n-ty-dieťa môžete vybrať všetky nepárne alebo párne riadky v tabuľke pomocou jedného z kľúčových slov párny (párny) alebo nepárny (nepárny): Tr: n-té dieťa (nepárne) (farba pozadia: # EAF2D3;) Skúste to " Zmeňte pozadie riadka pri umiestnení kurzora myši
Ďalším spôsobom, ako zlepšiť čitateľnosť tabuľkových údajov, je zmeniť farbu pozadia riadka, keď naň umiestnite kurzor. Pomôže to zvýrazniť požadovaný obsah tabuľky a zlepšiť vizuálne vnímanie údajov.
Implementácia tohto efektu je veľmi jednoduchá, preto musíte do výberu riadkov tabuľky pridať pseudo triedu: hover a nastaviť požadovanú farbu pozadia: Tr: hover (farba pozadia: # E0E0FF;) Skúste to " Stredové zarovnanie stola
Zarovnanie tabuľky HTML so stredom je možné iba vtedy, ak je šírka tabuľky menšia ako šírka jej nadradeného prvku. Na zarovnanie tabuľky v strede musíte použiť vlastnosť okraja a nastaviť na ňu aspoň dve hodnoty: prvá hodnota bude zodpovedať za vonkajší okraj tabuľky v hornej a dolnej časti a druhá - za automatické zarovnanie stredu : Tabuľka (okraj: 10 px automaticky;) Skúste to " Ak potrebujete rôzne okraje v hornej a dolnej časti tabuľky, môžete nastaviť vlastnosť okraja na tri hodnoty: prvá bude zodpovedať za horný okraj, druhá za horizontálne zarovnanie a tretia za dolný okraj: Tabuľka (okraj: 10 pixelov auto 30 pixelov;)
Uvažovali sme o mnohých metódach štýlu prvkov na stránke, ako sú textové informácie, odkazy, obrázky, nadpisy, ale to všetko ešte nestačí. Vo svojich článkoch často používam prvky HTML, ako sú tabuľky, pretože vo väčšine prípadov sú pomôcť zorganizovať dôležité informácie a uľahčiť ich prezentáciu.
V tomto článku vás zoznámim so zložitosťou úpravy tabuliek HTML a naučíte sa nové vlastnosti CSS navrhnuté na dosiahnutie týchto cieľov.
Hypertextový značkovací jazyk HTML nám poskytol veľké množstvo príležitostí na väzbu štýlov CSS na desať jedinečných značiek navrhnutých na prácu s tabuľkami, preto ich odporúčam pred ďalšou štúdiou zopakovať:
| Označiť | Popis |
|---|
| Definuje obsah tabuľky. |
|
| Určuje názov tabuľky. |
|
| Definuje bunku hlavičky tabuľky. |
|---|
|
| Definuje riadok v tabuľke. |
|
| Definuje údajovú bunku tabuľky. |
| Používa sa na zahrnutie záhlavia skupiny v tabuľke (nadpis tabuľky). |
| |
Používa sa na obsiahnutie „tela“ tabuľky. |
|
Používa sa na zahrnutie „päty“ tabuľky (päty). |
|
| Definuje zadané vlastnosti stĺpcov pre každý stĺpec v rámci značky .
|
|
| Definuje skupinu stĺpcov v tabuľke. |
Práca so zarážkami tabuľky
Použitie vypchávky v tabuľke
Odsadenie tabuľky
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
V tomto prípade sme:
- Stôl bol položený do stredu pomocou techniky horizontálneho centrovania s vonkajším polstrovaním (okraj: 0 automaticky).
- Názov tabuľky (tag ) nastavíme spodné vypchávky na 19 pixelov. Dúfam, že nie ste zmätení nerovnomernými číslami :)
Výsledok nášho príkladu:
Medzera medzi bunkami
Po vyššie uvedenom príklade ste si mohli všimnúť, že medzi všetkými bunkami v tabuľke máme medzeru. Pozrime sa, ako odstrániť medzeru medzi bunkami tabuľky alebo ju zväčšiť.
Ak chcete nastaviť vzdialenosť medzi okrajmi susedných buniek, musíte použiť vlastnosť CSS - medzery medzi okrajmi.
Zmeňte medzery medzi tabuľkami
medzery medzi okrajmi: 30 pixelov 10 pixelov;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
medzery medzi okrajmi: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
medzery medzi okrajmi: 0,2 em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
V tomto prípade sme:
- plavák: vľavo). Ak vám téma plávajúcich prvkov unikla, v tomto návode sa k nej môžete kedykoľvek vrátiť - „“.
- Navyše nastavíme čalúnenie stola vpravo na 30 pixelov a nastavíme zvislé zarovnanie tabuliek (horná časť prvku je zarovnaná s hornou časťou najvyššieho prvku). K tejto vlastnosti sa podrobne vrátime v tomto článku.
- ) - tučné.
- Pre bunky tabuľky (bunky záhlavia a údajov) sme nastavili 1 pixelové pevné ohraničenie s hexadecimálnym číslom # F50 a výplň nastavili na 19 pixelov pre všetky strany.
- Na prvý stôl s triedou .najprv medzery medzi bunkami tabuľky (vlastnosť medzier) nastavíme na 30 pixelov 10 pixelov, pre druhú tabuľku s triedou .sekunda rovná nule, pre tretiu tabuľku s triedou . tretie rovná sa 0,2em.
Upozorňujem na skutočnosť, že ak je vo vlastnosti border-spacing uvedená iba jedna hodnota dĺžky, potom označuje medzery, horizontálne aj vertikálne, a ak sú zadané dve hodnoty dĺžky, potom prvá určuje horizontálnu vzdialenosť. , a druhá vertikála. Vzdialenosť medzi okrajmi susedných buniek je možné zadať v jednotkách CSS (px, cm, em, atď.). Záporné hodnoty nie sú povolené.
Výsledok nášho príkladu:
Zobrazenie okrajov okolo buniek tabuľky
Môžeš povedať: - takže sme odstránili medzery medzi bunkami pomocou vlastnosti border-spacing s hodnotou 0, ale prečo máme teraz hranice buniek krížiace sa?
Dvojité ohraničenie sa vytvára kvôli tomu, že spodný okraj jednej bunky je pridaný k hornému okraju bunky, ktorá je pod ňou, k podobnej situácii dochádza na stranách buniek a je to logické z hľadiska zobrazovania. tabuľka, ale našťastie existuje spôsob, ako prehliadaču povedať, že sme. Nechceme vidieť také drzé správanie hraníc buniek.
Na to musíte použiť vlastnosť CSS border-collapse. Je zvláštne, že použitie vlastnosti border-collaps s hodnotou kolapsu je najlepší spôsob, ako odstrániť medzeru medzi bunkami bez toho, aby sa medzi nimi dostali dvojité hranice.
Zvážte porovnanie správania pri ohraničení pri použití vlastnosti medzery medzi hranicami s hodnotou 0 a vlastnosti zrútenia okraja s hodnotou zbalenia:
Príklad zobrazenia okrajov okolo buniek tabuľky
medzery medzi okrajmi: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
hraničný kolaps: kolaps;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
V tomto prípade sme:
- Naše stoly boli zarovnané tak, aby boli zarovnané doľava (float: vľavo), a nastavili ich pravé vypchávky na 30 pixlov.
- Nastaviť pre názov tabuľky (tag ) - tučné.
- Pre bunky tabuľky (bunky záhlavia a údajov) sme nastavili 5px plné orámovanie s # F50 hex a nastavili pevnú šírku 50px a výšku 75px.
- Na prvý stôl s triedou .najprv medzery medzi bunkami tabuľky nastavíme na nulu (medzery medzi okrajmi: 0;) a pre druhú tabuľku s triedou .sekunda nastavte vlastnosť border-collaps na zbalenie, ktorá podľa možnosti zlúči okraje buniek do jedného.
Výsledok nášho príkladu:
Správanie prázdnych buniek
Pomocou CSS môžete nastaviť, či sa majú okraje a pozadie prázdnych buniek v tabuľke zobrazovať alebo nie. Za toto správanie je zodpovedná vlastnosť prázdnych buniek, ktorá v predvolenom nastavení, ako ste si mohli všimnúť z predchádzajúcich príkladov, zobrazuje prázdne bunky.
Prejdeme k príkladu:
Príklad zobrazenia prázdnych buniek tabuľky
prázdne bunky: show;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
prázdne bunky: skryť;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Pochopenie fungovania vlastnosti prázdnych buniek z tohto príkladu je veľmi jednoduché. Ak je nastavený na skrytie, prázdne bunky a pozadie v nich budú skryté, ak sú nastavené na zobrazenie (predvolené), zobrazia sa.
Umiestnenie hlavičky tabuľky
Pozrime sa na ďalšiu jednoduchú vlastnosť štýlov tabuliek - stranu s titulkami, ktorá nastavuje pozíciu titulku tabuľky (nad alebo pod tabuľkou). Štandardne je vlastnosť na strane titulkov nastavená na začiatok, čím sa nadpis umiestni nad tabuľku. Ak chcete umiestniť názov pod tabuľku, musíte použiť vlastnosť s najnižšou hodnotou.
Pozrime sa na príklad použitia tejto vlastnosti:
Príklad použitia vlastnosti na strane titulkov
Nadpis nad tabuľkou
| názov | cena |
| Ryba | 350 rubľov |
| Mäso | 250 rubľov |
Nadpis pod tabuľkou
| názov | cena |
| Ryba | 350 rubľov |
| Mäso | 250 rubľov |
V tomto prípade sme vytvorili dve triedy ktoré riadia polohu hlavičky tabuľky. Prvá trieda ( .topCaption) umiestni nad ňu názov tabuľky, použili sme ju na prvú tabuľku a druhú triedu ( .dolná titulka) umiestni pod ňu názov tabuľky, použili sme ju na druhú tabuľku. Trieda .topCaption má predvolenú vlastnosť na strane titulkov a bol vytvorený na demonštračné účely.
Výsledok nášho príkladu:
Horizontálne a vertikálne zarovnanie
Pri práci s tabuľkami budete vo väčšine prípadov musieť upraviť zarovnanie obsahu v bunkách hlavičky a údajov. Vlastnosť zarovnania textu sa používa na horizontálne zarovnanie podobné akýmkoľvek textovým informáciám. O použití tejto vlastnosti pre text sme diskutovali skôr v článku „“.
Ak chcete nastaviť zarovnanie pre obsah v bunkách, musíte použiť špeciálne kľúčové slová s vlastnosťou zarovnania textu. Uvažujme o použití kľúčových slov tejto vlastnosti v nasledujúcom príklade.
Príklad horizontálneho zarovnania v tabuľke
|
Význam | Popis |
|
vľavo | Zarovná text bunky doľava. Toto je predvolené nastavenie (ak je smer textu zľava doprava). |
|
správny | Zarovná text bunky doprava. Toto je predvolené nastavenie (ak je smer textu sprava doľava). |
|
centrum | Zarovná text bunky so stredom. |
|
ospravedlniť | Roztiahne riadky tak, aby každý riadok mal rovnakú šírku (roztiahne text bunky tak, aby zodpovedal šírke). |
V tomto prípade sme vytvorili štyri triedy, ktoré nastavili rôzne horizontálne zarovnania v bunkách a použili ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zarovnania textu
Výsledok nášho príkladu:
Okrem vodorovného zarovnania môžete v bunkách tabuľky definovať aj zvislé zarovnanie pomocou vlastnosti zvislé zarovnanie.
Upozorňujeme, že pri práci s bunkami tabuľky sa používajú iba nasledujúce hodnoty* tejto vlastnosti:
*
-Hodnoty sub, super, text-top, text-bottom, length a% použité na bunku tabuľky sa budú správať, ako keby používali základnú hodnotu.
Pozrime sa na príklad použitia:
Príklad zvislého zarovnania v tabuľke
|
Význam | Popis |
|
základná línia | Zarovnáva základnú líniu bunky so základnou líniou rodiča. Toto je predvolené nastavenie. |
|
hore | Zarovnáva obsah bunky vertikálne k hornej časti. |
|
stredný | Zarovnáva obsah bunky vertikálne v strede. |
|
dno | Zarovnáva obsah bunky vertikálne nadol. |
V tomto prípade sme vytvorili štyri triedy, ktoré nastavili rôzne zvislé zarovnania v bunkách a použili ich v poradí na riadky tabuľky. Hodnota v bunke sa zhoduje s hodnotou vlastnosti zvislého zarovnania, ktorá bola použitá na daný riadok.
Algoritmus pre umiestnenie rozloženia tabuľky v prehliadači
CSS predvolene používa algoritmus automatického rozloženia tabuľky v prehliadači. V tomto prípade šírka stĺpca je stanovená najširším neporušeným obsahom bunky... Tento algoritmus môže byť v niektorých prípadoch pomalý, pretože prehliadač musí pred určením konečného rozloženia prečítať celý obsah tabuľky.
Ak chcete zmeniť typ rozloženia tabuľky v prehliadači pomocou automatické na opravené, musíte použiť vlastnosť CSS usporiadania tabuliek s pevnou hodnotou.
V tomto prípade horizontálne umiestnenie závisí iba od zo šírky tabuľky a šírky stĺpcov, a nie z obsahu buniek. Prehliadač začne zobrazovať tabuľku bezprostredne po prijatí prvého riadka. V dôsledku toho vám pevný algoritmus umožňuje vytvoriť rozloženie takejto tabuľky rýchlejšie ako pomocou automatickej verzie. Pri práci s veľkými tabuľkami môžete na zvýšenie výkonu použiť pevný algoritmus.
Pozrime sa na aplikáciu tejto vlastnosti pomocou nasledujúceho príkladu:
Príklad použitia vlastnosti table-layout
rozloženie tabuľky: auto;
| názov |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Pšenica |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
rozloženie stola: pevné;
| názov |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Pšenica |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
V tomto prípade sme:
Úprava riadkov a stĺpcov tabuľky
V článku „“ sme sa už čiastočne dotkli spôsobov štylizovania riadkov a stĺpcov tabuľky. V tomto článku sme sa zamerali na používanie skupinovej pseudotriedy, ktorá vám umožňuje striedať štýly riadkov v tabuľkách pomocou hodnôt dokonca (úprimný) a zvláštny (zvláštny) alebo elementárne matematický vzorec.
Zopakujme si predchádzajúce techniky a preskúmajme nové spôsoby, ako štylizovať riadky a stĺpce v tabuľkách. Prejdeme k príkladom.
Príklad použitia: n-podtriedy pseudotriedy s tabuľkami
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
V tomto prípade sme:
Výsledok nášho príkladu:
Prejdeme k ďalšiemu príkladu, v ktorom sa pozrieme na možnosti úpravy riadkov tabuľky.
Príklad štýlu riadkov v tabuľkách
|
Služba | cena |
|
Sum |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
V tomto prípade sme:
- Nastavte šírku tabuľky na 100% šírky nadradeného prvku, bunky hlavičky a údajov nastavte na 1px plné ohraničenie.
- Nainštalované pre položku ("Päta" tabuľky) farba pozadia - koralový, pre prvok („Hlavička“ tabuľky) nastavte farbu pozadia striebro.
- Na položky
ktoré sú vo vnútri prvku (telo tabuľky) nastaviť zmenu farby pozadia pri vznášaní (pseudotrieda: hover) c biely podľa farby khaki(celý riadok je zvýraznený).
Výsledok nášho príkladu: Ryža. 153 Príklad štýlu riadkov v tabuľkách Nasledujúci príklad ukazuje, ako použiť zaokrúhľovanie rohov na bunky tabuľky (vlastnosť).
Príklad zaoblenia rohov bunky
V tomto prípade sme:
- Vycentrujte tabuľku pomocou čalúnenia, nastavte šírku a výšku buniek hlavičky na 50 pixelov, ako je uvedené transparentné orámovanie 5 pixelov.
- Zistilo sa, že pri umiestnení kurzora (pseudo-class: hover) nad bunku hlavičky získa pozadie Modrá farby, Oranžová farba textu, orámovanie oranžová farby 5 pixelov a polomer 100%.
- Priehľadný okraj je potrebné, aby sa vyhradil priestor pre hranicu, ktorá sa zobrazí pri vznášaní, ak sa tak nestane, tabuľka „vyskočí“.
Výsledok nášho príkladu:
Nasledujúci príklad sa týka použitia prvkov HTML a a ich štýl.
Príklad zvýraznenia stĺpcov tabuľky
|
Číslo aplikácie | Služba | cena, rub. | Celkom |
|
1 | Spev |
6 000 |
6 000 |
|
2 | umývanie riadu |
2 000 |
2 000 |
|
3 | Čistenie |
1 000 |
1 000 |
|
4 | Tŕpnutie |
1 500 |
1 500 |
|
5 | Čítanie |
3 000 |
3 000 |
V tomto prípade sme:
Výsledok nášho príkladu:
No a posledný príklad, ktorý je dosť ťažko pochopiteľný a vyžaduje pokročilé znalosti CSS, pretože sa dotýka budúcich tém plánovaných na podrobné štúdium v rámci tohto kurzu.
V predchádzajúcom príklade sme si uvedomili, že prvok HTML môžete použiť iba jednu vlastnosť CSS, farbu pozadia, ale nemôžete pri tomto prvku priamo nastaviť farbu pozadia pri vznášaní (pseudotrieda: hover). V tomto prípade sa pozrieme na to, ako zvýrazniť stĺpec tabuľky iba pomocou CSS.
Príklad zvýraznenia stĺpcov a riadkov tabuľky pri umiestnení kurzora myši
|
Číslo aplikácie | Služba | cena, rub. | Celkom |
|
1 | Spev |
6 000 |
6 000 |
|
2 | umývanie riadu |
2 000 |
2 000 |
|
3 | Čistenie |
1 000 |
1 000 |
|
4 | Tŕpnutie |
1 500 |
1 500 |
|
5 | Čítanie |
3 000 |
3 000 |
V tomto prípade sme:
- Tabuľku sme nastavili tak, aby zaberala 100% nadradeného prvku, bunky tabuľky zaberali 25% nadradeného prvku a mali 1 pixelové zelené ohraničenie, hlavičky a dátové bunky boli vysoké 45 pixelov. Medzeru medzi bunkami sme odstránili pomocou vlastnosti border-collaps s hodnotou
.
- A tak pomocou pseudoprvku :: after pridajte obsah za každý prvok.
pri vznášaní sa. Pseudoprvok :: after sa nevyhnutne používa v spojení s vlastnosťou content, vďaka ktorej vložíme blokový prvok, ktorý má farbu pozadia lesná zeleň a má absolútne polohovanie.
- Absolútne umiestnenie je tu nevyhnutné na odsadenie prvku vzhľadom na zadaný okraj jeho predka, pričom predok musí mať inú hodnotu polohy ako predvolenú statickú hodnotu, inak bude počet z tohto dôvodu relatívny k zadanému okraju okna prehliadača. pripravili sme pre stôl relatívne umiestnenie(príbuzný).
- Pre náš vygenerovaný blok nastavíme hornú vlastnosť, ktorá udáva smer odsadenia umiestneného prvku od horného okraja, a dolnú vlastnosť, ktorá udáva smer odsadenia umiestneného prvku od dolného okraja. Pre obe vlastnosti bola zadaná hodnota 0, takže blok úplne zaberie prvok zo spodnej a vrchnej časti tabuľky, šírka tohto bloku bola nastavená na 25%, táto hodnota zodpovedá šírke samotnej bunky.
- A konečná vlastnosť, ktorú sme pre tento blok nastavili: z-index s hodnotou „-1“ určuje poradie umiestnených prvkov podľa Os Z... Táto vlastnosť je potrebná, aby bol text pred týmto blokom, a nie za ním, ak nenastavíte hodnotu menšiu ako nula, potom blok text zatvorí.
Výsledok nášho príkladu:
Ak v tejto fáze štúdie nerozumiete procesu polohovania prvkov, nenechajte sa odradiť, je to ťažko pochopiteľná téma, nad ktorou sme tiež neuvažovali, ale určite sa ňou budeme zaoberať v nasledujúcom článku návod „Polohovacie prvky v CSS“.
Otázky a úlohy k téme
Dokončite cvičnú aktivitu a potom sa presuňte na ďalšiu tému:
 Ak máte problémy s dokončením cvičenia, môžete príklad vždy otvoriť v samostatnom okne a na stránke skontrolovať, či bol použitý CSS.
2016-2020 Denis Bolshakov, svoje pripomienky a návrhy k fungovaniu stránky môžete zasielať na [email protected]
| |
|
| |
