Introduksjon om CSS Table Styling
Hvorfor vi bruker CSS, selv om vi kan bruke HTML-tabeller, skyldes at en tabellbasert sidelayout i HTML-tabellen ofte blir saktere enn en tilsvarende CSS-basert layout; Dette gjelder spesielt sider som har mye innhold. Tabeller skal ikke brukes som layouthjelpemidler. Og hvis vi bygger HTML-tabeller uten noen stiler eller attributter i nettleseren, vil den vises uten noen kant. Å style et bord med CSS kan forbedre utseendet.
CSS-tabeller er ganske enkle å forstå og bruke. Det er bare å huske de tilsvarende CSS-visningsegenskapens verdier for de grunnleggende HTML-tabellelementene. Ved hjelp av CSS er vi i stand til å lage noen stilige bord.
Hva er CSS Table Styling?
En CSS-tabell (Cascading Style Sheets) beskriver hvordan du legger ut et sett med elementer i rader og kolonner. Standard CSS brukt på en HTML-tabell er en CSS-tabell.
- CSS har designet og omdesign fleksibilitet.
- Det betyr at en CSS-basert layout sørger for at du plasserer alle stilene dine (dvs. fra små endringer til hovedreglene) på ett sted.
- Ved å endre layoutreglene du angir i det stilarket, og du påvirker hver side som refererer til det.
- CSS-basert sidelayout vil vanligvis vises raskere på skjermen, og til og med nedlastningen vil være raskere enn tabellbasert layout.
CSS Tabellstilegenskaper
Nedenfor er de forskjellige egenskapene til CSS-tabellstiler:
1. Grensekollaps
Det brukes til å indikere om grensene rundt cellene i et bord skal skilles eller kollapses.
Syntaks: border-collapse: separate|collapse|initial|inherit;
- Grensekollaps: atskilt: Det brukes slik at de tilstøtende cellene har egne og uavhengige grenser som ikke er delte.
syntax
border-collapse: separate;
Standardverdien som er satt til grensen for sammenbrudd-egenskapen er atskilt. Når de er atskilt, legger nettlesere et mellomrom på et par piksler mellom hver celle ved å bruke grense-avstand-egenskapen.
Kode
Produksjon:
- Grensekollaps: kollaps: Når vi setter egenskapen for grensekollaps til å kollapse, fjerner det mellomrommet mellom cellene.
syntax
border-collapse: collapse;
Kode
Utgang:
Selv om du eliminerer denne plassen ved å sette attributtet for celleavstand for HTML-koden til 0, viser nettlesere fremdeles doble rammer. Det vil si at den nederste grensen til en celle vil vises over den øverste grensen til cellen under, noe som forårsaker en dobling av grenselinjene. Hvis du setter grense-kollaps-egenskapen til å kollapse eliminerer både mellomrommet mellom celler og en dobling av grensen.
- Grensekollaps: initial: Den brukes til å sette grense-kollaps-egenskapen til standardverdien.
- Grensekollaps: arve: Den brukes når egenskapen til grensekollaps arver fra sine overordnede elementer. Denne egenskapen fungerer bare når den brukes til a
stikkord.
Verdier: kollaps, separat, initial, arve;
2. Grenseavstand
Den angir plassen ved siden av grensene og innholdet rundt bordet. Det ligner merkets celleavstand
attributt, bortsett fra at den har en valgfri annen verdi. Denne egenskapen fungerer bare når den brukes til a
stikkord.
syntax
border-spacing: Length|initial|inherit;Grenseavstanden tar vanligvis en eller to lengdeverdier. I denne er bare én verdi spesifisert, så definerer den både horisontal og vertikal avstand mellom celler.
Kode
Produksjon:
I dette, hvis to verdier er spesifisert, definerer den første verdien det horisontale avstandet mellom celler (mellomrom på hver side av hver celle) og den andre verdien definerer det vertikale avstandet mellom cellene. (plassen som skiller bunnen av en celle fra toppen av den under den).
3. Bildetekst-side
Bildetekst-egenskapen spesifiserer plasseringen av en tabelltekst. Når den brukes på en tabelltekst, bestemmer denne egenskapen om bildeteksten vises øverst eller nederst i tabellen. En bildetekst vil normalt vises øverst på bordet.
syntax
caption-side: top|bottom|initial|inherit;Denne egenskapen kan ha en av de fire verdiene:
- Bildetekst-side: øverst: Det er standardverdien. I dette setter den bildeteksten over bordet.
Syntaks:
caption-side:top;Kode
Produksjon:
- Bildetekst-side: nederst: setter bildeteksten under bordet.
Syntaks:
caption-side:bottom;Kode
Produksjon:
- Bildetekst-side: initial: Den brukes til å sette eiendommen til standardverdien.
- Bildetekst-side: arve: Arver denne egenskapen fra sitt overordnede element.
Verdier: topp, bunn, initial, arve;
4. Tomme celler
Den forteller nettleseren om den skal vise en tabellcelle som er helt tom. Den kontrollerer gjengivelsen av grensene og bakgrunnen til cellene som ikke har noe synlig innhold i en tabell som bruker den separate grensemodellen.
Syntaks:
empty-cells: show|hide|initial|inherit;Denne egenskapen kan ha en av de fire verdiene:
- Tom-celle: vis: Denne egenskapen brukes til å vise kantene på den tomme cellen.
Syntaks:
empty-cells:show;Kode
Produksjon:
- Tom-celle: skjul: Denne egenskapen brukes til å skjule grensene i tomcellen.
Syntaks:
empty-cells: hide;Kode
Produksjon:
- Tom-celle: initial : Den brukes til å sette egenskapen til standardverdien.
- Tom-celle: arve: Arver denne egenskapen fra det overordnede elementet.
Verdier: vis, skjule, innledende, arve;
5. Tabelloppsett
Styrer hvordan en nettleser tegner et bord og kan påvirke hastigheten som nettleseren viser den på. Denne egenskapen kan ha en av de fire verdiene.
Syntaks:
table-layout: auto|fixed|initial|inherit;Standardegenskapen er automatisk.
1. Tabelloppsett: auto: Auto gjør at bredden på elementene justeres automatisk for å passe til innholdet.
2. Tabell - layout: fast : Den faste innstillingen tvinger nettleseren til å gjengi alle kolonnene samme bredde som kolonnene i den første raden. Hvis innholdet blir bredere enn den første raden, vil innholdet bli pakket inn, avskåret eller utvidet utenfor cellene.
Kode
Produksjon:
3. Tabelloppsett: initial: Den brukes til å sette eiendommen til standardverdien.
4. Tabelloppsett: arve: Arver denne egenskapen fra det overordnede elementet.
Konklusjon
Ved hjelp av CSS kan vi lage stilige bord og vi kan forbedre utseendet på bordet.
Anbefalte artikler
Dette er en guide til CSS Table Styling. Her diskuterer vi egenskaper med koder, utganger og syntaks for CSS-tabell Styling. Du kan også gå gjennom artiklene våre for å lære mer -
- Fordeler med CSS
- Bruk av CSS
- Introduksjon til CSS
- CSS-tekstformatering