Introduktion om CSS Table Styling

Varför vi använder CSS, även om vi kan använda HTML-tabeller, beror på att en tabellbaserad sidlayout i HTML-tabellen ofta gör långsammare än en motsvarande CSS-baserad layout; detta gäller särskilt sidor som har mycket innehåll. Tabeller ska inte användas som layouthjälpmedel. Och om vi bygger HTML-tabeller utan några stilar eller attribut i webbläsaren kommer det att visas utan någon kant. Att utforma ett bord med CSS kan förbättra sitt utseende.

CSS-tabeller är ganska enkla att förstå och använda. Det handlar bara om att komma ihåg motsvarande CSS-visningsegenskapsvärden för de grundläggande HTML-tabellelementen. Med hjälp av CSS kan vi skapa några snygga bord.

Vad är CSS Table Styling?

En CSS (Cascading Style Sheets) -tabell beskriver hur du lägger upp en uppsättning element i rader och kolumner. Standard CSS som används på en HTML-tabell är en CSS-tabell.

  • CSS har utformat och omdesign flexibilitet.
  • Det betyder att en CSS-baserad layout säkerställer att du placerar alla dina stilar (dvs. från små ändringar till de viktigaste reglerna) på en plats.
  • Genom att ändra layoutreglerna som du anger i det formatmallen och du påverkar varje sida som hänvisar till det.
  • CSS-baserad sidlayout kommer vanligtvis att visas snabbare på skärmen och även nedladdningen kommer att vara snabbare än den tabellbaserade layouten.

CSS-tabellstilegenskaper

Nedan visas de olika egenskaperna för CSS-tabellformat:

1. Gräns ​​kollaps

Det används för att indikera om gränserna runt cellerna i en tabell ska separeras eller kollapsas.

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

  • Gräns ​​kollaps: separat: Det används så att de angränsande cellerna har sina egna och oberoende gränser som inte delas.

Syntax

border-collapse: separate;

Standardvärdet som är inställt på egenskapen gräns-kollaps är separat. När de är separerade lägger webbläsare ett mellanrum på ett par pixlar mellan varje cell med hjälp av egenskapen gränsavstånd.

Koda

Produktion:

  • Gräns ​​kollaps: kollaps: när vi ställer in egenskapen gräns-kollaps för att kollapsa tar det bort utrymmet mellan cellerna.

Syntax

border-collapse: collapse;

Koda

Utgång:

Även om du eliminerar detta utrymme genom att ställa in cellavståndets attribut för HTML-taggen till 0, visar webbläsare fortfarande dubbla gränser. Det vill säga att den ena cellens botten visas ovanför den övre gränsen för cellen nedan, vilket orsakar en fördubbling av gränserna. Att ställa in gränsen-kollaps-egenskapen att kollapsa eliminerar både utrymmet mellan cellerna och denna fördubbling av gränserna.

  • Gräns ​​kollaps: initial: Det används för att ställa in egenskapen gräns-kollaps till dess standardvärde.
  • Gräns ​​kollaps: ärva: Det används när egenskapen gräns kollaps ärver från dess överordnade element. Den här egenskapen fungerar endast när den tillämpas på a märka.

    Värden: kollaps, separat, initial, ärva;

    2. Gränsavstånd

    Det anger utrymmet intill gränserna och innehållet som omger bordet. Det liknar taggens cellavstånd

    attribut, förutom att det har ett valfritt andra värde. Den här egenskapen fungerar endast när den tillämpas på a
    märka.

    Syntax

    border-spacing: Length|initial|inherit;

    Gränsavståndet tar vanligtvis en eller två längdvärden. I detta specificeras endast ett värde, då definieras det för både det horisontella och vertikala avståndet mellan celler.

    Koda

    Produktion:

    Om det här anges två värden definierar det första värdet det horisontella avståndet mellan cellerna (utrymmet på vardera sidan av varje cell) och det andra värdet definierar det vertikala avståndet mellan cellerna. (utrymmet som separerar botten på en cell från toppen av den under den).

    3. Bildtext

    Egenskapen på bildtexten anger placeringen av en tabelltexter. När den tillämpas på en tabelltexter, bestämmer den här egenskapen om bildtexten visas längst upp eller längst ner i tabellen. En bildtext skulle normalt visas längst upp i tabellen.

    Syntax

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

    Den här egenskapen kan ha ett av de fyra värdena:

    • Bildtexten: top: Det är standardvärdet. I detta sätter det bildtexten ovanför bordet.

    Syntax: caption-side:top;

    Koda

    Produktion:

    • Bildtexten: botten: sätter bildtexten under bordet.

    Syntax: caption-side:bottom;

    Koda

    Produktion:

    • Bildtext-sida: initial: Den används för att ställa in egenskapen till dess standardvärde.
    • Bildtext-sida: ärva: Ärver den här egenskapen från dess överordnade element.

    Värden: topp, botten, initial, ärva;

    4. Tomma celler

    Den berättar för webbläsaren om den ska visa en tabellcell som är helt tom. Det styr rendering av gränserna och bakgrunden för cellerna som inte har något synligt innehåll i en tabell som använder den separerade gränsmodellen.

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

    Den här egenskapen kan ha ett av de fyra värdena:

    • Tomcell: visa: Den här egenskapen används för att visa gränserna på den tomma cellen.

    Syntax: empty-cells: show;

    Koda

    Produktion:

    • Tomcell: dölj: Den här egenskapen används för att dölja gränserna i tomcellen.

    Syntax: empty-cells: hide;

    Koda

    Produktion:

    • Tomcell: initial : Den används för att ställa in egenskapen till dess standardvärde.
    • Tomcell: ärva: Ärver den här egenskapen från dess överordnade element.

    Värden: visa, dölja, initial, ärva;

    5. Tabelllayout

    Kontrollerar hur en webbläsare ritar en tabell och kan påverka hastigheten med vilken webbläsaren visar den. Den här egenskapen kan ha ett av de fyra värdena.

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

    Standardegenskapen är auto.

    1. Tabelllayout: auto: Auto gör att elementets bredd justeras automatiskt för att passa innehållet.

    2. Tabell - layout: fast : Den fasta inställningen tvingar webbläsaren att göra alla kolumner samma bredd som kolumnerna i den första raden. Om innehållet går bredare än den första raden, kommer innehållet att lindas, stängas av eller förlängas utanför cellerna.

    Koda

    Produktion:

    3. Tabelllayout: initial: Den används för att ställa in egenskapen till dess standardvärde.

    4. Tabelllayout: ärva: Ärver den här egenskapen från dess överordnade element.

    Slutsats

    Med hjälp av CSS kan vi skapa eleganta bord och vi kan förbättra bordets utseende.

    Rekommenderade artiklar

    Detta är en guide till CSS Table Styling. Här diskuterar vi egenskaper med koder, utgångar och syntax för CSS-tabell Styling. Du kan också gå igenom våra givna artiklar för att lära dig mer -

    1. Fördelar med CSS
    2. Användning av CSS
    3. Introduktion till CSS
    4. CSS-textformatering

    Kategori:

    Verktyg för webbutveckling