Introduktion til CSS Table Styling

Hvorfor vi bruger CSS, selvom vi kan bruge HTML-tabeller, skyldes, at i en tabel-tabel ofte gengiver et tabelbaseret sidelayout langsommere end et ækvivalent CSS-baseret layout; dette gælder især sider, der har meget indhold. Tabeller bør ikke bruges som layouthjælpemidler. Og hvis vi bygger HTML-tabeller uden stilarter eller attributter i browseren, vises de uden nogen kant. Styling af et bord med CSS kan forbedre dets udseende.

CSS-tabeller er ret enkle at forstå og bruge. Det er bare et spørgsmål om at huske de tilsvarende CSS-visningsegenskabsværdier for de grundlæggende HTML-tabelelementer. Ved hjælp af CSS er vi i stand til at lave nogle stilfulde borde.

Hvad er CSS Table Styling?

En CSS (Cascading Style Sheets) -tabel beskriver, hvordan man sætter et sæt elementer i rækker og kolonner. Standard CSS anvendt på en HTML-tabel er en CSS-tabel.

  • CSS har designet og redesignet fleksibilitet.
  • Det betyder, at et CSS-baseret layout sikrer, at du placerer alle dine stilarter (dvs. fra små ændringer til de vigtigste regler) på et sted.
  • Ved at ændre de layoutregler, du indstiller på det typografiark, og du påvirker hver side, der refererer til det.
  • CSS-baseret sidelayout vises normalt hurtigere på skærmen, og endda downloadet er hurtigere end det tabelbaserede layout.

CSS-tabelstilegenskaber

Nedenfor er de forskellige egenskaber for CSS-tabelformater:

1. Grænse sammenbrud

Det bruges til at indikere, om grænserne omkring cellerne i en tabel skal adskilles eller kollapses.

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

  • Grænse sammenbrud: separat: Det bruges således, at de tilstødende celler har deres egne og uafhængige grænser, der ikke deles.

Syntaks

border-collapse: separate;

Standardværdien, der er indstillet til egenskaben grænse-sammenbrud, er separat. Når de er adskilt, lægger browsere et mellemrum på et par pixels mellem hver celle ved hjælp af egenskaben grænse-afstand.

Kode

Produktion:

  • Grænse sammenbrud: kollaps: hver gang vi indstiller egenskaben til grænse-sammenbrud til at kollaps fjerner det mellemrummet mellem cellerne.

Syntaks

border-collapse: collapse;

Kode

Output:

Selv hvis du fjerner dette rum ved at indstille celleafstandsattributten for HTML-mærket til 0, viser browsere stadig dobbeltgrænser. Det vil sige, den nederste kant af en celle vises over den øverste kant af cellen nedenfor, hvilket medfører en fordobling af grænserne. At indstille egenskaben til grænse-sammenbrud til at kollapse eliminerer både mellemrummet mellem celler og denne fordobling af grænserne.

  • Grænse sammenbrud: initial: Det bruges til at indstille egenskaben grænse-sammenbrud til dens standardværdi.
  • Grænse sammenbrud: arve: Den bruges, når egenskaben ved grænse-sammenbrud arver fra dens overordnede elementer. Denne egenskab fungerer kun, når den anvendes til en tag.

    Værdier: kollaps, separat, initial, arve;

    2. Grænseafstand

    Det indstiller pladsen tilstødende grænser og indholdet omkring bordet. Det svarer til tagets celleafstand

    attribut, medmindre det har en valgfri anden værdi. Denne egenskab fungerer kun, når den anvendes til en
    tag.

    Syntaks

    border-spacing: Length|initial|inherit;

    Grænseafstanden tager normalt en eller to længdeværdier. I denne kun er en værdi specificeret, så definerer den både for den vandrette og lodrette afstand mellem celler.

    Kode

    Produktion:

    I dette tilfælde, hvis to værdier er specificeret, definerer den første værdi den vandrette afstand mellem celler (mellemrummet på hver side af hver celle), og den anden værdi definerer den lodrette afstand mellem celler. (det rum, der adskiller bunden af ​​en celle fra toppen af ​​den derunder).

    3. Billedtekst-side

    Egenskaben på billedtekstsiden specificerer placeringen af ​​en tabeltekst. Når den anvendes på en tabeltekst, bestemmer denne egenskab, om billedteksten vises øverst eller nederst i tabellen. En billedtekst vises normalt øverst på bordet.

    Syntaks

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

    Denne egenskab kan have en af ​​de fire værdier:

    • Billedtekst-side: top: Det er standardværdien. I dette sætter det billedtekst over bordet.

    Syntaks: caption-side:top;

    Kode

    Produktion:

    • Billedtekst-side: bund: sætter billedtekst under tabellen.

    Syntaks: caption-side:bottom;

    Kode

    Produktion:

    • Billedtekst-side: initial: Det bruges til at indstille egenskaben til dens standardværdi.
    • Billedtekst-side: arve: Arver denne egenskab fra sit overordnede element.

    Værdier: top, bund, initial, arve;

    4. Tomme celler

    Den fortæller browseren, om den skal vise en tabelcelle, der er helt tom. Det kontrollerer gengivelsen af ​​grænserne og baggrunden for de celler, der ikke har noget synligt indhold i en tabel, der bruger den separate grænsemodel.

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

    Denne egenskab kan have en af ​​de fire værdier:

    • Tom-celle: vis: Denne egenskab bruges til at vise grænserne på den tomme celle.

    Syntaks: empty-cells: show;

    Kode

    Produktion:

    • Tom-celle: skjul: Denne egenskab bruges til at skjule grænserne i tomcellen.

    Syntaks: empty-cells: hide;

    Kode

    Produktion:

    • Tom-celle: initial : Det bruges til at indstille egenskaben til dens standardværdi.
    • Tom-celle: arve: Arver denne egenskab fra dens overordnede element.

    Værdier: vis, skjul, start, arv;

    5. Tabellayout

    Kontrollerer, hvordan en webbrowser tegner en tabel og kan lidt påvirke hastigheden, hvormed browseren viser den. Denne egenskab kan have en af ​​de fire værdier.

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

    Standardegenskaben er automatisk.

    1. Tabellayout: auto: Auto'en får elementernes bredde til at justeres automatisk, så de passer til indholdet.

    2. Tabel - layout: fast : Den faste indstilling tvinger browseren til at gengive alle kolonner den samme bredde som kolonnerne i den første række. Hvis indholdet bliver bredere end den første række, vil indholdet blive indpakket, afskåret eller få udvidet uden for cellerne.

    Kode

    Produktion:

    3. Tabellayout: initial: Det bruges til at indstille egenskaben til dens standardværdi.

    4. Tabellayout : arve: Arver denne egenskab fra sit overordnede element.

    Konklusion

    Ved hjælp af CSS kan vi lave stilfulde borde, og vi kan forbedre bordets udseende.

    Anbefalede artikler

    Dette er en guide til CSS Table Styling. Her diskuterer vi egenskaber med koder, output og syntaks i CSS-tabel Styling. Du kan også gennemgå vores givne artikler for at lære mere -

    1. Fordele ved CSS
    2. Anvendelser af CSS
    3. Introduktion til CSS
    4. CSS-tekstformatering

    Kategori:

    Webudviklingsværktøjer