Eksempler på vakre css-tabeller. Cellebakgrunnsfarge. Hvordan fjerne gapet mellom cellekantene

Legg igjen en kommentar 6,950

Mange webansvarlige vil garantert bruke HTML-tabeller i maler er dårlig praksis. Men i denne leksjonen vi skal bare se på CSS-tabeller. Hva er forskjellen mellom HTML- og CSS-tabeller? Må jeg bruke CSS-tabeller? Hvis ja, hvordan?

Hvordan lage en CSS-tabell

CSS-tabellmodellen er basert på HTML4-tabellmodellen og støttes godt av nettlesere. I begge modellene eksisterer tabellstrukturen parallelt med den visuelle presentasjonen.

Hovedelementene i strukturen er strenger. Raden er definert eksplisitt, og kolonnene avhenger av hvordan radene og cellene er definert.

Du har sikkert jobbet med HTML-tabeller før. I så fall vil du ikke ha noe problem med å lage CSS-tabeller.

Hvert HTML-tabellelement har en CSS-ekvivalent. Den eneste forskjellen er at det ikke er noen forskjell mellom td og th i CSS-varianten.

Nedenfor er en liste over HTML-tabellelementer og deres tilsvarende CSS-verdier.

Tabell (display: table) tr (display: table-row) thead (display: table-header-group) tbody (display: table-row-group) tfoot (display: table-footer-group) col (display: table- kolonne) colgroup (display: table-column-group) td, th (display: table-cell) caption (display: table-caption)

Bildetekster kan plasseres øverst eller nederst i tabellen ved å bruke egenskapen på bildetekstsiden:

#caption (caption-side: top) #caption (caption-side: bottom)

Det er ikke vanskelig å finne ut hvordan du lager en CSS-tabell fra følgende liste. Her er et eksempel på en tabell.

#tabell (display: table;) .row (display: table-row;) .cell (display: table-cell;)

Hvis du ser på koden HTML eksempel, kan du enkelt skille strukturen til tabellen (ved å bruke div og span-elementer med klasser og ID i stedet for table, td og tr).

Med svært lite CSS vises div- og span-elementene som en tabell.

I tillegg til egenskapene ovenfor, inkluderer CSS-tabellmodellen en inline-tabellverdi som definerer nytt bord som display: table, men innenfor konteksten til det HTML-innebygde formatet.

Kolonner og deres gruppering

Siden tabellceller er etterkommere av tabellrader, er det fornuftig å bruke noen egenskaper for å danne kolonner. CSS-tabellmodellen lar deg søke følgende egenskaper for kolonner og deres gruppering:

grense- en felles eiendom, så lenge grensekollapseegenskapen ikke brukes for et tabellelement;
bakgrunn- den vanlige egenskapen, så lenge raden og cellen har en gjennomsiktig bakgrunn;
bredde- innstilling av kolonnebredden;
synlighet- hvis kollaps (den eneste tilgjengelig verdi), vil ikke kolonnecellen vises (den er slått sammen med andre kolonner og tabellbredden er justert).

CSS-tabellstabel

Ulike bordelementer har forskjellig nivå på en stabel for å tillate forskjellige bakgrunner på forskjellige lag.

Disse lagene kan sees i figuren nedenfor.

tabellen er det laveste laget
kolonnegruppe
kolonner
gruppe av linjer
strenger
celler - det øverste laget

Bakgrunnen til laget vil bare være synlig hvis det underliggende laget har en gjennomsiktig bakgrunn.

den flott måteå skrive ut tomme celler som er virkelig tomme ved å bruke gjennomsiktig bakgrunn for dem, der en rad, kolonne eller tabell vil være synlig.

Tabellmalalgoritme

Bredden på en CSS-tabell kan beregnes ved hjelp av en av to algoritmer. Algoritmen velges ved å bruke egenskapen tabelloppsett og to verdier:

fikset(fast) - bredden på malen bestemmes ikke av innholdet, men ved å angi bredden på tabellen, celler, rammer og avstanden mellom cellene;
auto(automatisk) - bredden på tabellen er satt basert på bredden på kolonnene og kantene.

Den faste malmodellen beregnes én gang og er veldig rask. EN automatisk modus(standard) krever flere passeringer gjennom HTML-tabellen.

Hvis du eksplisitt definerer bredden på tabellen, bør du bruke beregningsmodellen for fast bredde.

Som standard er cellehøyden satt til minimum som kreves for å vise innhold. Men du kan eksplisitt definere høyden på cellen. Alle cellene i raden vil ha høyden til cellen med maksimal verdi.

Egenskapen vertikal-justering bestemmer justeringen av innholdet på linjen

grunnlinje
bunn
midten
sub, super, tekst-topp, tekst-bunn,<длина>, <процент>

Den siste gruppen med verdier brukes ikke på celler, men på teksten i dem. Cellene i dette tilfellet vil bli justert i henhold til grunnlinjeverdien.

CSS bordrammer

Det er tre interessante egenskaper for bordkanter:

grensekollaps- kan være kollaps, separat eller arve
grenseavstand- kan ha betydning<расстояние_по_горизонтали>, <расстояние_по_вертикали>, eller arve. Bestemmer avstanden mellom cellekantene.
tomme celler- kan vise, skjule eller arve. Hvis cellen er tom eller har en synlighet: skjult egenskap, vil ikke innholdet vises som standard. Innstilling av tomme celler: show-egenskapen vil vise bakgrunnen og rammen for den tomme cellen.

Må jeg bruke CSS-tabeller?

Er CSS-tabeller bedre enn HTML-tabeller? I så fall, hva er fordelene deres? Hvis ikke, hvorfor bør de ikke brukes? Gode spørsmål, som det ikke finnes et enkelt svar på.

Ser man på bruken av HTML-tabeller versus en kombinasjon av divs og CSS-kode, dukker følgende ulemper ved tabeller opp:

Ekstra koding- HTML-tabeller krever ekstra strukturkoding i forhold til div elementer... Men CSS-tabeller krever også ekstra klasser og identifikatorer.
Stiv struktur– HTML-tabeller er veldig tett bundet til innholdet. Rekkefølgen på cellene skal være den samme som den vil bli vist. Men den samme begrensningen gjelder for CSS /
Utdata i nettlesere- nettlesere gjør flere gjennomganger HTML-struktur tabeller. Men situasjonen vil være lik for CSS-tabeller.

Som nevnt ovenfor har ikke CSS-tabeller betydelige fordeler i forhold til HTML-tabeller når de brukes i maler.

CSS-tabeller er en mer semantisk løsning da det er et klart skille mellom datastruktur og presentasjon.

Konklusjon

CSS-tabeller er enkle å lære og bruke. Men de har ingen klar fordel i forhold til HTML-tabeller, bortsett fra mer semantisk kode.

Kanskje praksis vil vise fordelene eller ulempene med CSS-tabeller. Har du noen erfaring med å bruke CSS-tabeller i virkelige prosjekter?

Uten stiler ser bordet vårt ganske enkelt og ubestemmelig ut:

Figur 1. Visning av tabellen uten stiler.

La oss legge til litt styling for å få det til å se penere ut:

Nedtrekksmenyen

Elv	Lengde (km)	Dreneringsbasseng
Amazon	6992	6915000
Nilen	6852	3349000
Yangtse	5800	1800000

Tabellen vår ser nå slik ut:

Figur 2. Visning av tabellen med stiler.

I denne stilen må du ta hensyn til regelen:

/ * Angi linjeutheving ved hover * / tr + tr: hover (bakgrunnsfarge: # e6e3da;)

Den bruker en søskenvelger (plusstegn) og: hover pseudo-klassen, som bestemmer stilen til elementet når musen svever over det.

Vi trenger ikke å endre bakgrunnsfargen på tabelloverskriften når du peker, ikke sant? Vi må endre bakgrunnsfargen for alle linjene bortsett fra den første.

Den tilstøtende tr + tr-velgeren vil bli brukt på alle linjer unntatt den første. Les mer om tilstøtende velgere her. Og pseudoklassen: hover indikerer at du bare trenger å bruke stilen fra CSS-regelen på hover.

Nå har vi ganske ekte eksempel tabeller. Bare husk at det kan være flere tabeller på siden og ikke alle trenger å pålegge denne stilen. For at stilen bare skal fungere for én tabell, tilordne en klasse til den, les CSS-klassene.

I eksemplet nedenfor er kommentaren kun for koden som er lagt til.

Nedtrekksmenyen

Elv	Lengde (km)	Dreneringsbasseng
Amazon	6992	6915000
Nilen	6852	3349000
Yangtse	5800	1800000

Ingenting har endret seg i dette eksemplet, men det burde det ikke. Det er bare det at hvis du nå lagrer dette eksemplet på datamaskinen din, og i eksemplet legger til en andre tabell, for eksempel, kopierer du den eksisterende tabellkoden, men sletter class = "river", men stilen vil bare bli brukt på tabellen med settklassen. den enkle grunnleggende CSS.

Andre eksempel

La oss nå angi følgende oppgave: du må velge den første kolonnen med lys i grått.

For å løse dette problemet vil vi bruke: førstebarns-pseudo-klassen. Med denne pseudoklassen kan du referere til de første cellene i hver rad.

Eksempeltabell

Navn:	Jack
Etternavn:	London

Dette er et veldig enkelt eksempel. La oss referere til disse elementene ved å bruke underordnede velgere.

I vår kode, taggen stamfar , og han har en stamfar

, det vil si at barnevelgeren skal være slik:

Eksempeltabell

Navn:	Jack
Etternavn:	London

Og nå ser vi at stilen vår ikke fungerer. Hvorfor? Tross alt er velgeren riktig ved første øyekast. Saken er at etter taggen

det er alltid et merke ... Det er der, selv om det ikke er stavet i koden. Derfor vil koden fungere:

Eksempeltabell

Navn:	Jack
Etternavn:	London

Du bør definitivt vite dette punktet når du arbeider med tabeller.

Nå ett punkt til, selv om det ikke har noen direkte relasjon til tabeller, men når du arbeider med dem, kan lignende spørsmål ofte dukke opp. La oss vurdere det på eksemplet med denne koden. For eksempel vil vi sette bakgrunnsfargen til rød for cellene i den siste raden. Vi vil bruke klassen (class = "my-td") til dette.

Eksempeltabell

Navn:	Jack
Etternavn:	London

Som et resultat jobbet klassen i den andre cellen ("London"), men fungerte ikke i den første cellen som velgeren ble utløst for table> tbody> tr> td: første barn.

Hvorfor skjedde det?

Fordi velgeren table> tbody> tr> td: første barn har mer "vekt" (betydning) for CSS, siden det er mer spesifikt.

Hvordan fikse det?

En mer spesifikk velger kan brukes til å definere klassen: tabell> tbody> tr> td.my-td.

Du kan bruke! Viktig regel. Denne regelen prioriterer stil; denne bruken av denne regelen regnes som en kantsak.

Eksempeltabell

Navn:	Jack
Etternavn:	London

I stedet for klasser, i dette tilfellet, kan du bruke ID-identifikatorer, deres prioritet er høyere og stilen vil bli utført.

Hver nettleser har sine egne prioriteringer, jeg har ikke lest om en streng standard noe sted. Men generelle regler det er:

jo mer spesifikk velgeren er, desto større er vekten;
ID er viktigere enn klasse.

Selvfølgelig er dette emnet ikke direkte relatert til HTML-tabeller, vi så bare på et eksempel på velgerprioritet ved å bruke eksemplet med tabeller.

Men når det gjelder CSS, husk at CSS ikke fungerer bra for å velge tabellceller (tag ). Det er bedre å tilordne en klasse til en streng (tag ), og bruk deretter velgeren med pseudoklassen td: nth-child (n) for å spesifisere ønsket celle.

Tabeller er et mye brukt element for å presentere ulike data i presentasjoner, forelesninger, flyers med mer. På grunn av deres klarhet, allsidighet og enkelhet, er tabeller også mye brukt på nettsteder for bedre å formidle til leseren nødvendig materiale... Ved å legge til all kraften til stiler til tabeller, kan du med stor suksess tilpasse tabeller inn i utformingen av nettstedet, visuelt og vakkert presentere tabelldata.

Bordbredde

Som standard settes bredden på tabellen av nettleseren uavhengig, basert på mengden tabelldata i den. Hvis det er mye tekst i cellene, vil tabellen oppta hele bredden som er tilgjengelig for den, og hvis det ikke er nok tekst, vil tabellens bredde automatisk reduseres. Hvis det er flere tabeller på siden, ser deres forskjellige bredder noen ganger slurvete ut. Så det er bedre å eksplisitt angi bredden på tabellen i prosenter, piksler, em eller hva som helst. CSS-enheter som vist i eksempel 1.

Eksempel 1. Tabellbredde i prosent

Tabell (bredde: 100 %;) .tbl-medium (bredde: 60 %;) .tbl-small (bredde: 200px;)

V dette eksemplet bredde 100 % gjelder for alle bord. Igjen hjelper klassene med å angi bredden for de valgte tabellene ved å bruke den tidligere opprettede klassen. For å spesifisere en tabellbredde på 200 piksler, legg til elementet

klasse tbl-liten.

Justere tabeller

Til å begynne med er en hvilken som helst tabell plassert på venstre kant av nettleservinduet. Du kan justere den til midten, hvis bare bordet ikke opptar hele tilgjengelig område med andre ord mindre enn 100 %. For å gjøre dette, legg til innrykk i tabellstilen gjennom margegenskapen med auto-verdien, som vist i eksempel 2.

Eksempel 2. Justere en tabell ved hjelp av marger

bord

...

I dette eksemplet er alle tabeller på siden midtstilt.

Bakgrunnsfarge

Bakgrunnsfargen til alle tabellceller samtidig settes gjennom bakgrunnsegenskapen, som brukes på tabellvelgeren. Når du gjør det, husk reglene for bruk av stiler, spesielt arven av egenskaper til elementer. Hvis du samtidig som tabellen setter fargen for velgeren td eller th, vil den bli satt som bakgrunn (eksempel 3).

Eksempel 3. Bakgrunnsfarge

bord

Tilkoblingstype
Tilkoblingstype	Aksel	Erme
Gratis	H9	D10
Vanlig	N9	Jeg _s 9
Tett	P9

Resultatet av dette eksemplet er vist i fig. 1.

Ris. 1. Endre bakgrunnsfargen

Hvis vi trenger å lage en sebra, er dette navnet på vekslende linjer. annen farge så bør du bruke: nth-child pseudo-klassen ved å legge den til tr-velgeren. For å få sebraen til å forplante seg bare til bordets kropp, og ikke til overskriften, vil vi skille dem fra hverandre ved hjelp av elementer og (eksempel 4).

Eksempel 4. Lage en sebra

bord

Størrelsesintervaller, mm	IT-toleranse, μm, for kvalitet
Størrelsesintervaller, mm	5	6	7	8
Frem til 3	4	6	10	14
St. 3 til 6	5	8	12	18
St. 6 til 10	6	9	15	22
St. 10 til 18	8	11	18	27
St. 18 til 30	9	13	21	33
St. 30 til 50	11	16	25	39
St. 50 til 80	13	19	30	46

Resultatet av dette eksemplet er vist i fig. 2.

Ris. 2. Sebra

Den partallsverdien til: nth-child velgeren bruker stilen på alle partallslinjer og setter bakgrunnsfargen deres. Du kan også endre det til oddetall, da vil de odde linjene bli uthevet i grått.

På samme måte er ikke rader, men kolonner uthevet i farger, for dette bør du bruke tbody td: nth-child (even) selector.

Marginer i celler

Et felt er avstanden mellom kanten til en celle og innholdet. Uten marginer "fester" teksten i tabellen seg til rammen, og svekker dermed oppfatningen, mens å legge til marger forbedrer tekstens lesbarhet. Til dette formål brukes padding style-egenskapen, som fungerer med td eller th-velgeren, som vist ovenfor i eksempel 3 og 4. Vanligvis er én verdi spesifisert, den setter deretter det tomme rommet rundt innholdet i cellen fra alle sider med en gang. To verdier skrives når det er nødvendig å sette forskjellige felt vertikalt (første verdi) og horisontalt (andre verdi).

Avstand mellom celler

Det er et lite tomt mellomrom mellom cellene, som ikke er synlig før du angir en kantlinje eller bakgrunnsfarge for cellene. Denne avstanden er i utgangspunktet 2px og kan endres ved å bruke egenskapen kantlinjeavstand ved å legge den til tabellvelgeren (eksempel 5).

Eksempel 5. Bruke kantavstand

Tabell (kantavstand: 3px; / * Avstand mellom celler * /) thead th (bakgrunn: # e08156; / * Topptekst bakgrunnsfarge * / farge: # 333; / * Tekstfarge * /) td, th (utfylling: 5px ; / * Felt i celler * / bakgrunn: # 4c715b; / * Bakgrunnsfarge til celler * / farge: # f5e8d0; / * Tekstfarge * /)

Ved å legge denne stilen til en hvilken som helst tabell, får vi resultatet vist i fig. 3.

Ris. 3. Visning av tabellen med avstanden mellom cellene

Hvis en kant-skjul-egenskap legges til i tabellen med verdien-skjul, ignoreres kant-avstand fordi det ikke lenger er mellomrom mellom cellene.

Kanter og rammer

For å tydelig skille innholdet i en celle fra en annen, legges grenser til cellene. Border style-egenskapen er ansvarlig for opprettelsen, som brukes på elementer ( eller ). Men her er vi fanget undervanns steiner... Siden det lages en ramme for hver celle, oppnås en kant med dobbel tykkelse ved kontaktpunktene til cellene. Det er flere måter å eliminere denne funksjonen på. Det enkleste er å bruke egenskapen border-collapse med collapse-verdien. Hans oppgave er å spore kontakten til linjene og, i stedet for en dobbel kant, skildre en enkelt. Det er nok å legge til denne egenskapen til tabellvelgeren, og så vil den gjøre alt på egen hånd (eksempel 6).

Eksempel 6. Bruk av egenskapen border-collapse for å lage tabellkanter

bord

O	X	X
O	O	X
X	X	O

Forskjellen mellom bordkanter med og uten grensekollapseegenskapen er vist i fig. 4.

Ris. 4. Tabellvisning ved bruk av kant-kollaps

I fig. 4a viser standard tabellrammen. Merk at i tabellen er alle linjer dobbel bredde. Ved å legge til kantkollaps fjernes denne funksjonen, og tykkelsen på alle linjene blir den samme (fig. 4b).

Linjer trenger ikke lages for alle sider av cellene; i henhold til designet kan de skille en rad eller kolonne fra en annen. For å gjøre dette bruker vi egenskapene border-bottom, border-venstre og lignende. Bruk kantlinjer på elementer , , og ikke, så vi legger dem til i tabellen og td-velgerne (eksempel 7).

Eksempel 7. Linjer mellom linjer

bord

Tilkoblingstype	Kilesporbreddetoleransefelt
Tilkoblingstype	Aksel	Erme
Gratis	H9	D10
Vanlig	N9	Jeg _s 9
Tett	P9

Resultatet av dette eksemplet er vist i fig. 5.

Ris. 5. Bord med horisontale linjer

Som standard er tekst i en tabellcelle venstrejustert og høydesentrert. Et unntak er elementet , definerer den en overskriftscelle der justeringen er sentrert. For å endre justeringen brukes stilen tekstjusteringsegenskap(eksempel 8).

Eksempel 8. Justere innholdet i cellene horisontalt

bord

Overskrift 1	Celle 1	Celle 2
Overskrift 2	Celle 3	Celle 4

I dette eksemplet, innholdet er venstrejustert og innholdet er det - i midten. Resultatet av eksemplet er vist nedenfor (fig. 6).

Ris. 6. Justering av tekst i celler

Vertikal justering i en celle skjer alltid i midten, med mindre annet er spesifisert. Dette er ikke alltid praktisk, spesielt for tabeller der innholdet i cellene varierer i høyde. I dette tilfellet er justeringen satt til øverste kant celler ved hjelp av vertikaljusteringsegenskaper med verdien øverst, som vist i eksempel 9.

Eksempel 9. Justering av innholdet i cellene vertikalt

bord

Tilkoblingstype	Kilesporbreddetoleransefelt
Tilkoblingstype	Aksel	Erme
Gratis	H9	D10
Vanlig	N9	Jeg _s 9
Tett	P9

I dette eksemplet er teksten justert til toppen. Resultatet av eksemplet er vist i fig. 7.

Tabelldata- informasjon som kan vises i form av en tabell og logisk delt inn i kolonner og rader. For å vise tabelldata på nettsider, bruk HTML-tag

, som er en beholder med innholdet i tabellen. HTML-tabellinnhold er beskrevet linje for linje, hver linje begynner med en åpningskode og avsluttes med en avsluttende tag .

Inne i merkelappen

tabellcellene er plassert, representert av tagger

eller

... Det er cellene som inneholder alt tabellinnholdet som vises på nettsiden.

Bordramme

Som standard vises en HTML-tabell på en nettside uten en kantlinje, for å legge til en kantlinje til en tabell, som alle andre elementer, bruk CSS-eiendom grense. Men du bør ta hensyn til det faktum at hvis du legger til en kant bare til elementet

, så vil den vises rundt hele bordet. For at tabellcellene også skal ha en kantlinje, må du angi kantegenskapen for elementene ... I praksis er det tider når det er nødvendig spesiell formatering kolonner, noe som er mulig på følgende måter:

ved å bruke taggen

Du kan angi bakgrunnen for et hvilket som helst antall kolonner;

ved å bruke tabellen td: første underordnede, tabell td: siste underordnede velgeren, kan du style den første eller siste kolonnen i tabellen (unntatt den første cellen i tabelloverskriften);

ved å bruke tabellvelgeren td: nth-child (kolonnevalgsregel), kan du style alle kolonner i tabellen.

Du kan lese mer om CSS-velgere.

5. Hvordan legge til en tittel i tabellen

Du kan legge til en tittel til en tabell ved å bruke taggen

Tabell, th, td (kant: 1px helt svart;) Prøv det "

Nå har både tabellen og cellene kanter, mens hver celle og tabell har sine egne kanter. Som et resultat dukket det opp et tomt mellomrom mellom rammene; egenskapen for grenseavstand lar deg kontrollere størrelsen på denne plassen, som er angitt for hele bordet. Du kan med andre ord ikke kontrollere gapene mellom ulike celler individuelt.

Selv om vi fjerner hullene mellom cellene ved å bruke verdien 0 til grenseavstandsegenskapen, vil kantene til cellene berøre hverandre, og dobles. Border-collapse-egenskapen brukes til å slå sammen cellekanter. Det kan ha to verdier:

separat: er standard. Cellene vises i kort avstand fra hverandre, hver celle har sin egen kantlinje.
kollaps: kobler sammen tilstøtende rammer til én, alle hull mellom celler, samt mellom celler og tabellrammen ignoreres.

Dokumentets navn

Navn	Etternavn
Homer	Simpson
Marge	Simpson

Navn	Etternavn
Homer	Simpson
Marge	Simpson

Prøv "

Bordstørrelse

Etter å ha lagt rammer til tabellceller, ble det merkbart at innholdet i cellene var for nært kantene. For å legge til ledig plass mellom kantene på cellene og innholdet deres, kan du bruke padding-egenskapen:

Th, td (polstring: 7px;) Prøv det "

Størrelsen på bordet avhenger av innholdet, men det oppstår ofte situasjoner når bordet er for smalt og det blir nødvendig å strekke det. Bredden og høyden på bordet kan endres ved å bruke bredde- og høydeegenskapene ved å stille inn nødvendige størrelser eller selve tabellen eller cellene:

Tabell (bredde: 70%;) th (høyde: 50px;) Prøv det "

Tekstjustering

Som standard er tekst i tabelloverskriftsceller senterjustert, og tekst i normale celler er venstrejustert, ved å bruke tekstjusteringsegenskapen kan du kontrollere den horisontale justeringen av tekst.

CSS-egenskapen for vertikal justering lar deg kontrollere den vertikale justeringen av tekstinnhold. Som standard er tekst vertikalt justert til midten av cellene. Vertikal justering kan overstyres med en av verdiene for vertikaljusteringsegenskapen:

topp: teksten er justert til toppen av cellen
midt: justerer teksten til midten (standard)
bunn: teksten er justert til bunnen av cellen

Dokumentets navn

Navn	Etternavn
Homer	Simpson
Marge	Simpson

Prøv "

Vekslende bakgrunnsfarge på tabellrader

Ved skanning av store tabeller som inneholder mange rader med stort beløp informasjon, kan det være vanskelig å holde styr på hvilke data som tilhører en bestemt rad. For å hjelpe brukere med å navigere, kan du bruke to forskjellige bakgrunnsfarger vekselvis. For å lage den beskrevne effekten kan du bruke klassevelgeren og legge den til i annenhver rad i tabellen:

Dokumentets navn

Navn	Etternavn	Posisjon
Homer	Simpson	far
Marge	Simpson	mor
Bart	Simpson	en sønn
Lisa	Simpson	datter

Prøv "

Å legge til et klasseattributt på annenhver linje er en kjedelig oppgave. Pseudoklassen: nth-child er lagt til CSS3 for å løse dette problemet på en alternativ måte. Nå kan effekten av interleaving oppnås utelukkende ved hjelp av CSS, uten å ty til å endre HTML-markeringen til dokumentet. Med pseudoklassen: nth-child er det mulig å velge alle oddetalls- eller partallsrader i en tabell ved å bruke en av søkeord: partall (partall) eller oddetall (oddetall):

Tr: nth-child (odd) (bakgrunnsfarge: # EAF2D3;) Prøv det "

Endre linjebakgrunn ved å holde musepekeren

En annen måte å forbedre lesbarheten til tabelldata er å endre bakgrunnsfarge linjer når du holder markøren over den med musepekeren. Dette vil bidra til å fremheve ønsket tabellinnhold og forbedre den visuelle oppfatningen av dataene.

Det er veldig enkelt å implementere denne effekten, for dette må du legge til: hover pseudo-klassen til tabellradvelgeren og angi ønsket farge bakgrunn:

Tr: hover (bakgrunnsfarge: # E0E0FF;) Prøv det "

Midtjustering av bordet

HTML-justering sentrering av en tabell er bare mulig hvis bredden på bordet er mindre enn bredden på det overordnede elementet. For å justere tabellen i midten, må du bruke margin-egenskapen og sette den til minst to verdier: den første verdien vil være ansvarlig for ytre polstring tabeller øverst og nederst, og den andre er for automatisk senterjustering:

Tabell (margin: 10px auto;) Prøv det "

Hvis du trenger forskjellige marginer øverst og nederst i tabellen, kan du sette margegenskapen til tre verdier: den første vil være ansvarlig for toppmargen, den andre for horisontal justering, og den tredje for bunnmargen:

Tabell (margin: 10px automatisk 30px;)

CSS-spesifikasjonen gir ubegrensede muligheter for design av bord. Som standard har ikke tabell- og tabellcellene synlige kanter og bakgrunner, og celler i tabellen er ikke ved siden av hverandre.

Bredden på tabellcellene bestemmes av bredden på innholdet, så bredden på tabellkolonnene kan være forskjellig. Høyden på alle cellene på rad er den samme og bestemmes av høyden på den høyeste cellen.

Formatering av tabeller

1. Bordkanter kant

Tabellen og cellene i den vises som standard i nettleseren uten synlige kanter. Bordkanter satt av grenseegenskapen:

Tabell (border-comlapse: collapse; / * fjern tomme mellomrom mellom cellene * / border: 1px solid grå; / * angi en ytre kant for tabellen grå 1px tykk * /)

Tittelcellekanter av hver kolonne er satt for det th elementet:

Th (kant: 1px solid grå;)

Cellekanter tabelllegemer er satt for td-elementet:

Td (kant: 1px solid grå;)

Rammetykkelse naboceller dobles ikke, så du kan sette grenser for hele bordet på følgende måte:

Th, td (kantlinje: 1px solid grå;)

Den ytre kanten av bordet kan velges ved å gi den en økt bredde:

Tabell (kant: 3px ensfarget grå;)

Kanter kan settes delvis:

/ * sett en 3px grå ytre kant for bordet * / tabell (border-top: 3px solid grå;) / * sett en 1px grå kant for tabellkroppscellen * / td (border-bottom: 1px solid grå;)

Mer om grenseeiendom du kan lese.

2. Hvordan stille inn bredde og høyde på bordet

Misligholde bordbredde og høyde bestemmes av innholdet i cellene. Hvis bredden ikke er spesifisert, vil den være lik bredden på et vidt utvalg av(strenger).

Tabell og kolonnebredde angi med bredde-egenskapen. Hvis tabell (bredde: 100%;) er spesifisert for en tabell, vil bredden på tabellen være lik bredden på containerblokken den er plassert i.

Bredden på tabellen og kolonnene er vanligvis spesifisert i px eller %, for eksempel:

Tabell (bredde: 600 px;) th (bredde: 20 %;) td: første barn (bredde: 30 %;)

Bordhøyde ikke satt. Høyden på radene tabeller kan manipuleres ved å legge til topp- og bunnpolstring til elementer

... Det anbefales ikke å fikse høyden ved hjelp av høydeegenskapen.

Th, td (polstring: 10px 15px;)

3. Hvordan sette bakgrunnen til bordet

Misligholde bordbakgrunn og cellene er gjennomsiktige. Hvis siden eller blokken som inneholder tabellen har en bakgrunn, vil den skinne gjennom tabellen. Hvis bakgrunnen er satt for både tabellen og cellene, vil bare bakgrunnen til cellene være synlig på stedene der bakgrunnen til tabellen og cellene overlapper hverandre. Bakgrunnen for tabellen som helhet og dens celler kan være:
fylle,
,
.

4. Tabellkolonner

CSS-tabellmodellen er hovedsakelig fokusert på strenger (rader) dannet ved hjelp av taggen

, og ved å bruke egenskapen på bildetekstsiden kan den plasseres foran eller under bordet. Til horisontal justering av tittelteksten brukes egenskapen tekstjustering. Nedarvet.

...

Tabell nr. 1
Selskap	Q1	Q2	Q3	Q4

bildetekst (tekstside: bunn; tekstjustering: høyre; utfylling: 10px 0; skriftstørrelse: 14px;)

Ris. 2. Et eksempel på visning av overskriften under tabellen

6. Hvordan fjerne gapet mellom cellerammer

Som standard er grensene til tabellceller atskilt med et lite mellomrom. Hvis vi setter border-collapse: collapse for bordet, vil gapet bli fjernet. Eiendommen går i arv.

Syntaks

Tabell (border-collapse: collapse;)
Ris. 3. Et eksempel på tabeller med flettede og delte cellekanter

7. Hvordan øke mellomrommet mellom cellekantene

Ved å bruke egenskapen kantlinjeavstand kan du endre avstanden mellom cellekantene. Denne eiendommen gjelder for tabellen som helhet. Nedarvet.

Syntaks

Tabell (border-collapse: separate; border-spacing: 10px 20px;) tabell (border-collapse: separate; border-spacing: 10px;) Ris. 4. Et eksempel på tabeller med økte mellomrom mellom cellerammer

8. Hvordan skjule tomme tabellceller

Egenskapen tomme celler skjuler eller viser tomme celler. Påvirker bare celler som ikke inneholder noe innhold. Hvis en bakgrunn er spesifisert for en celle, og tabell (border-collapse: collapse;) er spesifisert for en tabell, vil ikke cellen skjules. Nedarvet.

Selskap	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabell (border: 1px solid # 69c; border-collapse: separat; tomme-celler: hide;) th, td (border: 2px solid # 69c;)

Ris. 5. Et eksempel på å skjule en tom tabellcelle

9. Layout av tabelloppsettet ved å bruke egenskapen table-layout

Oppsettet til et bordoppsett bestemmes av en av to tilnærminger: fast oppsett eller automatisk oppsett. Layout betyr i dette tilfellet hvordan bredden på tabellen er fordelt mellom bredden på cellene. Eiendommen går ikke i arv.

Syntaks

Tabell (tabelloppsett: fast;)

10. Beste bordoppsett

1. Horisontal minimalisme

Horisontale tabeller er tabeller der tekst leses horisontalt. Hver enhet er en egen linje. Du kan style tabeller som dette i en minimalistisk stil ved å plassere en to-piksel kantlinje under overskriften.

Ansatt	Lønn	Bonus	Veileder
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabell (font-familie: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; skriftstørrelse: 14px; bakgrunn: hvit; maks-bredde: 70%; bredde: 70%; kant-kollaps: kollaps; tekst -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (farge: # 669; padding: 9px 8px; overgang: .3s lineær;) tr: hover td (farge: # 6699ff;)

På et stort antall rader, gjør denne utformingen av tabeller dem vanskelige å lese. For å løse dette problemet, kan du legge til en en-piksel kantlinje under alle td-elementer.

Td (kant-bunn: 1px solid #ccc; farge: # 669; polstring: 9px 8px; overgang: .3s lineær;) / * resten av koden - som i eksemplet ovenfor * /

Å legge til en: hover-effekt til tr-elementet gjør tabeller som er minimalistiske i stilen lettere å lese. Når du holder musepekeren over en celle, utheves resten av cellene i samme rad samtidig, noe som forenkler prosessen med å holde styr på informasjon hvis tabeller har flere kolonner.

Th (font-weight: normal; farge: # 039; polstring: 10px 15px;) td (farge: # 669; border-top: 1px solid # e8edff; polstring: 10px 15px;) tr: hover td (bakgrunn: # e8edff ;)

2. Vertikal minimalisme

Selv om slike tabeller sjelden brukes, er vertikalt orienterte tabeller nyttige for å kategorisere eller sammenligne beskrivelser av objekter representert av en kolonne. Du kan style dem i en minimalistisk stil ved å legge til et mellomrom som skiller kolonnene.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-venstre: 30px solid #fff; farge: # 039; polstring: 8px 2px;) td (border- høyre: 30px solid #fff; kantlinje-venstre: 30px solid #fff; farge: # 669; polstring: 12px 2px;)

3. "Box"-stil

Den mest pålitelige stilen for å dekorere bord av alle typer er den såkalte "boks"-stilen. Det er nok å plukke opp en god fargeskala, og angi deretter bakgrunnsfargen for alle celler. Husk å understreke forskjellen mellom linjer ved å sette grenser som skilletegn.

Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (bakgrunn : # e8edff; border-bottom: 1px solid #fff; farge: # 669; border-top: 1px solid transparent; polstring: 8px;) tr: hover td (bakgrunn: #ccddff;)

Det vanskeligste er å finne fargeskjemaet som passer harmonisk med nettstedet ditt. Hvis nettstedet er lastet med grafikk og design, vil det være ganske vanskelig for deg å bruke denne stilen.

Tabell (font-familie: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; maks-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- venstre: 1px solid # 9baff1; farge: # 039; polstring: 8px;) td (bakgrunn: # e8edff; border-right: 1px solid #aabcfe; border-venstre: 1px solid #aabcfe; farge: # 669; polstring: 8px ;)

4. Horisontal sebra

Zebra-bordet ser ganske attraktivt og hendig ut. Komplementær farge bakgrunnen kan tjene som en visuell pekepinn for folk til å lese tabellen.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (farge: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( bakgrunn: # e8edff;)

5. Avisstil

For å oppnå den såkalte aviseffekten kan du legge border på bordelementer og leke med cellene inni. En lett, minimalistisk avisstil kan se slik ut: lek med fargeskjemaet, legg til kanter, polstring, ulike bakgrunner, og: hover-effekten ved å sveve over en linje.

Tabell (border: 1px solid # 69c;) th (font-weight: normal; farge: # 039; border-bottom: 1px stiplet # 69c; polstring: 12px 17px;) td (farge: # 669; polstring: 7px 17px; ) tr: hover td (bakgrunn: #ccddff;)

Tabell (kant: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (farge: # 669; border-top: 1px stiplet #fff; padding: 10px; bakgrunn: #ccddff;) tr: hover td (bakgrunn: # 99bcff;)

Tabell (kant: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; teksttransform: store bokstaver; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-venstre: 1px solid # 0865c2; border-bottom: 1px solid #fff; polstring: 20px;) td (farge: # 669; kantlinje-høyre: 1px stiplet # 6cf; polstring: 10px) 20px;

6. Tabellbakgrunn

Hvis du er ute etter en rask og unik måte borddesign, velg et attraktivt bilde eller bilde relatert til bordtemaet og sett det som bakgrunn for bordet.

Jpg ") no-repeat; bakgrunnsposisjon: 100 % 55px;) th (font-weight: normal; color: # 339; padding: 10px 12px;) td (bakgrunn: url (" https: // site / images / tilbake..png "); bakgrunn: gjennomsiktig;)