Úvod do stylů tabulky CSS
Proč používáme CSS, ačkoli můžeme používat tabulky HTML, je to proto, že v tabulce HTML se rozvržení stránky založené na tabulce často vykreslí pomaleji než ekvivalentní rozvržení založené na CSS; to platí zejména pro stránky, které mají hodně obsahu. Tabulky by neměly být používány jako pomůcky k rozvržení. A pokud vytváříme tabulky HTML bez stylů nebo atributů v prohlížeči, zobrazí se bez jakéhokoli ohraničení. Stylování tabulky pomocí CSS může zlepšit její vzhled.
Tabulky CSS jsou velmi snadno pochopitelné a použitelné. Jde pouze o zapamatování odpovídajících hodnot vlastnosti zobrazení CSS pro základní prvky tabulky HTML. S pomocí CSS jsme schopni vyrobit nějaké stylové stoly.
Co je styl tabulky CSS?
Tabulka CSS (Cascading Style Sheets) popisuje, jak rozložit sadu prvků v řádcích a sloupcích. Výchozí CSS aplikovaný na tabulku HTML je tabulka CSS.
- CSS navrhl a přepracoval flexibilitu.
- To znamená, že rozvržení založené na CSS zajišťuje, že umístíte všechny své styly (tj. Od malých změn po hlavní pravidla) na jedno místo.
- Změnou pravidel rozvržení nastavených v tomto seznamu stylů ovlivníte každou stránku, která na něj odkazuje.
- Rozložení stránky založené na CSS se obvykle objeví na obrazovce rychleji a dokonce i stahování bude rychlejší než rozložení na základě tabulky.
Vlastnosti stylu tabulky CSS
Níže jsou uvedeny různé vlastnosti stylů tabulek CSS:
1. Hranice okrajů
Používá se k označení, zda by měly být ohraničení kolem buněk tabulky oddělené nebo sbalené.
Syntaxe: border-collapse: separate|collapse|initial|inherit;
- Hranice sbalení: samostatně: Používá se tak, že sousední buňky mají své vlastní a nezávislé hranice, které nejsou sdíleny.
Syntax
border-collapse: separate;
Výchozí hodnota nastavená na vlastnost border-collapse je samostatná. Když jsou oddělené, prohlížeče umístí mezeru několika pixelů mezi každou buňku pomocí vlastnosti mezerníku.
Kód
Výstup:
- Hranice sbalení: sbalení: kdykoli nastavíme vlastnost sbalení okraje na sbalení, odstraní se mezera mezi buňkami.
Syntax
border-collapse: collapse;
Kód
Výstup :
I když tento prostor odstraníte nastavením atributu cellspacing pro značku HTML na 0, prohlížeče stále zobrazují dvojité ohraničení. To znamená, že dolní okraj jedné buňky se objeví nad horním okrajem buňky pod, což způsobí zdvojnásobení hraničních čar. Nastavení vlastnosti sbalení okrajů na kolaps eliminuje jak mezeru mezi buňkami, tak i zdvojnásobení hranic.
- Border collapse: initial: Používá se k nastavení vlastnosti border-collapse na výchozí hodnotu.
- Border collapse: dědit: Používá se, když vlastnost border-collapse zdědí od svých nadřazených prvků. Tato vlastnost funguje pouze při použití na a
štítek.
Hodnoty: kolaps, samostatný, počáteční, zděděný;
2. Hraniční rozestupy
Nastavuje prostor sousedící ohraničení a obsah obklopující tabulku. Je to podobné rozestupu buněk ve značce
atribut, kromě toho, že má volitelnou druhou hodnotu. Tato vlastnost funguje pouze při použití na a
štítek.
Syntax
border-spacing: Length|initial|inherit;Hraniční rozestup obvykle bere jednu nebo dvě hodnoty délky. V tomto je zadána pouze jedna hodnota, která pak definuje horizontální i vertikální mezery mezi buňkami.
Kód
Výstup:
V tomto případě, pokud jsou zadány dvě hodnoty, pak první hodnota definuje horizontální rozestup mezi buňkami (prostor na každé straně každé buňky) a druhá hodnota definuje vertikální rozestup mezi buňkami. (prostor oddělující spodní část jedné buňky od horní části pod ní).
3. Titulek
Vlastnost titulek určuje umístění titulek tabulky. Při použití na popisek tabulky určuje tato vlastnost, zda se popisek objeví v horní nebo dolní části tabulky. Titulek by se normálně objevil v horní části tabulky.
Syntax
caption-side: top|bottom|initial|inherit;Tato vlastnost může mít jednu ze čtyř hodnot:
- Strana s titulky: top: Je to výchozí hodnota. V tomto umístí titulek nad stůl.
Syntaxe:
caption-side:top;Kód
Výstup:
- Strana s titulky: dole: umístí popisek pod stůl.
Syntaxe:
caption-side:bottom;Kód
Výstup:
- Strana s titulky: počáteční: Používá se k nastavení vlastnosti na výchozí hodnotu.
- Strana s titulky: zdědit: Zdědí tuto vlastnost z nadřazeného prvku.
Hodnoty: horní, dolní, počáteční, zděděná;
4. Prázdné buňky
Řekne prohlížeči, zda by měl zobrazit buňku tabulky, která je zcela prázdná. Řídí vykreslování ohraničení a pozadí buněk, které nemají viditelný obsah v tabulce, která používá model oddělených ohraničení.
Syntaxe:
empty-cells: show|hide|initial|inherit;Tato vlastnost může mít jednu ze čtyř hodnot:
- Empty-cell: show: Tato vlastnost se používá k zobrazení ohraničení prázdné buňky.
Syntaxe:
empty-cells:show;Kód
Výstup:
- Empty-cell: hide: Tato vlastnost se používá ke skrytí rámečků v prázdné buňce.
Syntaxe:
empty-cells: hide;Kód
Výstup:
- Empty-cell: initial : Používá se k nastavení vlastnosti na výchozí hodnotu.
- Empty-cell: inherit: Zdědí tuto vlastnost z nadřazeného prvku.
Hodnoty: zobrazit, skrýt, počáteční, zdědit;
5. Rozvržení tabulky
Určuje, jak webový prohlížeč kreslí tabulku, a může mírně ovlivnit rychlost, jakou ji prohlížeč zobrazuje. Tato vlastnost může mít jednu ze čtyř hodnot.
Syntaxe:
table-layout: auto|fixed|initial|inherit;Výchozí vlastnost je auto.
1. Rozvržení tabulky: auto: Automaticky nastaví šířku prvků automaticky podle obsahu.
2. Tabulka - rozvržení: pevná : Opravené nastavení vynutí prohlížeč, aby vykreslil všechny sloupce na stejnou šířku jako sloupce v prvním řádku. Pokud bude obsah širší než první řádek, bude obsah zalomen, oříznut nebo rozšířen mimo buňky.
Kód
Výstup:
3. Rozvržení tabulky: počáteční: Používá se k nastavení vlastnosti na výchozí hodnotu.
4. Rozložení tabulky: zdědit: Zdědí tuto vlastnost z nadřazeného prvku.
Závěr
S pomocí CSS můžeme vyrábět stylové stoly a vylepšovat vzhled stolu.
Doporučené články
Toto je průvodce stylem CSS Table Styling. Zde diskutujeme vlastnosti s kódy, výstupy a syntaxí stylů tabulky CSS. Další informace naleznete také v našich uvedených článcích -
- Výhody CSS
- Použití CSS
- Úvod do CSS
- Formátování textu CSS