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 -

    1. Fordeler med CSS
    2. Bruk av CSS
    3. Introduksjon til CSS
    4. CSS-tekstformatering

    Kategori:

    Nettutviklingsverktøy