Jak upravit styl tabulky pomocí CSS

Tabulky jsou nejběžnějším a nejefektivnějším nástrojem k reprezentaci dat organizovaným způsobem. V dřívějších dobách, před CSS, prvek byl použit pro vytváření bohatých designových rozvržení. Ale v dnešní době se rozvržení vytváří pomocí několika dalších vlastností CSS. Přesněji řečeno, prvek HTML „“ se používá k vytvoření webové tabulky, kterou lze dále stylovat použitím různých vlastností CSS.

Tato studie vás seznámí se stylováním tabulek pomocí CSS.

Jak stylovat tabulku pomocí CSS?

Chcete-li použít styly na tabulku, projdeme řadou kroků uvedených níže.

Krok 1: Vytvořte tabulku v HTML

< stůl >
< titulek > Informace pro studenty < / titulek >
< hlava >
< tr >
< čt > název < / čt >
< čt > Kurs < / čt >
< čt > Marks < / čt >
< / tr >
< / hlava >
< tbody >
< tr >
< td > William < / td >
< td > vytváření sítí < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Zvedák < / td >
< td > Úvod do C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Josefe < / td >
< td > Úvod do Javy < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / stůl >

K vytvoření tabulky v HTML se používají následující prvky HTML:

“ ” element se používá k vytvoření tabulky v HTML.
“ ” prvek se používá k přidání titulku do tabulky.
“ “ se používá k určení záhlaví tabulky, které obvykle obsahuje záhlaví.
“

“ se používá pro přidání řádku.

“

“ určuje část těla tabulky.

Vytvořená tabulka aktuálně vypadá takto:

Pojďme vpřed, abychom viděli, jak stylizovat tuto tabulku.

Krok 2: Vytvořte styl prvku „tělo“.

tělo {
rodina písem: Verdana, Geneva, Tahoma, sans-serif;
Pozadí- barva : rgb ( 233 , 233 , 233 ) ;
}

Prvek se použije s následujícími vlastnostmi stylů CSS:

“ rodina písem 'vlastnost s hodnotou' Verdana, Ženeva, Tahoma, sans-serif “ se používá k použití písma, které prohlížeč podporuje. Pokud prohlížeč nepodporuje první styl písma, použije se druhý.
“ barva pozadí Vlastnost ” nastavuje barvu pozadí prvku.

Krok 3: Styl elementu „caption“.

titulek {
písmo- velikost : 25px;
text- zarovnat : střed;
Pozadí- barva : #1C6758;
barva : kukuřičné hedvábí;
}

Styl prvku

” specifikovat obsah nadpisu.

“

je následující:

“ velikost písma Vlastnost ” se používá pro nastavení velikosti písma.
“ zarovnání textu Vlastnost ” určuje zarovnání textu prvku.
“ barva “ vlastnost odkazuje na barvu písma prvku.

Zde je výstup výše uvedeného kódu:

Krok 4: Přidejte ohraničení do tabulky
' okraj Vlastnost ” se používá k přidání ohraničení kolem prvku. Je to zkrácená vlastnost, která určuje šířku ohraničení, styl ohraničení a barvu ohraničení.

Aplikujme ohraničení spolu s odsazením a okrajem na tabulku:

tabulka, čt, td {
okraj : 2px plné #1C6758;
odsazení: 1px 6px;
okraj: auto;
}

Tady:

“ okraj Vlastnost ” upravuje ohraničení tabulky zadáním šířky ohraničení, stylu ohraničení a barvy ohraničení.
“ vycpávka ” určuje prostor kolem obsahu prvku, kde první hodnota definuje prostor nahoře a dole a druhá hodnota přidává prostor na pravé a levé straně obsahu.
“ okraj 'vlastnost s hodnotou' auto “ přidává stejný prostor kolem prvku.

Výstup

Poznámka : Pokud nechceme mezery mezi okraji tabulky, použijte vlastnost border-collapse.

Krok 5: Sbalte rozestupy ohraničení z tabulky
Mezery mezi okraji tabulky lze odstranit pomocí „ border-kolaps ” vlastnost s hodnotou “collapse”:

border-collapse: kolaps;

Krok 6: Upravte velikost tabulky
Podívejme se, jak upravit velikost tabulky:

tl {
šířka : 160px;
}

Doplněno „ šířka ” vlastnost s prvkem

automaticky přizpůsobí velikost tabulky podle toho::

Styly můžeme také aplikovat na konkrétní buňku tabulky. Pojďme o nich diskutovat!

Krok 7: Upravte styl buněk tabulky
Chcete-li upravit styl konkrétní buňky tabulky, zadejte název třídy této konkrétní buňky. Například níže uvedený kód představuje, že třetí buňce druhého řádku je přiřazen název třídy „ zvýraznit “:

< td třída = 'zvýraznit' > 99 < / td >

Nyní přejděte k buňce pomocí názvu třídy v souboru CSS:

.zvýraznit {
Pozadí- barva : #0f90d5;
}

' .zvýraznit ” odkazuje na zvýraznění třídy elementu

. Tento prvek se aplikuje s „ barva pozadí ” vlastnost k určení barvy na pozadí.

Jak vidíme, zadaná buňka tabulky je úspěšně stylizována:

Krok 8: Nastavte rodinu písem a velikost tabulky

stůl {
font-family: cursive;
písmo- velikost : 18px;
text- zarovnat : střed;
}

Na prvek tabulky se použijí následující vlastnosti CSS:

“ rodina písem Vlastnost ” nastavuje styl písma prvku.
“ velikost písma Vlastnost ” se používá pro nastavení písma prvku.
“ zarovnání textu ” vlastnost se používá pro úpravu zarovnání textu.

Zde je výstup:

Krok 9: Vybarvěte řádky v sekvenci
Je také povoleno použít styly na konkrétní řádky nebo sloupce. Například sudé řádky jsou stylizovány podle následujícího formátu:

\
tbody tr:nth-child ( dokonce ) {
Pozadí- barva : #FFB200;
}

Tady:

' :n-té dítě (sudé) ” pseudoselektor se používá k převzetí jednoho argumentu, který určuje vzor, na který má být styl aplikován.
“ barva pozadí ” vlastnost se používá k nastavení barvy pozadí prvku.

Lze pozorovat, že barva pozadí se úspěšně aplikuje na sudé řádky:

To bylo vše o stylování tabulek pomocí CSS

Závěr

Tabulky jsou důležitým nástrojem pro uspořádání dat. Tabulku lze vytvořit pomocí HTML

, a dalších prvků. Ke stylizaci tabulky se používá několik vlastností CSS, jako je ohraničení, vlastnost barva pozadí, vlastnost rodiny písem a mnoho dalších. Pro lepší pochopení tento zápis vysvětluje postup krok za krokem pro stylování tabulky pomocí CSS.

,

Jak upravit styl tabulky pomocí CSS

Jak stylovat tabulku pomocí CSS?

Závěr

Kategorie

Populární Příspěvky

Jak povolit režim Boha v systému Windows 11

Odkaz na soubor PDF pomocí HTML

Jaký je rozdíl mezi rozšířeními a implementacemi v Javě

Co je Apt v Linuxu

Jak organizovat složky serveru v Discordu

Načtěte Pickle File Python

Jaký je rozdíl mezi C++ String == a metodou Compare().

Co je Docker run -it Flag?

Odstranění duplikátů v Tabulkách Google

Průzkumník Windows ve výchozím nastavení obsahuje složku knihoven v systému Windows 7 - Winhelponline

Jak používat funkci date_sub() v PHP

Jak překonfigurovat nainstalované balíčky v Debianu 11

Jak používat značky Git pro správu verzí

Představujeme Raspberry Pi 5: Nejnovější model Raspberry Pi 2023

Jak vytvořit a upravit tajemství v AWS pomocí CLI?

Jak spustit server MongoDB s Dockerem?

Jak funguje Readline emitKeypressEvents() v Node.js?

Jak nainstalovat VMware Workstation 17 Player na Linux Mint 21

Jak zabezpečit svůj uživatelský účet Windows

Jak změnit úroveň viditelnosti projektu nebo úložiště GitLab?