Tabuľka, th, td (štýl ohraničenia: pevný; šírka okraja: 1px; zbalenie okraja: zbalenie; výplň: 2px;) th (výška: 28px; farba pozadia: # f892dc; farba: biela; farba orámovania: čierna;) .ts1 (farba pozadia: #ffeffb;)

Rýchle zobrazenie

Šírka a výška stola

Pomocou vlastností CSS šírka Môžete nastaviť šírku stola.

Šírka je v zásade nastavená na pixelov alebo %

Tab1 (šírka: 100%;). Tab2 (šírka: 70%;). Tab3 (šírka: 300px;)

Rýchle zobrazenie

Vlastnosť CSS výška umožňuje nastaviť výšku stola. Výška je hlavne označená v pixelovale dajú sa použiť aj cm a em.

Tab1 (výška: 200px;). Tab2 (výška: 7cm;)

Rýchle zobrazenie

Ozdoba na hranici

Na ohraničenie tabuľky v CSS použite vlastnosť hranica.

Tabuľka, th, td (štýl okraja: pevný; farba okraja: zelená; šírka okraja: 1px;)

Rýchle zobrazenie

Poznámka: vlastnosť border nie je pre tabuľky jedinečná, dá sa použiť s akýmkoľvek prvkom. Tejto vlastnosti sa budeme podrobne venovať ďalej v tomto tutoriále.

Vlastnosť kolapsu hranice

Tabuľka v príklade vyššie má dvojité ohraničenie, pretože samotná tabuľka aj jej bunky (prvky th a td) majú svoje vlastné ohraničenia.

Nehnuteľnosť kolaps hraníc umožňuje spojiť hranice tabuľky a buniek. Spojené hranice zvyčajne vyzerajú úhľadnejšie a krajšie.

Tabuľka, th, td (štýl okraja: pevný; farba okraja: zelená; šírka okraja: 1 px; zbalenie okraja: zbalenie;)

Rýchle zobrazenie

Zarovnanie textu tabuľky

Užívanie nehnuteľnosti zarovnať text Text v bunkách tabuľky môžete zarovnať vodorovne. Text je možné zarovnať:

• Zarovnané doľava (hodnota vľavo)
• Správny
• Stred

Tab1 (zarovnanie textu: vpravo;). Tab2 (zarovnanie textu: doľava;). Tab3 (zarovnanie textu: na stred;)

Rýchle zobrazenie

Užívanie nehnuteľnosti vertical-align Môžete zvisle zarovnať text buniek tabuľky. Text je možné zarovnať:

• Na hornom okraji (hore)
• Stred (stred)
• Dole

Hore (vertical-align: top;) .mid (vertical-align: middle;) .bot (vertical-align: bottom;)

Rýchle zobrazenie

Vlastnosť polstrovania

Užívanie nehnuteľnosti vypchávka Môžete nastaviť veľkosť odsadenia medzi orámovaním bunky a jej obsahom.

# tab1 td (výplň: 10px;) # tab2 td (výplň: 5px;) # tab3 td (výplň: 0px;)

Rýchle zobrazenie

Urob si sám

Cvičenie 1 zopakujte tabuľku v editore:

Šírka tabuľky je 700 pixelov. Prvý riadok je vysoký 70 pixelov. Okraje tabuľky a bunky sú spojené.

Bunkový text zarovnané zhora	Bunkový text centrovaný	Bunkový text zarovnané zdola	Bunkový text centrovaný
Hrúbka hranice tohto bunka má 2 pixely	Hrúbka hranice tohto bunka má 3 pixely	Hrúbka hranice tohto bunka má 4 pixely	Hrúbka hranice tohto bunka má 1 pixel
Bunkový text zarovnané na ľavý okraj	Bunkový text zarovnané na pravý okraj	Bunkový text je vycentrovaný

Ak chcete používať, povoľte JavaScript

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

Pozrime sa na základné vlastnosti tabuľky CSS

hranica

Vlastnosť je považovaná za jednu a zahŕňa niekoľko nehnuteľností súčasne:

• HRANIČNÝ ŠTÝL
• HRANICA ŠÍRKY (ŠÍRKA HRANICE)
• HRANIČNÁ FARBA (HRANIČNÁ FARBA)

Existuje tiež kolektívne pravidlo:

table.collapse (border-collapse: collaps;) table.separate (border-collapse: separate;)

Výsledok:

šírka a výška
(výška a šírka stola)

Hodnoty:

Príklad:

zarovnať text
(horizontálne zarovnanie)

Hodnoty:

• stred (na stred)
• doľava (zarovnané doľava)
• vpravo (zarovnané doprava)
• zarovnať (šírka)

vertical-align
(zvislé zarovnanie)

Hodnoty:

• základná línia (základná línia)
• sub (ako subindex)
• super (ako horný index)
• hore (hore)
• stred (stred)
• spodný (spodný okraj)
• % (z výšky riadkovania)

Príklad:

vypchávka
(výplň stola)

farba pozadia (pozadie)
farba (farba textu)

Rozloženie tabuľky CSS

Vzhľadom na veľké množstvo vlastností tabuliek a variácie v ich dizajne sú tabuľky už dlho štandardom pre rozloženie webových stránok. Ak zviditeľníte okraje tabuľky, môžete ich jednotlivé bunky použiť ako samostatné bloky stránky: hlavička, ponuka, päta atď.

Nie je to však úplne správne, pretože každá značka má svoj vlastný účel a tabuľky nemali slúžiť na rozloženie stránky. Nedostatok alternatívy však povzbudil dizajnérov, aby používali tento typ usporiadania.

Teraz existuje ďalší spôsob - použitie vrstiev, ktoré postupne nahradili tabuľky pri tomto druhu práce s webovou stránkou. V našej dobe však niektorí dizajnéri úspešne používajú rozloženie tabuľky.

Rozloženie tabuľky s dvoma stĺpcami

Jednou z najbežnejších metód rozloženia sú dva stĺpce, t.j. stránka je rozdelená na dve časti.

Ľavá strana je zvyčajne ponuka a ďalšie prvky a pravá strana je hlavná pre hlavný obsah.

V tomto prípade je šírka ľavej strany nastavená na určitú hodnotu, t.j. tvrdé a pravá strana zaberá zvyšok stránky.

V takom prípade musíte nastaviť celkovú šírku celej tabuľky (značka tabuľky) v percentách prostredníctvom vlastnosti width (100%) a pre prvú bunku (značka td) nastaviť šírku (tiež vlastnosť width) v pixeloch alebo percentách.

Príklad: nastavte hlavný rámec stránky do dvoch stĺpcov: prvý - s pevnou veľkosťou, druhý - pre zvyšok oblasti prehľadávača. Vykonajte úlohu pomocou štýlov CSS ()

Výkon:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "správne"\u003e2</ td\u003e </ tr\u003e </ stôl\u003e ...

1

2

...

Výsledok:

Teraz sa pokúsime vizuálne oddeliť dva stĺpce tabuľky od seba.

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

Výkon:
Pridajme nové vlastnosti štýlu:

/ * pre ľavú bunku * / td # vľavo (šírka: 200px; pozadie: #ccc; orámovanie: 1px plná čierna; / * dočasne označuje orámovanie * /) / * pre pravú bunku * / td # vpravo (pozadie: # fc3; orámovanie: 1px čierna čierna; / * dočasne označuje orámovanie * /) / * pre oddeľovač * / #razdel (šírka: 10px; / * medzery medzi stĺpcami * /)

Spoločne:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "razdel"\u003e <td id \u003d "správne"\u003e2</ td\u003e </ tr\u003e </ stôl\u003e

1

2

Pre oddeľovač bola pridaná nová bunka.
Výsledok:

Oddeľovač medzi stĺpcami môžete tiež zmenšiť. K tomu použijeme štýly ohraničenia.

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: 200px; pozadie: #ccc; / * farba pozadia v ľavom stĺpci * / / * nový * / border-right: 1px prerušovaný # 000; / * možnosti pravého prerušovaného okraja * / )

Spoločne:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "správne"\u003e2</ td\u003e </ tr\u003e </ stôl\u003e

1

2

Výsledok:

Rozloženie tabuľky s tromi stĺpcami

Existuje koncept pevného alebo „plynulého“ usporiadania.

Opravené rozloženie CSS

• Použitím pevné rozloženie šírka celej tabuľky je nastavená v pixeloch, a potom bude mať tabuľka bez ohľadu na rozlíšenie monitora a okna prehľadávača vždy rovnakú šírku.
• V tomto prípade mala by sa tiež opraviť šírka zvyšných stĺpcov.
• Nemôžete určiť šírku jednej bunky, potom sa automaticky vypočí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žite pevné rozloženie tabuľky:

• ľavý stĺpec - 150 pixelov;
• stredný stĺpec - 400 pixelov;

Výkon:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "správne"\u003e3</ td\u003e </ tr\u003e </ stôl\u003e

1

2

3

Výsledok:

Gumové rozloženie

• Šírka stola pri použití „gumového“ prevedenia nastavená v% šírky okna prehliadača... Takže pri zmene okna prehliadača sa zmení aj veľkosť tabuľky.
• Šírka všetkých buniek možno inš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 vizuálne oddeľte stĺpce orámovaním.

Výkon:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "správne"\u003e3</ td\u003e </ tr\u003e </ stôl\u003e

1

2

3

Výsledok:

Zvážte druhú možnosť, keď prehliadač automaticky vyberie šírku stredového stĺpca; príkladom je obrázok:

Príklad: vytvorte šablónu stránky s tromi stĺpcami. Použite plynulé rozloženie tabuľky:

• ľavý stĺpec - 150 pixelov;
• stredný stĺpec - 40%;
• pravý stĺpec - 200 pixelov;

Nastavte pozadie stĺpcov a vizuálne oddeľte stĺpce orámovaním.

Výkon:

</ hlava\u003e <telo\u003e <tabuľka id \u003d "maket" cellspacing \u003d "0"\u003e <tr\u003e <td id \u003d "left"\u003e1</ td\u003e <td id \u003d "central"\u003e2</ td\u003e <td id \u003d "správne"\u003e3</ td\u003e </ tr\u003e </ stôl\u003e

1

2

3

Výsledok:
Výsledok bude približne rovnaký, dôjde len k „natiahnutiu“ kvôli centrálnemu stĺpu.

Použitie vnorenej tabuľky v prehľadnom usporiadaní

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 má 200 pixelov a zvyšné stĺpce majú 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ť sa nastaví v percentách.

• Pôvodná tabuľka je vytvorená z dvoch buniek. Šírka tabuľky je nastavená v percentách.
• Pre ľavú bunku (prvý stĺpec) je nastavená šírka v pixeloch.
• Šírka pravej bunky (základ pre ďalšie reproduktory) nešpecifikované... Do tejto bunky je vložená druhá tabuľka, ktorá sa tiež skladá z dvoch buniek.
• Šírka buniek vnorenej tabuľky je nastavená v percentách.
• Šírka vnútornej tabuľky musí byť nastavená na 100 percentaby táto tabuľka zaberala všetko voľné miesto 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žite plynulé rozloženie s vnorenou tabuľkou:

• ľavý stĺpec - 150 pixelov;
• stredný stĺpec - 60%;
• pravý stĺpec - 40%;

Nastavte pozadie pre stĺpce.

Výkon:

a (príklad 4).

Príklad 4. Vytvorenie zebry

1 2 3 Tu sú povinné atribúty značiek cellpadding a cellspacing, aby medzi tabuľkami nevznikla „medzera“. Výsledok: Mnoho správcov webu sa domnieva, že použitie tabuliek HTML v šablónach je nesprávnym postupom. Ale v tomto výučbe sa budeme venovať iba tabuľkám CSS. Aký je rozdiel medzi tabuľkami HTML a CSS? Musím používať tabuľky CSS? Ak áno, ako? Ako vytvoriť tabuľku CSS Model tabuľky CSS je založený na modeli tabuľky HTML4 a prehľadávače ho dobre podporujú. V obidvoch modeloch existuje štruktúra tabuľky paralelne s vizuálnou prezentáciou. Hlavnými prvkami konštrukcie sú reťazce. Riadok je definovaný výslovne a stĺpce závisia od toho, ako sú definované riadky a bunky. Pravdepodobne ste už s tabuľkami HTML pracovali. Ak je to tak, potom nebudete mať problém s vytváraním tabuliek CSS. Každý prvok tabuľky HTML má ekvivalent CSS. Jediný rozdiel je v tom, že vo variante CSS nie je rozdiel medzi td a th. Ďalej je uvedený zoznam prvkov tabuľky HTML a ich zodpovedajúcich hodnôt CSS. Table (display: table) tr (display: table-row) thead (display: table-header-group) tbody (display: table-row-group) tfoot (display: table-footer-group) col (display: table- stĺpec) colgroup (display: table-column-group) td, th (display: table-cell) caption (display: table-caption) Titulky je možné umiestniť do hornej alebo dolnej časti tabuľky pomocou vlastnosti na titulnej strane: #caption (titulná strana: horná) #caption (titulná strana: spodná) Nie je ťažké uhádnuť, ako vytvoriť tabuľku CSS na základe vyššie uvedeného zoznamu. Tu je príklad tabuľky. #table (display: table;) .row (display: table-row;) .cell (display: table-cell;) Ak sa pozriete na HTML kód príkladu, môžete ľahko rozlíšiť štruktúru tabuľky (pomocou prvkov div a span s triedami a ID namiesto tabuliek, td a tr). Pri veľmi malom počte CSS sa prvky div a span zobrazujú ako tabuľka. Okrem vyššie uvedených vlastností model tabuľky CSS obsahuje hodnotu vloženej tabuľky, ktorá definuje novú tabuľku ako display: table, ale v kontexte vloženého formátu HTML. Stĺpce a ich zoskupenie Pretože bunky tabuľky sú potomkami riadkov tabuľky, má zmysel použiť niektoré vlastnosti na vytvorenie stĺpcov. Model tabuľky CSS umožňuje použiť na stĺpce a ich zoskupenie nasledujúce vlastnosti: hranica - spoločná vlastnosť, pokiaľ sa vlastnosť border-collapse nepoužije pre prvok tabuľky; pozadie - obvyklá vlastnosť, zatiaľ čo riadok a bunka majú priehľadné pozadie; šírka - nastavenie šírky stĺpca; viditeľnosť - ak je nastavené zbalenie (jediná dostupná hodnota), potom sa bunka stĺpca nebude zobrazovať (je zlúčená s ostatnými stĺpcami a šírka tabuľky je zarovnaná). Stoh tabuľky CSS Rôzne prvky tabuľky majú v zásobníku rôzne úrovne, čo umožňuje použitie rôznych pozadí v rôznych vrstvách. Tieto vrstvy sú zobrazené na obrázku nižšie. tabuľka je najnižšia vrstva skupina stĺpcov stĺpce skupina riadkov struny bunky - najvyššia vrstva Pozadie vrstvy bude viditeľné, iba ak má vrstva hore priehľadné pozadie. Je to vynikajúci spôsob, ako vykresliť prázdne bunky skutočne prázdnymi, a to tak, že pomocou priehľadného pozadia zobrazíte riadok, stĺpec alebo tabuľku. Algoritmus šablóny tabuľky Šírku tabuľky CSS možno vypočítať pomocou jedného z dvoch algoritmov. Algoritmus sa vyberá pomocou vlastnosti rozloženia tabuľky a dvoch hodnôt: opravený(pevná) - šírka šablóny nie je určená obsahom, ale nastavením šírky tabuľky, buniek, rámov a vzdialenosti medzi bunkami; auto (automaticky) - šírka tabuľky sa nastavuje na základe šírky stĺpcov a okrajov. Model pevnej šablóny sa počíta raz a je veľmi rýchly. A automatický režim (predvolený) vyžaduje viacnásobné prechádzanie tabuľkou HTML. Ak výslovne definujete šírku tabuľky, mali by ste použiť model výpočtu pevnej šírky. V predvolenom nastavení je výška bunky nastavená na minimum potrebné na zobrazenie obsahu. Môžete však výslovne definovať výšku bunky. Všetky bunky v riadku budú mať výšku bunky s maximálnou hodnotou. Vlastnosť vertical-align určuje zarovnanie obsahu na riadku základná čiara dole stredný podradený, super, horný text, spodný text,<длина>, <процент> Posledná skupina hodnôt sa použije nie na bunky, ale na text v nich. Bunky sa v tomto prípade zarovnajú podľa základnej hodnoty. Rámy tabuliek CSS Orámovanie tabuľky má tri zaujímavé vlastnosti: kolaps hraníc - môžu byť zbalené, oddelené alebo zdedené medzery medzi riadkami - môže to mať význam<расстояние_по_горизонтали>, <расстояние_по_вертикали>, alebo dediť. Určuje vzdialenosť medzi rámcami buniek. prázdne bunky - možno ukázať, skryť alebo zdediť. Ak je bunka prázdna alebo má vlastnosť viditeľnosť: skrytá, potom sa obsah predvolene nezobrazí. Nastavenie vlastnosti empty-cells: show zobrazí pozadie a orámovanie prázdnej bunky. Musím používať tabuľky CSS? Sú tabuľky CSS lepšie ako tabuľky HTML? Ak áno, aké sú ich výhody? Ak nie, prečo by sa nemali používať? Dobré otázky bez jednoznačnej odpovede. Pri pohľade na použitie tabuliek HTML oproti kombinácii prvkov divs a kódu CSS sa objavujú nasledujúce nevýhody tabuliek: Dodatočné kódovanie - Tabuľky HTML vyžadujú v porovnaní s prvkami div ďalšie kódovanie štruktúry. Tabuľky CSS však tiež vyžadujú ďalšie triedy a identifikátory. Tuhá štruktúra - Tabuľky HTML sú veľmi pevne spojené s obsahom. Poradie buniek by malo byť rovnaké, ako bude zobrazené. Rovnaké obmedzenie ale platí pre CSS / Výstup v prehliadačoch - prehliadače uskutočňujú niekoľko prechodov cez štruktúru tabuliek HTML. Situácia bude ale podobná aj pre tabuľky CSS. Ako bolo uvedené vyššie, tabuľky CSS nemajú výrazné výhody oproti tabuľkám HTML, ak sa používajú v šablónach. Tabuľky CSS sú sémantickejšie, pretože existuje jasné oddelenie dátovej štruktúry a prezentácie. Záver Tabuľky CSS sa ľahko učia a používajú. Ale oproti HTML tabuľkám nemajú jasnú výhodu, s výnimkou sémantickejšieho kódu. Možno prax ukáže výhody alebo nevýhody tabuliek CSS. Máte skúsenosti s používaním tabuliek CSS v reálnych projektoch? Tabuľky sú často používaným prvkom na prezentáciu rôznych údajov v prezentáciách, prednáškach, letákoch a ďalších. Vďaka svojej prehľadnosti, všestrannosti a jednoduchosti sa tabuľky často používajú aj na stránkach, aby čitateľom lepšie sprostredkovali potrebný materiál. Keď do tabuliek pridáte všetku silu štýlov, môžete veľmi úspešne zapadnúť tabuľky do dizajnu webu a jasne a nádherne prezentovať tabuľkové údaje. Šírka stola Šírku tabuľky predvolene nastavuje prehliadač nezávisle na základe množstva údajov tabuľky v nej. Ak je v bunkách veľa textu, potom bude tabuľka zaberať celú šírku, ktorá je pre ňu k dispozícii, a ak nie je dostatok textu, šírka tabuľky sa automaticky zmenší. Ak je na stránke niekoľko tabuliek, vyzerajú niekedy ich rôzne šírky nedbalo. Najlepšie je teda výslovne nastaviť šírku tabuľky v percentách, pixeloch, em alebo v akejkoľvek inej jednotke CSS, ako je uvedené v príklade 1. Príklad 1. Šírka tabuľky v percentách Tabuľka (šírka: 100%;). Tbl-stredná (šírka: 60%;). Tbl-malá (šírka: 200px;) V tomto príklade sa na všetky tabuľky použije šírka 100%. Triedy opäť pomáhajú nastaviť šírku vybraných tabuliek pomocou predtým vytvorenej triedy. Ak chcete určiť šírku tabuľky 200 pixelov, pridajte do prvku trieda tbl-malá. Zarovnávanie tabuliek Spočiatku sa ľubovoľná tabuľka nachádza na ľavom okraji okna prehľadávača. Môžete ho zarovnať do stredu, pokiaľ tabuľka nezaberá celú dostupnú plochu, inými slovami, menej ako 100%. Ak to chcete urobiť, pridajte do štýlu tabuľky zarážky prostredníctvom vlastnosti margin s automatickou hodnotou, ako je to znázornené v príklade 2. Príklad 2. Zarovnanie tabuľky pomocou okrajov ... V tomto príklade sú všetky tabuľky na stránke zarovnané na stred. Farba pozadia Farba pozadia všetkých buniek tabuľky súčasne sa nastavuje prostredníctvom vlastnosti pozadia, ktorá sa aplikuje na selektor tabuľky. Pri tom by ste si mali pamätať pravidlá používania štýlov, najmä dedenie vlastností prvkov. Ak súčasne s tabuľkou nastavíte farbu selektora td alebo th, bude nastavená ako pozadie (príklad 3). Príklad 3. Farba pozadia Typ pripojenia Šachta Rukáv zadarmo H9 D10 Normálne N9 Ja s9 Husté P9 Výsledok tohto príkladu je znázornený na obr. jeden. Obrázok: 1. Zmeňte farbu pozadia Ak potrebujeme urobiť zebru - toto je názov striedajúcich sa čiar rôznych farieb, mali by sme použiť: n-dieťa pseudo-triedu a pridať ju do selektora tr. Aby sa zebra rozšírila iba k telu tabuľky, a nie k jej hlavičke, oddelíme ich od seba pomocou prvkov

Intervaly veľkostí, mm	IT tolerancia, mikrónov, za kvalitu
	5	6	7	8
Do 3	4	6	10	14
3. až 6. sv	5	8	12	18
6. až 10. sv	6	9	15	22
10. až 18. sv	8	11	18	27
18. až 30. sv	9	13	21	33
Sv. 30 až 50	11	16	25	39
Sv. 50 až 80	13	19	30	46

Výsledok tohto príkladu je znázornený na obr. 2.

Obrázok: 2. Zebra

Sudá hodnota selektora: n -teho potomka použije štýl na všetky párne čiary a nastaví ich farbu pozadia. Môžete to tiež zmeniť na nepárne, potom budú nepárne čiary zvýraznené sivou farbou.

Rovnako nie riadky, ale stĺpce sú farebne zvýraznené, preto by ste mali použiť selektor tbody td: nth-child (párny).

Okraje v bunkách

Pole je vzdialenosť medzi ohraničením bunky a jej obsahom. Bez okrajov sa text v tabuľke „prilepí“ k rámu, čím sa zhorší jeho vnímanie, zatiaľ čo pridanie okrajov zlepší čitateľnosť textu. Na tento účel sa používa vlastnosť padding style, ktorá pracuje s voličom td alebo th, ako je uvedené vyššie v príkladoch 3 a 4. Zvyčajne je zadaná jedna hodnota, ktorá potom nastaví prázdne miesto okolo obsahu bunky zo všetkých strán naraz. Dve hodnoty sa zapíšu, keď je potrebné nastaviť rôzne polia zvisle (prvá hodnota) a vodorovne (druhá hodnota).

Vzdialenosť medzi bunkami

Medzi bunkami je malé prázdne miesto, ktoré nie je viditeľné, kým pre bunky nenastavíte farbu orámovania alebo pozadia. Táto medzera je na začiatku 2 pixelov a dá sa zmeniť pomocou vlastnosti medzery medzi bunkami pridaním do selektora tabuľky (príklad 5).

Príklad 5. Použitie medzery medzi okrajmi

Tabuľka (medzery: 3px; / * medzery medzi bunkami * /) thead th (pozadie: # e08156; / * farba pozadia hlavičky * / farba: # 333; / * farba textu * /) td, th (polstrovanie: 5px ; / * Polia v bunkách * / pozadie: # 4c715b; / * Farba pozadia buniek * / farba: # f5e8d0; / * farba textu * /)

Pridaním tohto štýlu do ľubovoľnej tabuľky získate výsledok uvedený na obr. 3.

Obrázok: 3. Pohľad na tabuľku so vzdialenosťou medzi bunkami

Ak je do tabuľky pridaná vlastnosť kolapsu ohraničenia s hodnotou kolapsu, potom je rozloženie medzi hranicami ignorované, pretože medzi bunkami už nie je žiadna vzdialenosť.

Hranice a rámy

Na zreteľné oddelenie obsahu jednej bunky od druhej sú do buniek pridané okraje. Za ich vytvorenie je zodpovedná vlastnosť border style, ktorá sa aplikuje na prvky ( alebo ). Tu na nás však číhajú nástrahy. Pretože je rám vytvorený pre každú bunku, v miestach dotyku buniek sa získa orámovanie s dvojnásobnou hrúbkou. Existuje niekoľko spôsobov, ako túto funkciu vylúčiť. Najjednoduchšie je použiť vlastnosť border-collapse s hodnotou collaps. Jeho úlohou je sledovať kontakt liniek a namiesto dvojitého ohraničenia zobraziť jednu. Túto vlastnosť stačí pridať do selektora tabuľky a potom bude všetko robiť samo (príklad 6).

Príklad 6. Aplikácia vlastnosti border-collapse na vytvorenie okrajov tabuľky

O	X	X
O	O	X
X	X	O

Rozdiel medzi hranicami tabuľky s vlastnosťou border-collapse a bez nej je zobrazený na obr. 4.

Obrázok: 4. Tabuľkové zobrazenie pri použití zbalenia okraja

Na obr. 4a zobrazuje predvolený rámec tabuľky. Upozorňujeme, že v rámci tabuľky sú všetky riadky dvojnásobnej šírky. Pridaním zbalenia okraja sa táto funkcia odstráni a hrúbka všetkých čiar sa stane rovnakou (obrázok 4b).

Čiary sa nemusia robiť pre všetky strany buniek, podľa vzoru môžu oddeliť jeden riadok alebo stĺpec od druhého. Použijeme na to vlastnosti border-bottom, border-left a podobné. Použite orámovanie na prvky , , a nie, preto ich pridáme do selektorov tabuľky a td (príklad 7).

Príklad 7. Čiary medzi riadkami

Typ pripojenia	Polia tolerancie šírky drážky
	Šachta	Rukáv
zadarmo	H9	D10
Normálne	N9	Ja s9
Husté	P9

Výsledok tohto príkladu je znázornený na obr. 5.

Obrázok: 5. Stôl s vodorovnými čiarami

Predvolene je text v bunke tabuľky zarovnaný doľava a vycentrovaný. Výnimkou je prvok , definuje bunku hlavičky, v ktorej je zarovnanie vycentrované. Ak chcete zmeniť zarovnanie, použite vlastnosť štýlu zarovnania textu (príklad 8).

Príklad 8. Zarovnanie obsahu buniek vodorovne

Nadpis 1	Bunka 1	Bunka 2
Nadpis 2	Bunka 3	Bunka 4

V tomto príklade obsah je zarovnaný doľava a obsah - v centre. Výsledok príkladu je uvedený nižšie (obr. 6).

Obrázok: 6. Zarovnanie textu v bunkách

Vertikálne zarovnanie v bunke je vždy vycentrované, pokiaľ nie je uvedené inak. To nie je vždy vhodné, najmä pre tabuľky, v ktorých sa obsah buniek líši výškou. V tomto prípade je zarovnanie nastavené na hornú časť bunky pomocou vlastnosti vertikálneho zarovnania nastavenej na vrch, ako je to znázornené v príklade 9.

Príklad 9. Zarovnanie obsahu buniek vertikálne

Typ pripojenia	Polia tolerancie šírky drážky
	Šachta	Rukáv
zadarmo	H9	D10
Normálne	N9	Ja s9
Husté	P9

V tomto príklade je text zarovnaný hore. Výsledok príkladu je znázornený na obr. 7.

Predvolené štýly prehľadávača zobrazujú tabuľku a jej bunky bez viditeľných okrajov alebo pozadia a bunky v tabuľke nie sú navzájom susediace. Pomocou štýlov CSS môžete tabuľku krásne upraviť podľa jej obsahu.

Tabuľky rozmiestnenia riadkov vám pomôžu zamerať sa na súvisiace informácie umiestnené v rovnakom riadku tabuľky, ale v susedných bunkách. Aby sme oddelili text od obrázka, umiestnime ho do inej bunky, pričom dve bunky zlúčime do hlavičky tabuľky Model a odstráňte pravý okraj medzi bunkami.

Označenie HTML

Štýly CSS

stôl (
rozmiestnenie okrajov: 0 10px;
font-family: "Open Sans", sans-serif;
váha písma: tučné;
}
th (
výplň: 10px 20px;
pozadie: # 56433D;
farba: # F9C941;
border-right: 2px solid;
veľkosť písma: 0,9em;
}
th: prvé dieťa (
zarovnanie textu: doľava;
}
th: posledné dieťa (
border-right: none;
}
td (
vertical-align: stred;
výplň: 10px;
veľkosť písma: 14px;
zarovnanie textu: na stred;
horný okraj: 2px pevný # 56433D;
spodný okraj: 2px pevný # 56433D;
ohraničenie vpravo: 2px plné # 56433D;
}
td: prvé dieťa (
ľavý okraj: 2px plné # 56433D;
border-right: none;
}
td: n-te dieťa (2) (
zarovnanie textu: doľava;
}

Pomocou tejto techniky môžete efektívne vyzdobiť stôl kontrastnými farbami, ktoré harmonicky zapadajú do farebnej schémy vášho webu.

Označenie HTML

Spoločnosť	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Štýly CSS

stôl (

veľkosť písma: 14px;
border-collaps: collaps;
zarovnanie textu: na stred;
}
th, td: prvé dieťa (
pozadie: # AFCDE7;
farba: biela;
výplň: 10px 20px;
}
th, td (
hraničný štýl: pevný;
šírka okraja: 0 1px 1px 0;
farba okraja: biela;
}
td (
pozadie: # D8E6F3;
}

zarovnanie textu: doľava;
}

Pridaním vlastnosti border-radius do špecifikácie CSS3 je teraz možné zaobliť rohy stola bez použitia obrázkov na pozadí. Aby ste dosiahli tento efekt, musíte zaobliť rohy zodpovedajúcich buniek.

Označenie HTML
- podobne ako v príklade 2.

Štýly CSS

stôl (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veľkosť písma: 14px;
polomer okraja: 10px;
medzery medzi okrajmi: 0;
zarovnanie textu: na stred;
}
th (
pozadie: #BCEBDD;
farba: biela;
tieň textu: 0 1px 1px # 2D2020;
výplň: 10px 20px;
}
th, td (
hraničný štýl: pevný;
šírka okraja: 0 1px 1px 0;
farba okraja: biela;
}
th: first-child, td: first-child (
zarovnanie textu: doľava;
}
th: prvé dieťa (

}
th: posledné dieťa (

border-right: none;
}
td (
výplň: 10px 20px;
pozadie: # F8E391;
}
tr: posledné dieťa td: prvé dieťa (
polomer ohraničenia: 0 0 0 10px;
}
tr: posledné dieťa td: posledné dieťa (
polomer ohraničenia: 0 0 10px 0;
}
tr td: posledné dieťa (
border-right: none;
}

4. Tabuľka so samostatnými bunkami

Označenie HTML

- podobne ako v príklade 2.

Štýly CSS

stôl (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
zarovnanie textu: doľava;
kolaps hranice: samostatný;
rozmiestnenie okrajov: 5px;
pozadie: # ECE9E0;
farba: # 656665;
orámovanie: 16px plné # ECE9E0;
polomer okraja: 20px;
}
th (
veľkosť písma: 18px;
výplň: 10px;
}
td (
pozadie: # F5D7BF;
výplň: 10px;
}

Označenie HTML

Moje pracovné týždne, marec 2015
Pondelok	Utorok	Streda	Štvrtok	Piatok
2	3	4	5	6
9	10	11	12	13
16	17	18	19	20
23	24	25	26	27
30	31

Štýly CSS

stôl (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
zarovnanie textu: na stred;
border-collaps: collaps;
rozmiestnenie okrajov: 5px;
pozadie: # E1E3E0;
polomer okraja: 20px;
}
th (
veľkosť písma: 22px;
váha písma: 300;
výplň: 12px 10px;

farba: # F56433;
}
tbody tr: nth-child (2) (
spodný okraj: 2px pevný # F56433;
}
td (
výplň: 10px;
farba: # 8D8173;
}

Označenie HTML

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

Štýly CSS

stôl (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veľkosť písma: 14px;
zarovnanie textu: doľava;
border-collaps: collaps;
polomer okraja: 20px;
tieň boxu: 0 0 0 10px # F2906B;
farba: # 452F21;
}
th (
výplň: 10px 8px;
pozadie: biele;
}
tabuľka th: prvé dieťa (
polomer ohraničenia zľava hore: 20 pixelov;
}
tabuľka th: posledné dieťa (
polomer ohraničenia vpravo hore: 20px;
}
td (
horný okraj: 10px plná # F2906B;
výplň: 8px;
pozadie: biele;
}
tabuľka td: prvé dieťa (
polomer ohraničenia-zľava-zľava: 20px;
}
tabuľka td: posledné dieťa (
polomer ohraničenia vpravo dole: 20px;
}

Vertikálny zebrový vzor v dizajne tabuľky zvýrazní stĺpce a efekt vznášania sa nad riadkom dodá takejto tabuľke atraktivitu.

Označenie HTML

	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Štýly CSS

stôl (
medzery medzi okrajmi: 0;
prázdne bunky: skryť;
}
td (
výplň: 10px 20px;
zarovnanie textu: na stred;

prechod: všetkých 0,5 s lineárne;
}
td: prvé dieťa (
zarovnanie textu: doľava;
farba: # 3D3511;
váha písma: tučné;
}
th (
výplň: 10px 20px;
farba: # 3D3511;
spodný okraj: 1px pevný # F4EEE8;
polomer ohraničenia zľava hore: 10px;
polomer ohraničenia vpravo hore: 10px;
}
td: n -te dieťa (párne) (
pozadie: # F6D27E;
}
td: n -te dieťa (nepárne) (
pozadie: # D1C7BF;
}
th: n-te dieťa (párne) (
pozadie: # F6D27E;
}
th: n-te dieťa (nepárne) (
pozadie: # D1C7BF;
}
.okruhový vrchol (
polomer ohraničenia zľava hore: 5px;
}
.zemné dno (
polomer ohraničenia-zľava-zľava: 5px;
}
tr: hover td (
pozadie: # D1C7BF;
váha písma: tučné;
}

Označenie HTML

Štýly CSS

stôl (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collaps: collaps;
farba: # 686461;
}
titulok (
výplň: 10px;
farba: biela;
pozadie: # 8FD4C1;
veľkosť písma: 18px;
zarovnanie textu: doľava;
váha písma: tučné;
}
th (
spodný okraj: 3px pevný # B9B29F;
výplň: 10px;
zarovnanie textu: doľava;
}
td (
výplň: 10px;
}
tr: n-dieťa (nepárne) (
pozadie: biele;
}
tr: n -te dieťa (párne) (
pozadie: # E8E6D1;
}

Označenie HTML

Komédia	Dobrodružstvo	Akcia	Deti
Strašidelný film	Indiana jones	Trestateľ	Wall-E
Výpravný film	Hviezdne vojny	Zlí chlapci	Madagaskar
Sparťanský	LOTR	Zomri tvrdo	Hľadá sa Nemo
DR. Dolittle	Múmia	300	Život chrobáka

Štýly CSS

Table_col (
rodina fontov: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
veľkosť písma: 14px;
šírka: 660px;
pozadie: biele;
zarovnanie textu: doľava;
border-collaps: collaps;
farba: # 3E4347;
}
.table_col th: first-child, .table_col td: first-child (
farba: # F5F6F6;
ľavá hranica: žiadna;
}
.tabuľka_col (
váha písma: normálne;
spodný okraj: 2px pevný # F5E1A6;


výplň: 8px 10px;
}
.table_col td (
border-right: 20px solid white;
okraj zľava: 20 pixelov nepriehľadná biela;
výplň: 12px 10px;
farba: # 8b8e91;
}

Označenie HTML

Spoločnosť	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Štýly CSS

Table_blur (
pozadie: # f5ffff;
border-collaps: collaps;
zarovnanie textu: doľava;
}
.tabuľka_blur th (
horný okraj: 1px pevný # 777777;

tieň boxu: vložka 0 1px 0 # 999999, vložka 0 -1px 0 # 999999;
pozadie: linear-gradient (# 9595b6, # 5a567f);
farba: biela;
výplň: 10px 15px;
poloha: relatívna;
}
.tabuľka_blur th: after (
obsah: „“;
displej: blok;
pozícia: absolútna;
vľavo: 0;
vrchná časť: 25%;
výška: 25%;
šírka: 100%;
pozadie: linear-gradient (rgba (255, 255, 255, 0), rgba (255,255,255, 0,08));
}
.table_blur tr: n -te dieťa (nepárne) (
pozadie: # ebf3f9;
}
.tabuľka_blur th: prvé dieťa (
ľavé orámovanie: 1px plná # 777777;
spodný okraj: 1px pevný # 777777;
tieň boxu: vložka 1px 1px 0 # 999999, vložka 0 -1px 0 # 999999;
}
.tabuľka_blur th: posledné dieťa (
ohraničenie vpravo: 1px plná # 777777;
spodný okraj: 1px pevný # 777777;
tieň boxu: vložka -1px 1px 0 # 999999, vložka 0 -1px 0 # 999999;
}
.tabuľka_blur td (
orámovanie: 1px pevné # e3eef7;
výplň: 10px 15px;
poloha: relatívna;
prechod: všetko 0,5 s;
}
.table_blur tbody: hover td (
farba: priehľadná;
textový tieň: 0 0 3px # a09f9d;
}
.table_blur tbody: hover tr: hover td (
farba: # 444444;
tieň textu: žiadny;
}