CSS: stolní provedení. Příklady zápisu

Tvorba tabulky s CSS - lekce zajímavé a zodpovědné. Přístup k této činnosti je třeba kvalifikovaně se znalostí všech možných stylů. Kromě toho je třeba mít smysl pro krásu, aby nebyly zastrašit off svou kreativitu návštěvníků.

Tabulky mohou proměnit téměř vše. Krásný design zahrnuje použití CSS tabulkami konstrukčních hranic, stolní pozadí, pozadí buňky, mezery mezi nimi a další. Vezměme si nejzákladnější.

table border

CSS Design styl tabulky vždy jedná o hru s ohraničením (snímek). Všechny výchozí tabulky nejsou kontury rámu. To znamená, že je rovna 0 pixelů. Ale to může být opraveny hranici pozemku.

Můžete určit vnější rámec pro celou tabulku:

Tabulka {border: 3PX černě; }

Díky této lince na všech tabulek na webu, který používá tento styl je černý rámeček. Všimněte si, že hranice pouze na okrajích, ale ne uvnitř tabulky. U buněčných linií a rámem uvedeno jinak.

th, td {border: 3PX černě;}

Tloušťka a barvy, můžete zadat jakýkoliv. Mějte na paměti, že hranice nejsou zdvojnásobil, když sestřihem buňky.

Slovo označuje pevnou kontinuální registraci. Můžete zadat jiné hodnoty.

to je nejvíce běžně používaný pevný rám, jak to vypadá více atraktivní a nerozptyluje pozornost od hlavního obsahu webu.

border vlastnost lze zadat také na palubě. Hranici lze nastavit pouze pro horní, dolní, levé nebo pravé straně. Protože v některých případech není vhodné řešení s rámem pro celou tabulku najednou.

Tabulka {border-top: 1px svítí červeně; }

Takže si můžete nastavit rámec pro začátek pouze tabulky. Podobně jako u jakékoliv jiné strany, namísto toho jen horní psát: vpravo, vlevo nebo dole.

záhlaví tabulky

záhlaví tabulky lze zadat pomocí tagu . Tato značka může být v CSS zaregistrovat spoustu vlastností pro dolaďování. Design CSS tabulky je dobré, protože to je možné manévrovat elementů tak, jak chcete.

Tento název se zobrazí stejným způsobem jako standard v knihách (například „tabulka 1“).

Můžete zadat umístění titulu a majetku titulek straně (horní nebo dolní). Zarovnání doleva nebo doprava je definována vlastnost text-align.

stoly pozadí

Dosavadní stav tabulce mohou mít jakoukoliv barvu nebo vzor. Barva nastavuje vlastnost background-color. Názvy vlastností plně v souladu s použití v řeči. To usnadňuje ukládání mnohokrát.

Barva může být zadán jako název a různých kódování. Kromě toho můžete zadat následující:

• Transparent - transparentní.
• Dědí - barva je stejná jako u rodičovského elementu.
• Počáteční - default.

Varianta s transparentností lze použít v těch případech, kdy jsou všechny tabulky v textu v souboru CSS jsou vyrobeny v jedné barvě, ale v tomto případě není nutné.

Kromě toho, na pozadí může být obraz. K tomu, v šabloně předepsána background-image majetku. Cesta je takhle:

url ( 'URL')

Cesta k souboru může být buď relativní nebo absolutní.

Složitější výplň může být provedeno s gradientem:

• lineární gradient ();
• radiální gradient ();
• opakujících se lineárního gradientu () a opakujících se radiální gradientu () - gradientu opakuje.

background cell

Kromě pozadí obecně, můžete určit prokládané pozadí v sloupců nebo řádků. Pro registraci nemovitostí se používá velmi často, protože vizuální oddělení linek čitelnější informace.

Kromě střídání, a můžete zadat číslo určitého sloupce nebo řádku. Například takto:

• tr: nth-child (i) {...} - specifikovat prokládaný;
• tr: n-tého děti (1) {...} - údaj o vlastnostech konkrétní řadě;
• td: nth-child (i) {...} - údaj ze střídajících se sloupcích;
• td: n-tého děti (1) {...} - údaj o vlastnostech určitého sloupce.

Kromě sekvence a čísla mohou být uvedeny - první (td: první dítě), nebo jako poslední (td: last-child).

Mezera mezi buňkami

CSS, stolní provedení umožňuje odstranit mezery mezi buňkami. Ve výchozím nastavení jsou. Například pokud nastavíte rámeček v tabulce bez nastavování vzdálenost mezi hranicemi, bude zde tento výsledek.

Souhlasíte s tím, zdá se, že není moc hezké a není vhodné ke čtení. Uživatelé budou mít zvlnění v očích, protože toto. Odstranění těchto nedostatků může být tím, že píše právě takovou čáru ve stylu tabulky:

border-collapse: kolaps

Ale také se stává, že vzdálenost, naopak by měla být zvýšena. Kromě toho je velikost mezer může být specifikováno jako mezi sloupy a mezi řádky. Pro indikaci, že hodnota (místo kolaps):

border-collapse: samostatná

Ale takový krok bude znamenat, že je nutné oddělit buňky. Jak to bylo jejich podíl, je uvedeno další vlastnost:

border-spacing: 20px.

Chcete-li zadat jinou vzdálenost mezi řádky a sloupce, znamená to, že dvě věci:

border-spacing: 10px20px.

Rozdíl v prohlížečích

Mějte na paměti, že v CSS může designové stoly vypadat jinak v závislosti na prohlížeči. Zvlášť špatná je tomu u starších verzí, že inovace v CSS není podporován.

Výše uvedený příklad tloušťky rámu na digitální hodnoty.

V tomto příkladu je tloušťka rámů pro konstanty.

styly ohraničení také velmi liší.

Proto je vývoj vždy vidět výsledek v různých prohlížečích.

CSS Konstrukční tabulky doporučujeme zkontrolovat typ prohlížeče. Zvláště velký problém býval pro uživatele se staršími verzemi aplikace Internet Explorer.

Velmi pokročilé vývojáři mohou v závislosti na prohlížeči pro připojení zcela odlišné soubory CSS. A někdo dělá kontrolu v každém nebo nějakou zvláštní styl (třída).

Většina problémy vznikají ze stínu.

CSS: Formát Tabulka Příklady

Registrace může být velmi pestrá. To vše záleží na celém webu a jeho designu. Všichni by měli být kombinovány a pestré barvy. Také to dělá velkou roli i chuť developer. Smysl pro krásu je všechno jinak.

Dáme několik příkladů různých tabulek. Výše uvedený obrázek ukazuje použití náklonu a hrát si s barvou pozadí a okraj.

Mnozí budou Zajímavým příkladem krásné úhledným designem, který nebude snížit uživatele oko. Toto provedení je vhodné v téměř každé situaci.

Hrany mohou být zaoblené. Vypadá to docela pěkné.

závěr

Jak vidíte, na vzhledu tabulek v CSS existuje mnoho nástrojů. Každý parametr je také obrovské množství možností hodnoty. Pokud si to všechno použít najednou, můžete vytvořit mistrovské dílo. Zvlášť pokud děláte adaptivní konstrukce pro všechny prohlížeče.

Hlavní věc v designu - nepřehánějte to s efekty. Vše by mělo být provedeno s mírou. Zpočátku rozložení rádi experimentují a okamžitě použít všechny své znalosti. Jako výsledek této tabulce jsou přesycené vlastnosti. Snažte se vyhnout těmto chybám.

Kromě toho, některé parametry se mohou vzájemně ovlivňovat. Například, není třeba specifikovat barvu pozadí tabulky, zatímco v případě, že je stále nastavit obrázek na pozadí, který bude překrývat zadanou barvu.