Ako upraviť štýl tabuľky pomocou CSS

Ako Upravit Styl Tabulky Pomocou Css



Tabuľky sú najbežnejším a najúčinnejším nástrojom na reprezentáciu údajov organizovaným spôsobom. V skorších dobách, pred CSS, prvok bol použitý na vytváranie bohatých dizajnových rozložení. V súčasnosti sa však rozloženia vytvárajú pomocou niekoľkých ďalších vlastností CSS. Presnejšie povedané, prvok HTML „“ sa používa na vytvorenie webovej tabuľky, ktorú možno ďalej upravovať použitím rôznych vlastností CSS.

Táto štúdia sa bude týkať úpravy tabuliek pomocou CSS.

Ako upraviť štýl tabuľky pomocou CSS?

Ak chcete použiť štýly na tabuľku, prejdeme sériou krokov uvedených nižšie.





Krok 1: Vytvorte tabuľku v HTML



< tabuľky >
< titulok > Informácie pre študentov < / titulok >
< hlava >
< tr >
< th > názov < / th >
< th > Samozrejme < / th >
< th > Marks < / th >
< / tr >
< / hlava >
< tbody >
< tr >
< td > William < / td >
< td > vytváranie sietí < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Úvod do C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Jozefa < / td >
< td > Úvod do Javy < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / tabuľky >

Na vytvorenie tabuľky v HTML sa používajú nasledujúce prvky HTML:



  • “ ” element sa používa na vytvorenie tabuľky v HTML.
  • “
“ sa používa na určenie hlavičky tabuľky, ktorá zvyčajne obsahuje nadpisy.
  • “
    • “ sa používa pre pridaný riadok.
  • “
    • “ určuje časť tela tabuľky.

    Vytvorená tabuľka momentálne vyzerá takto:



    Poďme ďalej, aby sme zistili, ako upraviť tento stôl.



    Krok 2: Vytvorte štýl prvku „telo“.

    telo {
    rodina písiem: Verdana, Ženeva, Tahoma, sans-serif;
    pozadie- farba : rgb ( 233 , 233 , 233 ) ;
    }

    Element sa použije s nasledujúcimi vlastnosťami štýlu CSS:

    • “ font-family “vlastnosť s hodnotou” Verdana, Ženeva, Tahoma, sans-serif “ sa používa na použitie písma, ktoré prehliadač podporuje. Ak prehliadač nepodporuje prvý štýl písma, použije sa druhý.
    • “ farba pozadia vlastnosť nastavuje farbu pozadia prvku.

    Krok 3: Štýl prvku „popis“.

    titulok {
    font- veľkosť : 25px;
    text- zarovnať : stred;
    pozadie- farba : #1C6758;
    farba : kukuričný hodváb;
    }

    Štýl prvku

    ” prvok sa používa na pridanie popisku k tabuľke.
  • “
    • ” špecifikovať obsah nadpisu.
  • “
    • je nasledovný:

    • “ veľkosť písma Vlastnosť ” sa používa na nastavenie veľkosti písma.
    • “ zarovnanie textu vlastnosť určuje zarovnanie textu prvku.
    • “ farba “ vlastnosť odkazuje na farbu písma prvku.

    Tu je výstup vyššie uvedeného kódu:

    Krok 4: Pridajte orámovanie do tabuľky
    ' hranica Vlastnosť ” sa používa na pridanie orámovania okolo prvku. Je to skrátená vlastnosť, ktorá určuje šírku okraja, štýl okraja a farbu okraja.

    Aplikujme orámovanie spolu s výplňou a okrajom na tabuľku:

    tabuľka, th, td {
    hranica : 2px plné #1C6758;
    padding: 1px 6px;
    okraj: auto;
    }

    Tu:

    • “ hranica Vlastnosť ” upraví orámovanie okolo tabuľky zadaním šírky orámovania, štýlu orámovania a farby orámovania.
    • “ vypchávka ” určuje priestor okolo obsahu prvku, kde prvá hodnota definuje priestor hore-dole a druhá hodnota pridáva priestor na pravej a ľavej strane obsahu.
    • “ marža “vlastnosť s hodnotou” auto “ pridáva rovnaký priestor okolo prvku.

    Výkon

    Poznámka : Ak nechceme medzery medzi okrajmi tabuľky, použite vlastnosť border-collapse.

    Krok 5: Zbaľte rozstup okrajov z tabuľky
    Medzery medzi okrajmi tabuľky je možné odstrániť pomocou „ border-collapse ” vlastnosť s hodnotou “collapse”:

    border-collapse: kolaps;

    Krok 6: Upravte veľkosť tabuľky
    Pozrime sa, ako upraviť veľkosť tabuľky:

    hlavná tl {
    šírka : 160px;
    }

    Pridané „ šírka ” s prvkom

    automaticky prispôsobí veľkosť tabuľky podľa toho::

    Štýly môžeme použiť aj na konkrétnu bunku tabuľky. Poďme o nich diskutovať!

    Krok 7: Štýl špecifických buniek tabuľky
    Ak chcete upraviť štýl konkrétnej bunky tabuľky, zadajte názov triedy tejto konkrétnej bunky. Napríklad kód nižšie predstavuje, že tretej bunke druhého riadku je priradený názov triedy “ Zlatý klinec “:

    < td trieda = 'Zlatý klinec' > 99 < / td >

    Teraz prejdite k bunke pomocou názvu triedy v súbore CSS:

    .Zlatý klinec {
    pozadie- farba : #0f90d5;
    }

    ' .Zlatý klinec ” odkazuje na zvýraznenie triedy prvku

    		. Tento prvok sa aplikuje s „ farba pozadia ” na určenie farby pozadia.

    Ako vidíme, špecifikovaná bunka tabuľky je úspešne štylizovaná:

    Krok 8: Nastavte rodinu písiem a veľkosť tabuľky

    tabuľky {
    font-family: kurzíva;
    font- veľkosť : 18px;
    text- zarovnať : stred;
    }

    Nasledujúce vlastnosti CSS sa použijú na prvok tabuľky:

    • “ font-family vlastnosť nastavuje štýl písma prvku.
    • “ veľkosť písma vlastnosť sa používa na nastavenie písma prvku.
    • “ zarovnanie textu ” sa používa na úpravu zarovnania textu.

    Tu je výstup:

    Krok 9: Vyfarbite riadky v sekvencii
    Je tiež povolené aplikovať štýly na konkrétne riadky alebo stĺpce. Napríklad párne riadky sú štylizované podľa nasledujúceho formátu:

    \
    tbody tr:nth-child ( dokonca ) {
    pozadie- farba : #FFB200;
    }

    Tu:

    • ' :n-té dieťa (párne) ” pseudoselektor sa používa na prevzatie jedného argumentu, ktorý špecifikuje vzor, ​​na ktorý sa má štýl použiť.
    • “ farba pozadia ” vlastnosť sa používa na nastavenie farby pozadia prvku.

    Je možné pozorovať, že farba pozadia sa úspešne aplikuje na párne riadky:

    To bolo všetko o úprave tabuliek pomocou CSS

    Záver

    Tabuľky sú dôležitým nástrojom na usporiadanie údajov. Tabuľku je možné vytvoriť pomocou HTML prvkov

    , a ďalších. Na štylizáciu tabuľky sa používa niekoľko vlastností CSS, ako je orámovanie, vlastnosť farby pozadia, vlastnosť rodiny písma a mnoho ďalších. Pre lepšie pochopenie je v tomto zápise vysvetlený postup krok za krokom na úpravu tabuľky pomocou CSS.

    Iné

    Kategórie

    Populárne Príspevky

    Ako zobraziť dátum a čas vo formáte 12 hodín AM/PM v JavaScripte?

    Ako nainštalovať a nastaviť Disk Google v systéme Fedora Linux

    Ako poslať hypertextový odkaz v Discord

    Aké je predvolené umiestnenie Elasticsearch protokolu chýb?

    Ako vytvoriť pole jednej dimenzie C# – príklad

    Výsledky triedenia dotazov MongoDB

    Ako prispôsobiť obrázky na pozadí rozmerom obrazovky

    Bash Subshells

    Ako používať triedu trvania Java

    Ako používať metódu stats.isDirectory() v Node.js?

    Ako spustiť Kali Linux na Docker?

    Čo je rozsah v C#

    Pochopenie povolení súborov Linux: Ako zabezpečiť váš systém

    Ako nainštalovať QEMU Guest Agent na virtuálnych počítačoch Proxmox VE Linux

    SQL Join za viacerých podmienok

    Úvod do typov záznamov v C# s príkladmi

    Kapitola 5: Operačný systém Commodore-64 v assembleri

    Čo robí INSERT ON DUPLICATE KEY UPDATE v MySQL?

    Ako upraviť štýl Bootstrap Modal

    Ako nainštalovať do Java v systéme Windows 11

    ,