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 -
- Fordele ved CSS
- Anvendelser af CSS
- Introduktion til CSS
- CSS-tekstformatering