Uvod v CSS oblikovanje tabel
Zakaj uporabljamo CSS, čeprav lahko uporabljamo tabele HTML, je zato, ker v tabeli HTML postavitev strani na podlagi tabel pogosto upodablja počasneje kot enakovredna postavitev na osnovi CSS; to še posebej velja za strani, ki imajo veliko vsebine. Tabele se ne smejo uporabljati kot pripomočki za postavitev. In če v brskalniku zgradimo tabele HTML brez kakršnih koli stilov ali atributov, bodo prikazane brez meja. Oblikovanje mize s CSS lahko izboljša njen videz.
Tabele CSS so dokaj preproste za razumevanje in uporabo. Le zapomnite si ustrezne vrednosti lastnosti prikaza CSS za osnovne elemente tabele HTML. S pomočjo CSS smo sposobni narediti nekaj elegantnih miz.
Kaj je CSS tabela?
Tabela CSS (Cascading Style Sheets) opisuje, kako postaviti niz elementov v vrstice in stolpce. Privzeti CSS, ki se uporablja za tabelo HTML, je tabela CSS.
- CSS je zasnoval in preoblikoval prilagodljivost.
- Pomeni, da zasnova postavitve na CSS zagotavlja, da na enem mestu postavite vse svoje sloge (tj. Od majhnih sprememb do glavnih pravil).
- S spreminjanjem pravil za postavitev, ki jih nastavite v tem slogu, in vplivate na vsako stran, ki se nanjo nanaša.
- Oblika strani na osnovi CSS se običajno pojavi hitreje na zaslonu in tudi prenos bo hitrejši od postavitve na osnovi tabel.
Lastnosti stila tabele CSS
Spodaj so različne lastnosti stilov tabel CSS:
1. Propad meje
Uporablja se za označevanje, ali je treba meje okoli celic tabele ločiti ali strniti.
Sintaksa: border-collapse: separate|collapse|initial|inherit;
- Propad meje: ločen: Uporablja se tako, da imajo sosednje celice svoje in neodvisne meje, ki se ne delijo.
Sintaksa
border-collapse: separate;
Privzeta vrednost, ki je nastavljena na lastnosti meje-zrušitev, je ločena. Ko se ločijo, brskalniki postavijo presledek nekaj slikovnih pik med vsako celico s pomočjo lastnosti razmika obrob.
Koda
Izhod:
- Zrušitev meje: kolaps: vsakič, ko nastavimo lastnost meje-zrušitev meje, se odstrani prostor med celicami.
Sintaksa
border-collapse: collapse;
Koda
Izhod:
Tudi če ta prostor odpravite tako, da atribut presledka v celicah za oznako HTML nastavite na 0, brskalniki še vedno prikazujejo dvojne meje. To pomeni, da se bo spodnja meja ene celice pojavila nad zgornjo mejo celice spodaj, kar bo podvojilo meje. Če lastnost meje-zruši mejo na sesutje odpravi prostor med celicami in podvojitev meja.
- Zrušitev meje: začetno: Uporablja se za nastavitev lastnosti meje-zrušitve na privzeto vrednost.
- Zrušitev meje: podeduje: Uporablja se, ko lastnost meje-zruši podeduje od nadrejenih elementov. Ta lastnost deluje samo, če je uporabljena za
oznaka.
Vrednosti: zrušiti, ločiti, začetno, podedovati;
2. Mejni razmik
Nastavi prostor sosednje meje in vsebino, ki obdaja mizo. Podobno je s celičnim presledkom oznake
atribut, razen da ima poljubno drugo vrednost. Ta lastnost deluje samo, če je uporabljena za
oznaka.
Sintaksa
border-spacing: Length|initial|inherit;Mejni razmik običajno sprejme eno ali dve vrednosti dolžine. V tem je podana samo ena vrednost, ki jo določa vodoravni in navpični razmik med celicami.
Koda
Izhod:
Če sta podani dve vrednosti, prva vrednost določa vodoravni razmik med celicami (prostor na obeh straneh vsake celice), druga vrednost pa vertikalni razmik med celicami. (prostor, ki loči dno ene celice od vrha tiste pod njo).
3. Na strani z napisom
Lastnost na strani naslova določa umestitev napisa. Ko se uporablja za napise tabele, ta lastnost določa, ali se napis pojavi na vrhu ali na dnu tabele. Na napisu se običajno pojavi napis.
Sintaksa
caption-side: top|bottom|initial|inherit;Ta lastnost ima lahko eno od štirih vrednosti:
- Naslov s strani napisov: vrh: To je privzeta vrednost. Pri tem napis doda nad tabelo.
Sintaksa:
caption-side:top;Koda
Izhod:
- Na strani z napisom : spodnji del: napis doda pod tabelo.
Sintaksa:
caption-side:bottom;Koda
Izhod:
- Naslov strani: začetni: Uporablja se za nastavitev lastnosti na privzeto vrednost.
- S strani napisov: deduje: Podeduje to lastnost od svojega nadrejenega elementa.
Vrednosti: vrh, dno, začetno, podedovati;
4. Prazne celice
Brskalniku pove, ali naj prikaže celico tabele, ki je popolnoma prazna. Nadzira upodabljanje obrob in ozadja celic, ki nimajo vidne vsebine v tabeli, ki uporablja model ločenih meja.
Sintaksa:
empty-cells: show|hide|initial|inherit;Ta lastnost ima lahko eno od štirih vrednosti:
- Prazna celica: pokaži: Ta lastnost se uporablja za prikaz meja prazne celice.
Sintaksa:
empty-cells:show;Koda
Izhod:
- Prazna celica: skrij: Ta lastnost se uporablja za skrivanje meja v prazni celici.
Sintaksa:
empty-cells: hide;Koda
Izhod:
- Prazna celica: začetna : Uporablja se za nastavitev lastnosti na privzeto vrednost.
- Prazna celica: deduje: Podeduje to lastnost od svojega nadrejenega elementa.
Vrednote: pokazati, skriti, začetno, podedovati;
5. Postavitev tabele
Nadzira, kako spletni brskalnik nariše tabelo in lahko rahlo vpliva na hitrost prikaza brskalnika. Ta lastnost ima lahko eno od štirih vrednosti.
Sintaksa:
table-layout: auto|fixed|initial|inherit;Privzeta lastnost je samodejna.
1. Postavitev tabele: samodejno: samodejno prilagodi širino elementov, da se samodejno prilagodijo vsebini.
2. Postavitev tabele: fiksna : Fiksna nastavitev prisili brskalnik, da postane vse stolpce enake širine kot stolpci v prvi vrstici. Če gre za vsebino širšo od prve vrstice, bo vsebina zavita, odrezana ali razširjena zunaj celic.
Koda
Izhod:
3. Postavitev tabele: začetna: Uporablja se za nastavitev lastnosti na privzeto vrednost.
4. Postavitev tabele: deduje: Podeduje to lastnost od svojega nadrejenega elementa.
Zaključek
S pomočjo CSS lahko naredimo elegantne mize in lahko izboljšamo videz mize.
Priporočeni članki
To je vodnik za CSS oblikovanje tabel. Tukaj razpravljamo o lastnostih s kodami, izhodi in sintakso CSS tabele Styling. Obiščite lahko tudi naše dane članke, če želite izvedeti več -
- Prednosti CSS
- Uporabe CSS
- Uvod v CSS
- Oblikovanje besedila CSS