Kako oblikovati tabelo s CSS

Kako Oblikovati Tabelo S Css



Tabele so najpogostejše in najučinkovitejše orodje za predstavitev podatkov na organiziran način. V prejšnjih časih, pred CSS, je element je bil uporabljen za ustvarjanje bogatih oblikovalskih postavitev. Toda dandanes se postavitve ustvarjajo z uporabo številnih drugih lastnosti CSS. Natančneje, element HTML “” se uporablja za ustvarjanje spletne tabele, ki jo je mogoče dodatno oblikovati z uporabo različnih lastnosti CSS.

Ta študija bo vodila v zvezi s stilskimi tabelami s CSS.

Kako stilizirati tabelo s CSS?

Za uporabo slogov v tabeli bomo šli skozi vrsto korakov, navedenih spodaj.





1. korak: ustvarite tabelo v HTML



< tabela >
< napis > Informacije za študente < / napis >
< thead >
< tr >
< th > Ime < / th >
< th > tečaj < / th >
< th > Znamke < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > William < / td >
< td > Mreženje < / td >
< td > 89 < / td >
< / tr >
< tr >
< td > Jack < / td >
< td > Uvod v C++ < / td >
< td > 97 < / td >
< / tr >
< tr >
< td > Jožef < / td >
< td > Uvod v Javo < / td >
< td > 77 < / td >
< / tr >
< / tbody >
< / tabela >

Za ustvarjanje tabele v HTML se uporabijo naslednji elementi HTML:



  • “ ” se uporablja za ustvarjanje tabele v HTML.
  • “ ” se uporablja za dodajanje napisa v tabelo.
  • “
” se uporablja za določanje glave tabele, ki običajno vsebuje naslove.
  • “
    • ” se uporablja za vrstico za dodajanje.
  • “
    • ” določa del telesa tabele.

    Ustvarjena tabela trenutno izgleda takole:



    Pojdimo naprej, da vidimo, kako oblikovati to mizo.



    2. korak: Slog elementa 'telo'.

    telo {
    družina pisav: Verdana, Geneva, Tahoma, sans-serif;
    ozadje- barva : rgb ( 233 , 233 , 233 ) ;
    }

    Element je uporabljen z naslednjimi lastnostmi oblikovanja CSS:

    • “ družina pisav lastnost z vrednostjo Verdana, Ženeva, Tahoma, sans-serif ” se uporablja za uporabo pisave, ki jo podpira brskalnik. Če brskalnik ne podpira prvega sloga pisave, bo uporabljen drugi.
    • “ Barva ozadja ” nastavi barvo ozadja elementa.

    3. korak: Element sloga »napis«.

    napis {
    pisava- velikost : 25 slikovnih pik;
    besedilo- poravnati : center;
    ozadje- barva : #1C6758;
    barva : koruzna svila;
    }

    Element

    ” določite vsebino naslova.
  • “
    • je oblikovan takole:

    • “ velikost pisave Lastnost se uporablja za nastavitev velikosti pisave.
    • “ poravnava besedila ” lastnost določa poravnavo besedila elementa.
    • “ barva ” lastnost se nanaša na barvo pisave elementa.

    Tukaj je rezultat zgoraj podane kode:

    4. korak: dodajte obrobo v tabelo
    ' meja Lastnost se uporablja za dodajanje obrobe okoli elementa. To je skrajšana lastnost, ki določa širino obrobe, slog obrobe in barvo obrobe.

    Na tabelo uporabimo obrobo skupaj z oblazinjenjem in robom:

    tabela, th, td {
    meja : 2px polna #1C6758;
    oblazinjenje: 1px 6px;
    rob: avto;
    }

    Tukaj:

    • “ meja ” lastnost prilagodi obrobo okrog tabele, tako da določi širino obrobe, slog obrobe in barvo obrobe.
    • “ oblazinjenje ” določa prostor okoli vsebine elementa, kjer prva vrednost definira prostor zgoraj-spodaj, druga vrednost pa doda prostor na desni-levi strani vsebine.
    • “ marža lastnost z vrednostjo avto ” doda enak prostor okoli elementa.

    Izhod

    Opomba : Če ne želimo presledkov med robovi tabele, uporabimo lastnost border-collapse.

    5. korak: Strni razmik obrob iz tabele
    Presledke med robovi tabele lahko odstranite z uporabo ' zrušitev meje ” z vrednostjo “collapse”:

    border-collapse: kolaps;

    6. korak: Prilagodite velikost tabele
    Poglejmo, kako prilagoditi velikost tabele:

    thead th {
    premer : 160 slikovnih pik;
    }

    Dodano » premer ” z elementom

    samodejno prilagodi velikost tabele glede na to:

    Sloge lahko uporabimo tudi za določeno celico tabele. Razpravljajmo o njih!

    7. korak: Slog posebnih celic tabele
    Če želite oblikovati določeno celico tabele, podajte ime razreda te določene celice. Na primer, spodnja koda predstavlja, da je tretji celici druge vrstice dodeljeno ime razreda ' označite ”:

    < td razred = 'poudarek' > 99 < / td >

    Zdaj dostopajte do celice z imenom razreda v datoteki CSS:

    .poudariti {
    ozadje- barva : #0f90d5;
    }

    ' .poudariti ” se nanaša na osvetlitev razreda elementa

    		. Ta element se uporablja z ' Barva ozadja ” za določitev barve ozadja.

    Kot lahko vidimo, je navedena celica tabele uspešno oblikovana:

    8. korak: Nastavite družino pisav in velikost tabele

    tabela {
    družina pisav: kurziv;
    pisava- velikost : 18 slikovnih pik;
    besedilo- poravnati : center;
    }

    Za element tabele so uporabljene naslednje lastnosti CSS:

    • “ družina pisav ” nastavi slog pisave elementa.
    • “ velikost pisave Lastnost se uporablja za nastavitev pisave elementa.
    • “ poravnava besedila Lastnost se uporablja za prilagajanje poravnave besedila.

    Tukaj je rezultat:

    9. korak: pobarvajte vrstice v zaporedju
    Prav tako je dovoljeno uporabljati sloge za določene vrstice ali stolpce. Na primer, sode vrstice so oblikovane tako, da sledijo spodnji obliki:

    \
    tbody tr:nth-child ( celo ) {
    ozadje- barva : #FFB200;
    }

    Tukaj:

    • ' :nth-child(sodo) ” Psevdo izbirnik se uporablja za prevzem enega argumenta, ki določa vzorec, na katerega naj se uporabi slog.
    • “ Barva ozadja Lastnost se uporablja za nastavitev barve ozadja elementa.

    Opazimo lahko, da je barva ozadja uspešno uporabljena za sode vrstice:

    To je bilo vse o oblikovanju tabel s CSS

    Zaključek

    Tabele so pomembno orodje za organiziranje podatkov. Tabelo lahko ustvarite z uporabo elementov HTML

    , in drugih elementov. Za stilizacijo tabele se uporablja več lastnosti CSS, kot so obroba, lastnost barve ozadja, lastnost družine pisav in številne druge. Za boljše razumevanje je v tem zapisu razložen postopek po korakih za oblikovanje tabele s CSS.

    drugo

    Kategorija

    Priljubljene Objave

    Kako odstraniti Google Račun iz Google Chroma

    Kaj je podrazred in nadrazred v dedovanju Jave

    4 popravki za omogočanje stereo miksa v sistemu Windows 10

    Kako glasovno klepetati z Discordom na konzolah PlayStation 5 (PS5).

    Kako namestiti namizno okolje LXDE na Debian 12

    Kako onemogočiti samodejni ponovni zagon sistema Windows 11/10 po posodobitvah?

    Kako dinamično napisati besedo z veliko začetnico v JavaScriptu?

    Kako popraviti zamrznitev miške v sistemu Windows 11?

    Kako dodati zaupanja vredna spletna mesta v Google Chrome

    Kako vklopiti/izklopiti zaščito sistema v sistemih Windows 10 in 11?

    Kako brati tabelo v MATLAB?

    Kako uporabljati metodo String concat() v Javi?

    Oracle Replace

    Kako uporabljati vdelave v LangChain

    Kako pridobiti naslov MAC vmesnika WiFi postaje ESP32 z uporabo Arduino IDE

    Praktična uporaba Git Reset –Soft

    Najboljši strežniki Nitro Discord

    Sporočilo Git Commit: najboljše prakse

    Najbolj priljubljene in bistvene aplikacije za Linux

    Kako uporabiti imensko oznako Dinnerbone, da obrnete mafijo na glavo v Minecraftu?

    ,