Tabulky jsou jedním z nejběžnějších způsobů, jak prezentovat informace na webových stránkách. Často je užitečné mít tabulku, která se zobrazí na každé stránce, zvláště když tabulka obsahuje velké množství řádků nebo zabírá více stránek. V tomto článku se podíváme na to, jak vytvořit čepici tabulky, která se bude automaticky opakovat na každé stránce.
Než se pustíte do vytváření tabulky, stojí za zmínku, že webové stránky se zobrazují na obrazovce prohlížeče, jsou vizuálně rozděleny na stránky. Čepice tabulky, stejně jako jakýkoli jiný prvek webové stránky, se na každé stránce automaticky neopakuje. Proto musíme použít některé speciální techniky a vlastnosti CSS, abychom dosáhli požadovaného výsledku.
Nejprve budeme muset zabalit tabulku do bloku s pevnou výškou a nastavit vlastnost overflow rovným auto. To umožní vytvoření posouvací jednotky, pokud obsah tabulky překročí výšku obrazovky.
Pak můžeme nastavit vlastnost position pro čepici jsou tabulky stejné sticky. Hodnota sticky nastavuje umístění položky vzhledem k kontextu posouvání. To znamená, že prvek se při posouvání stránky připojí k horní nebo spodní hranici bloku.
Klíčové prvky čepice tabulky
Čepice tabulky je zodpovědná za Nadpis a strukturu tabulky. Obsahuje klíčové prvky, které jsou definovány v tagu . V této části se podíváme na základní prvky, které je třeba zahrnout do čepice tabulky:
- - štítek pro vytvoření řádku v čepici tabulky.
- - štítek pro určení buňky v čepici tabulky. Na rozdíl od značky , která se používá k určení buněk v těle tabulky, je značka určena pro buňky v čepici a obvykle se zobrazuje tučným písmem.
Chcete-li například vytvořit jednoduchou čepici tabulky se třemi buňkami, můžete použít následující kód:
Заголовок 1 Заголовок 2 Заголовок 3
Tento kód vytvoří tabulku se třemi buňkami v čepici, která zobrazí text "záhlaví 1", "záhlaví 2"a" záhlaví 3".
Výběr písma a barvy záhlaví tabulky
Při vytváření čepice tabulky na každé stránce je velmi důležité vybrat vhodné písmo a barvu pro titulek. To pomůže učinit tabulku čitelnější a atraktivnější pro uživatele.
Pro výběr písma lze použít značku s atributem face . Chcete-li například vybrat písmo Arial, musíte použít následující design:
Заголовок таблицыPro nastavení velikosti písma lze také přidat atribut size:
Заголовок таблицыPro výběr barvy záhlaví tabulky můžete použít atribut značky color . Chcete-li například nastavit červenou barvu, použijte následující design:
Заголовок таблицыPokud chcete použít hexadecimální kód barvy (například #ff0000 pro červenou), můžete použít atribut značky color :
Заголовок таблицыKromě značky můžete také použít styly CSS k zadání písma a barvy záhlaví tabulky. Například:
table th Tento přístup usnadňuje změnu stylu záhlaví tabulky v celém dokumentu jediným obecným pravidlem CSS.
Umístění a zarovnání čepice tabulky
Pro správné umístění a zarovnání tabulky na každé stránce je nutné použít speciální CSS vlastnosti a hodnoty.
Jedním ze způsobů, jak vytvořit čepici tabulky, která se bude opakovat na každé stránce, je použití vlastnosti position: fixed; . Při použití této vlastnosti bude položka "přilepena" k horní části okna prohlížeče, nikoli k samotné tabulce. Tímto způsobem bude čepice tabulky vždy viditelná při posouvání stránky dolů.
Pro zarovnání čepice tabulky vodorovně můžete použít vlastnost text-align: center; . Umístí obsah buněk čepice do středu.
Chcete-li rovnat čepici tabulky svisle, můžete použít vlastnost vertical-align: middle; , která zarovnává obsah buněk tabulky do středu.
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
Tento kód vytvoří tabulku s opakující se čepicí na každé stránce zarovnanou uprostřed a svisle.