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 -
- Fördelar med CSS
- Användning av CSS
- Introduktion till CSS
- CSS-textformatering