Uvod u CSS oblikovanje tablice

Zašto koristimo CSS, iako možemo koristiti HTML tablice, zato što se u HTML tablici izgled stranice temeljen na tablici često prikazuje sporije od ekvivalentnog izgleda temeljenog na CSS-u; to se posebno odnosi na stranice s puno sadržaja. Tablice se ne smiju koristiti kao pomoćna sredstva za oblikovanje. A ako u pregledniku izgradimo HTML tablice bez ikakvih stilova ili atributa, bit će prikazane bez ikakvih obruba. Izrada stola s CSS-om može poboljšati njegov izgled.

CSS tablice prilično su jednostavne za razumijevanje i korištenje. Samo je zapamtiti odgovarajuće vrijednosti svojstava prikaza CSS-a za osnovne elemente HTML tablice. Uz pomoć CSS-a sposobni smo napraviti nekoliko stilskih stolova.

Što je CSS tablica?

Tablica CSS (Cascading Style Sheets) opisuje kako postaviti niz elemenata u redove i stupce. Zadani CSS primijenjen u HTML tablici je CSS tablica.

  • CSS je dizajnirao i redizajnirao fleksibilnost.
  • To znači da izgled temeljen na CSS-u osigurava da sve svoje stilove (tj. Od malih izmjena do glavnih pravila) smjestite na jedno mjesto.
  • Promjenom pravila izgleda koje postavljate u tom stilskom listu i utječete na svaku stranicu koja se odnosi na njega.
  • Izgled stranice na bazi CSS-a obično će se pojaviti brže na zaslonu, pa čak će i preuzimanje biti brže od izgleda temeljenog na tablici.

Svojstva CSS tablice

Ispod su različita svojstva CSS stilova tablice:

1. Rušenje granica

Koristi se za označavanje treba li granice oko ćelija tablice razdvojiti ili srušiti.

Sintaksa: border-collapse: separate|collapse|initial|inherit;

  • Urušavanje granica: odvojeno: Koristi se tako da susjedne ćelije imaju svoje i neovisne granice koje se ne dijele.

Sintaksa

border-collapse: separate;

Zadana vrijednost koja je postavljena na svojstvo border-collaps je odvojena. Kada se razdvoje, preglednici stavljaju razmak od par piksela između svake ćelije koristeći svojstvo proreda granice.

Kodirati

Izlaz:

  • Srušavanje granice: kolaps: svaki put kada postavimo svojstvo granica-kolaps tako da se urušava, uklanja se prostor između ćelija.

Sintaksa

border-collapse: collapse;

Kodirati

Izlaz:

Čak i ako ovaj prostor eliminirate postavljanjem atributa prodiranja ćelija za HTML oznaku na 0, preglednici i dalje prikazuju dvostruke obrube. To jest, donja granica jedne ćelije pojavit će se iznad gornje granice ćelije ispod, uzrokujući udvostručenje graničnih linija. Postavljanje svojstva granice-kolaps na urušavanje eliminira i prostor između ćelija i udvostručavanje granica.

  • Kopiranje obruba: početno: Koristi se za postavljanje svojstva obrubljenja granice na zadanu vrijednost.
  • Srušavanje granice: nasljeđuje: Koristi se kada svojstvo srušavanja granice nasljeđuje od svojih nadređenih elemenata. Ovo svojstvo funkcionira samo ako se primijeni na označiti.

    Vrijednosti: urušiti, odvojiti, početno, naslijediti;

    2. Granica-razmak

    Postavlja prostor uz granice i sadržaj koji okružuje stol. Slično je s razmakom stanica

    atribut, osim što ima opcionalnu drugu vrijednost. Ovo svojstvo funkcionira samo ako se primijeni na
    označiti.

    Sintaksa

    border-spacing: Length|initial|inherit;

    Razmak između granica obično ima jednu ili dvije vrijednosti duljine. U ovoj je specificirana samo jedna vrijednost, a zatim je definirana i za vodoravni i okomiti razmak između stanica.

    Kodirati

    Izlaz:

    U ovom slučaju, ako su navedene dvije vrijednosti, prva vrijednost definira vodoravni razmak između stanica (razmak s obje strane svake stanice), a druga vrijednost vertikalni razmak između stanica. (prostor koji odvaja dno jedne ćelije od vrha one ispod nje).

    3. Natpis na strani

    Svojstvo na strani titla određuje položaj naslova tablice. Kada se primjenjuje na naslov tablice, ovo svojstvo određuje hoće li se opis pojaviti na vrhu ili na dnu tablice. Natpis se obično pojavljuje na vrhu tablice.

    Sintaksa

    caption-side: top|bottom|initial|inherit;

    Ovo svojstvo može imati jednu od četiri vrijednosti:

    • Natpis na strani: vrh: To je zadana vrijednost. U tome stavlja natpis iznad stola.

    Sintaksa: caption-side:top;

    Kodirati

    Izlaz:

    • Natpis na strani: dno: stavlja opis ispod tablice.

    Sintaksa: caption-side:bottom;

    Kodirati

    Izlaz:

    • Natpis na strani: početno: Koristi se za postavljanje svojstva na zadanu vrijednost.
    • Natpis na strani: naslijedi: Nasljeđuje ovo svojstvo od nadređenog elementa.

    Vrijednosti: vrh, dno, početno, nasljeđuju;

    4. Prazne ćelije

    Pregledniku poručuje treba li prikazati ćeliju tablice koja je potpuno prazna. Ona kontrolira prikazivanje obruba i pozadine ćelija koje nemaju vidljivi sadržaj u tablici koja koristi model odvojenih granica.

    Sintaksa: empty-cells: show|hide|initial|inherit;

    Ovo svojstvo može imati jednu od četiri vrijednosti:

    • Prazna ćelija: Prikaži: Ovo svojstvo koristi se za prikaz obruba prazne ćelije.

    Sintaksa: empty-cells: show;

    Kodirati

    Izlaz:

    • Prazna ćelija: skriva: Ovo svojstvo koristi se za skrivanje granica u praznoj ćeliji.

    Sintaksa: empty-cells: hide;

    Kodirati

    Izlaz:

    • Prazna ćelija: početna : koristi se za postavljanje svojstva na zadanu vrijednost.
    • Prazna ćelija: naslijedi: Nasljeđuje ovo svojstvo od svog nadređenog elementa.

    Vrijednosti: pokazati, sakriti, početno, naslijediti;

    5. Izgled tablice

    Kontrolira kako web preglednik crta tablicu i može malo utjecati na brzinu kojom preglednik prikazuje. Ovo svojstvo može imati jednu od četiri vrijednosti.

    Sintaksa: table-layout: auto|fixed|initial|inherit;

    Zadano svojstvo je auto.

    1. Izgled tablice: automatski: Automatsko prilagođavanje širine elemenata automatski se prilagođava sadržaju.

    2. Izgled tablice: fiksno : Fiksna postavka prisiljava preglednik da sve stupce prikazuje u istoj širini kao i stupci u prvom redu. Ako sadržaj ide šire od prvog reda, tada će se sadržaj zamotati, prerezati ili proširiti izvan ćelija.

    Kodirati

    Izlaz:

    3. Izgled tablice: početni: Koristi se za postavljanje svojstva na zadanu vrijednost.

    4. Izgled tablice: naslediti : Nasljeđuje ovo svojstvo od svog nadređenog elementa.

    Zaključak

    Uz pomoć CSS-a, možemo napraviti elegantne tablice i poboljšati izgled stola.

    Preporučeni članci

    Ovo je vodič za CSS oblikovanje tablice. Ovdje smo raspravljali o svojstvima s kodovima, izlazima i sintaksom CSS tablice Styling. Možete i pregledati naše članke da biste saznali više -

    1. Prednosti CSS-a
    2. Upotrebe CSS-a
    3. Uvod u CSS
    4. CSS oblikovanje teksta

    Kategorija:

    Alati za web razvoj