CSS: návrh tabulek. Příklady designu

Vytváření tabulek pomocí CSS je zajímavá a zodpovědná činnost. Přístup k tomuto podnikání musí být kompetentní, se znalostí všech možností stylů. Kromě toho musíte mít vlastní pocit krásy, abyste neodstraňovali návštěvníky svou kreativitou.

V tabulkách můžete přeměnit téměř všechno. Krásný design tabulek CSS zahrnuje použití konceptu hranic, pozadí tabulky, pozadí buněk, mezeru mezi nimi a mnohem více. Zvažme nejzákladnější.

Okraj tabulky

Styl designu CSS vždy znamená hraní s hranicí. Všechny tabulky nejsou ve výchozím nastavení ohraničeny. To znamená, že je to 0 pixelů. Ale toto může být opraveno pomocí vlastnosti hranice.

Můžete zadat vnější okraj celé tabulky:

tabulka {border: 3px solid black-}

Díky této řádce budou všechny tabulky na webu, kde je tento styl použita, mít černý okraj. Všimněte si, že okraj je pouze na okrajích, ale ne uvnitř tabulky. U buněk a řádků je rámeček zadán jiným způsobem.

th, td {okraj: 3px solid black-}

Tloušťka a barva mohou být specifikovány. Mějte na paměti, že hranice se při spojování buněk nezvyšují.

Slovo solid znamená pevný design. Můžete zadat další hodnoty.

Nejčastěji se používá pevný rám, protože vypadá atraktivnější a neodvádí pozornost od hlavního obsahu webu.

Vlastnost ohraničení lze také zadat v pokynech. Hranice lze nastavit pouze pro horní, dolní, levou nebo pravou stranu. Vzhledem k tomu, že v některých případech není možnost s rámem pro celou tabulku vhodná najednou.

tabulka {border-top: 1px solid red-}

Takže můžete nastavit rámeček pouze pro horní část tabulky. Podobně, pro všechny ostatní strany, jednoduše namísto horního zápisu: vpravo, vlevo nebo dole.

Název tabulky

Název tabulky lze zadat pomocí značky . Tato značka může být nastavena v CSS mnoha vlastnostech pro jemnější ladění. V CSS je návrh tabulek dobrý, protože můžete manipulovat s prvky, jak chcete.

Tato záhlaví se zobrazuje stejným způsobem jako v knihách standardních (například "Tabulka 1").

Umístění tohoto záhlaví můžete také zadat vlastností na straně titulků (horní nebo dolní). Zarovnání vlevo nebo vpravo je určeno vlastností text-align.

Tabulka pozadí

Pozadí tabulky může být jakákoli barva nebo vzor. Barva je nastavena vlastností barvy pozadí. Názvy vlastností plně odpovídají názvům použitým v řeči. To usnadňuje ukládání do paměti mnohokrát.

Barvu lze zadat buď názvem nebo různými kódy. Kromě toho můžete zadat následující:

• Transparentní - průhlednost prvku.
• Zděděte - barva je stejná jako nadřazený prvek.
• Výchozí hodnota je výchozí hodnota.

Varianta s průhledností může být použita v těch případech, kdy jsou všechny tabulky v textu v souboru CSS vytvořeny v jedné barvě, avšak v tomto případě neexistuje žádná taková potřeba.

Pozadí může být také obrázek. Chcete-li to provést, vlastnost pozadí je nastavena ve stylu. Cesta je označena takto:

url (`URL`)

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

Složitější výplň lze provést s přechodem:

• lineární gradient ();
• radiální gradient ();
• opakující se lineární gradient () a opakující se radiální gradient () - opakování gradientu.

Pozadí buňky

Kromě pozadí jako celku můžete zadat střídavé pozadí ve sloupcích nebo řádcích. Při registraci se tato vlastnost používá velmi často, protože vizuální oddělení řádků usnadňuje čtení informací.

Kromě rotace můžete zadat číslo konkrétního sloupce nebo řádku. Například takto:

• tr: nth-child (sudý) {...} - upřesněte střídání řádků;
• tr: nth-child (1) {...} - určuje vlastnost určitého řetězce;
• td: nth-child (sudý) {...} - údaj o prokládání sloupců;
• td: nth-child (1) {...} - určuje vlastnost konkrétního sloupce.

Kromě prokládání a čísel můžete zadat první (td: first-child) nebo poslední (td: last-child).

Vzdálenost mezi buňkami

V CSS vám návrh tabulek umožňuje odstranit mezery mezi buňkami. Ve výchozím nastavení jsou. Pokud například nastavíte rámeček v tabulce bez nastavení vzdálenosti mezi hranicemi, pak je to výsledek.

Souhlasím, nevypadá moc hezky a není vhodný pro čtení. Uživatelé budou kvůli tomu v očích volán. Tyto mezery můžete odstranit tak, že ve tvaru tabulky uveďte tento řádek:

hranice-sbalit: sbalit

Ale také se stane, že vzdálenost, naopak, je třeba zvýšit. Rozsah intervalů lze specifikovat jak mezi sloupci, tak mezi jednotlivými řádky. Chcete-li to provést, zadejte následující hodnotu (místo sbalení):

hraniční kolaps: oddělené

Tato akce však naznačuje, že musíte oddělit buňky. Jak je oddělit, je označeno další vlastností:

hranice mezery: 20 pixelů.

Pokud chcete zadat jinou vzdálenost mezi řádky a sloupci, pak jsou zadány dvě hodnoty:

vzdálenost mezery: 10px20px.

Rozdíl v prohlížečích

Všimněte si, že v CSS vzhled tabulek může vypadat jinak, v závislosti na prohlížeči. Situace je zvláště špatná u starších verzí, které inovace v CSS nepodporují.

Nahoře je příklad tloušťky rámečku pro digitální hodnoty.

Zde je příklad tloušťky rámce pro konstanty.

Styly rámců jsou také velmi odlišné.

Proto při vývoji se vždy podívejte na výsledek v různých prohlížečích.

V CSS se doporučuje provést návrh tabulky pomocí kontroly typu prohlížeče. Největší problém byl s uživateli se staršími verzemi aplikace Internet Explorer.

Velmi pokročilí vývojáři mohou připojit zcela odlišné soubory CSS v závislosti na prohlížeči. A někdo provádí šeky v každém nebo ve zvláštním stylu (třídě).

Většina problémů vzniká stíny.

CSS: návrh tabulek, příklady

Návrh může být velmi rozmanitý. Vše závisí na místě a jeho designu. Všechno by mělo být kombinováno a neblokováno. Také chuť developera také hraje velkou roli. Pocit krásy je pro všechny odlišný.

Uvádíme příklady různých tabulek. Obrázek nahoře ukazuje použití náklonu a hry s pozadím a barvou ohraničení.

Mnoho z nich bude mít zájem o příklad krásného elegantního designu, který neomezuje oči uživatelů. Tato volba je vhodná v téměř každé situaci.

Hrany mohou být zaobleny. Vypadá to krásně.

Závěr

Jak můžete vidět, k vytvoření vzhledu stolů v CSS existuje obrovské množství nástrojů. Každý parametr má také obrovský počet variant hodnot. Použijete-li toto vše najednou, můžete vytvořit mistrovská díla. Zvláště pokud ano adaptivní design pod všemi prohlížeči.

Hlavní věc při registraci není přehánět s efekty. Vše musí být provedeno moderováním. Nejprve návrháři rozvržení rádi experimentují a používají všechny své znalosti najednou. V důsledku toho jsou tabulky přesycené vlastnosti. Snažte se vyhnout těmto chybám.

Kromě toho mohou některé parametry vzájemně ovlivňovat. Například není třeba specifikovat barvu pozadí tabulky, pokud je současně nainstalován obrázek pozadí, který překryje zadanou barvu.