CSS: stolné prevedenie. Príklady zápisu

Tvorba tabuľky s CSS - lekcie zaujímavé a zodpovedné. Prístup k tejto činnosti je potrebné kvalifikovane so znalosťou všetkých možných štýlov. Okrem toho je potrebné mať zmysel pre krásu, aby neboli zastrašiť off svoju kreativitu návštevníkov.

Tabuľky môžu premeniť takmer všetko. Krásny dizajn zahŕňa použitie CSS tabuľkami konštrukčných hraníc, stolný pozadia, pozadia bunky, medzery medzi nimi a ďalšie. Zoberme si najzákladnejšie.

table border

CSS Design štýl tabuľky vždy jedná o hru s ohraničením (snímka). Všetky východiskové tabuľky nie sú kontúry rámu. To znamená, že je rovná 0 pixelov. Ale to môže byť opravené hranici pozemku.

Môžete určiť vonkajší rámec pre celú tabuľku:

Tabuľka {border: 3PX čierno; }

Vďaka tejto linke na všetkých tabuliek na webe, ktorý používa tento štýl je čierny rámik. Všimnite si, že hranice iba na okrajoch, ale nie vo vnútri tabuľky. U bunkových línií a rámom uvedené inak.

th, td {border: 3PX čierno;}

Hrúbka a farby, môžete zadať akýkoľvek. Majte na pamäti, že hranice nie sú zdvojnásobil, keď zostrihom bunky.

Slovo označuje pevnú kontinuálne registráciu. Môžete zadať iné hodnoty.

to je najviac bežne používaný pevný rám, ako to vyzerá viac atraktívne a nerozptyľuje pozornosť od hlavného obsahu webu.

border vlastnosť možno zadať tiež na palube. Hranicu možno nastaviť iba pre horné, dolné, ľavej alebo pravej strane. Pretože v niektorých prípadoch nie je vhodné riešenie s rámom pre celú tabuľku naraz.

Tabuľka {border-top: 1px svieti červená; }

Takže si môžete nastaviť rámec pre začiatok len tabuľky. Podobne ako u akejkoľvek inej strany, namiesto toho len horná písať: vpravo, vľavo alebo dole.

záhlavie tabuľky

hlavičky tabuľky je možné zadať pomocou tagu . Táto značka môže byť v CSS zaregistrovať veľa vlastností pre dolaďovanie. Design CSS tabuľky je dobré, pretože to je možné manévrovať elementov tak, ako chcete.

Tento názov sa zobrazí rovnakým spôsobom ako štandard v knihách (napríklad "tabuľka 1").

Môžete zadať umiestnenie titulu a majetku titulok strane (hornej alebo dolnej). Zarovnanie doľava alebo doprava je definovaná vlastnosť text-align.

stoly pozadia

Doterajší stav tabuľke môžu mať akúkoľvek farbu alebo vzor. Farba nastavuje vlastnosť background-color. Názvy vlastností plne v súlade s použitia v reči. To uľahčuje ukladanie mnohokrát.

Farba môže byť zadaný ako názov a rôznych kódovanie. Okrem toho môžete zadať nasledovné:

• Transparent - transparentné.
• Dedí - farba je rovnaká ako u rodičovského elementu.
• Počiatočné - default.

Variant s transparentnosťou možno použiť v tých prípadoch, keď sú všetky tabuľky v texte v súbore CSS sú vyrobené v jednej farbe, ale v tomto prípade nie je nutné.

Okrem toho, na pozadí môže byť obraz. K tomu, v šablóne predpísaná background-image majetku. Cesta je takhle:

url ( 'URL')

Cesta k súboru môže byť buď relatívna alebo absolútna.

Zložitejšie výplň môže byť vykonané s gradientom:

• lineárny gradient ();
• radiálne gradient ();
• opakujúcich sa lineárneho gradientu () a opakujúcich sa radiálne gradientu () - gradientu opakuje.

background cell

Okrem pozadia všeobecne, môžete určiť prekladané pozadie v stĺpcov alebo riadkov. Pre registráciu nehnuteľností sa používa veľmi často, pretože vizuálne oddelenie liniek čitateľnejšie informácie.

Okrem striedanie, a môžete zadať číslo určitého stĺpca alebo riadku. Napríklad takto:

• tr: nth-child (i) {...} - špecifikovať prekladaný;
• tr: n-té deti (1) {...} - údaj o vlastnostiach konkrétnej rade;
• td: nth-child (i) {...} - údaj zo striedajúcich sa stĺpcoch;
• td: n-té deti (1) {...} - údaj o vlastnostiach určitého stĺpca.

Okrem sekvencie a čísla môžu byť uvedené - prvá (td: prvé dieťa), alebo ako posledná (td: last-child).

Medzera medzi bunkami

CSS, stolné prevedenie umožňuje odstrániť medzery medzi bunkami. V predvolenom nastavení sú. Napríklad ak nastavíte rámik v tabuľke bez nastavovania vzdialenosť medzi hranicami, bude tu tento výsledok.

Súhlasíte s tým, zdá sa, že nie je moc pekné a nie je vhodné na čítanie. Užívatelia budú mať zvlnenie v očiach, pretože toto. Odstránenie týchto nedostatkov môže byť tým, že píše práve takú čiaru v štýle tabuľky:

border-collapse: kolaps

Ale tiež sa stáva, že vzdialenosť, naopak by sa mala zvýšiť. Okrem toho je veľkosť medzier môže byť špecifikované ako medzi stĺpy a medzi riadkami. Pre indikáciu, že hodnota (miesto kolaps):

border-collapse: samostatná

Ale takýto krok bude znamenať, že je nutné oddeliť bunky. Ako to bolo ich podiel, je uvedené ďalšie vlastnosť:

border-spacing: 20px.

Ak chcete zadať inú vzdialenosť medzi riadky a stĺpce, znamená to, že dve veci:

border-spacing: 10px20px.

Rozdiel v prehliadačoch

Majte na pamäti, že v CSS môže dizajnovej stoly vyzerať inak v závislosti na prehliadači. Zvlášť zlá je tomu u starších verzií, že inovácie v CSS nie je podporovaný.

Vyššie uvedený príklad hrúbky rámu na digitálne hodnoty.

V tomto príklade je hrúbka rámov pre konštanty.

štýly ohraničenia tiež veľmi líšia.

Preto je vývoj vždy vidieť výsledok v rôznych prehliadačoch.

CSS Konštrukčné tabuľky odporúčame skontrolovať typ prehliadača. Zvlášť veľký problém býval pre užívateľov so staršími verziami programu Internet Explorer.

Veľmi pokročilých vývojári môžu v závislosti na prehliadači pre pripojenie úplne odlišné súbory CSS. A niekto robí kontrolu v každom alebo nejakú zvláštnu štýl (trieda).

Väčšina problémy vznikajú z tieňa.

CSS: Formát Tabuľka Príklady

Registrácia môže byť veľmi pestrá. To všetko záleží na celom webe a jeho dizajnu. Všetci by mali byť kombinované a pestré farby. Tiež to robí veľkú úlohu aj chuť developer. Zmysel pre krásu je všetko inak.

Dáme niekoľko príkladov rôznych tabuliek. Vyššie uvedený obrázok ukazuje použitie náklonu a hrať sa s farbou pozadia a okraj.

Mnohí budú Zaujímavým príkladom krásne úhľadným dizajnom, ktorý nebude znížiť užívateľa oko. Toto prevedenie je vhodné v takmer každej situácii.

Hrany môžu byť zaoblené. Vyzerá to celkom pekné.

záver

Ako vidíte, na vzhľade tabuliek v CSS existuje mnoho nástrojov. Každý parameter je tiež obrovské množstvo možností hodnoty. Ak si to všetko použiť naraz, môžete vytvoriť majstrovské dielo. Zvlášť ak robíte adaptívne konštrukcie pre všetky prehliadače.

Hlavná vec v dizajne - nepreháňajte to s efektmi. Všetko by malo byť vykonané s mierou. Spočiatku rozloženie radi experimentujú a okamžite použiť všetky svoje znalosti. Ako výsledok tejto tabuľke sú presýtené vlastnosti. Snažte sa vyhnúť týmto chybám.

Okrem toho, niektoré parametre sa môžu vzájomne ovplyvňovať. Napríklad, nie je potrebné špecifikovať farbu pozadia tabuľky, zatiaľ čo v prípade, že je stále nastaviť obrázok na pozadí, ktorý bude prekrývať zadanú farbu.