CSS: table design. eksempler på registrering

Making tabeller med CSS - av leksjonen interessant og ansvarlig. Tilnærming til denne virksomheten må kompetent, med kunnskap om alle mulige stiler. I tillegg er det nødvendig å ha en følelse av skjønnhet for ikke å skremme bort sin kreativitet besøkende.

Tabellene kan forvandle nesten alt. Vakker design innebærer bruk av CSS tabeller utforming grenser, bord bakgrunn, celle bakgrunn, gapet mellom dem og mer. Vurdere de mest grunnleggende.

table border

CSS tabellstil design innebærer alltid et spill med en ramme (frame). Alle standard tabeller er ikke konturer ramme. Det vil si, er det lik 0 piksler. Men dette kan rettes opp ved eiendommen grensen.

Du kan spesifisere den ytre rammen for hele tabellen:

bord {kant: 3px fast svart; }

Takket være denne linjen på alle bordene på nettstedet som bruker denne stilen er svart ramme. Legg merke til at grensen bare på kantene, men ikke inne i tabellen. For cellelinjer og rammen er spesifisert på annen måte.

th, td {kant: 3px fast svart;}

Tykkelsen og farge, kan du angi noen. Husk at grensene ikke er doblet når skjøting celler.

Ordet betegner en fast sammenhengende registrering. Du kan angi andre verdier.

det er mest brukt solid ramme, som det ser mer attraktivt og ikke avlede oppmerksomheten fra hovedinnholdet på nettstedet.

grensen eiendom kan spesifiseres også i styret. Grensen kan bare stilles for øverst, nederst, venstre eller høyre side. Fordi i noen tilfeller er det ikke et mulig alternativ med rammen for hele bordet samtidig.

tabell {border-top: 1 px konstant rødt; }

Så du kan sette rammen for toppen av bare bordet. I likhet med alle andre partier, i stedet for bare toppen skriver: høyre, venstre eller nederst.

tabelloverskriften

Tabell header kan angis ved hjelp av tag . Denne koden kan være i CSS for å registrere en rekke egenskaper for finjustering. CSS tabellen design er bra fordi det er mulig å manøvrere elementene slik du vil.

Dette tittel vises på samme måte som en standard i bøker (for eksempel "Tabell 1").

Du kan angi plasseringen av tittel og eiendom bildetekst-side (topp eller bunn). Justere venstre eller høyre er definert av eiendommen text-align.

bakgrunns tabeller

Bakgrunn av bordet kan være hvilken som helst farge eller mønster. Color setter en eiendom background-color. Navnene på eiendommene fullt forenlig med bruk i tale. Det forenkler lagring mange ganger.

Fargen kan spesifiseres som navnet, og forskjellige kodinger. I tillegg kan du spesifisere følgende:

• Transparent - gjennomsiktig.
• Arv - fargen er den samme som for den overordnede element.
• Initial - standard.

Alternativ med gjennomsiktighet kan brukes i de tilfeller hvor alle tabellene i teksten i CSS-filen er laget i en farge, men i dette tilfellet er det ikke nødvendig.

I tillegg kan bakgrunns være et bilde. For å gjøre dette, i stil skrevet background-image eiendom. Banen er som dette:

url ( 'URL')

Banen til filen kan enten være relativ eller absolutt.

Mer komplisert fyll kan gjøres med en gradient:

• lineær-gradient ();
• radial-gradient ();
• gjentagende-lineær-gradient () og gjentagelse-radial-gradient () - gradient gjentas.

bakgrunn celle

I tillegg til en bakgrunn generelt, kan du angi en stripete bakgrunn i kolonner eller rader. For registrering av eiendommen brukes veldig ofte, fordi den visuelle separasjon av linjene lettere å lese informasjonen.

I tillegg til veksling, og du kan angi antall av en bestemt kolonne eller rad. For eksempel slik:

• tr: n'te barn (selv) {...} - angi interlaced;
• tr: n-te-barn (1) {...} - angivelse av egenskapene til en bestemt rad;
• TD: n-te-barn (like) {...} - en indikasjon på vekslende kolonner;
• TD: n-te-barn (1) {...} - en indikasjon på egenskapene til en bestemt kolonne.

Foruten sekvens og tall kan spesifiseres - den første (td: first-child) eller siste (td: siste-barn).

Mellomrommet mellom cellene

I CSS, tabellen design gjør at du kan fjerne mellomrom mellom cellene. Som standard er de. For eksempel, hvis du setter rammen i tabellen uten å sette avstanden mellom grensene, vil det være her dette resultatet.

Enig, det ser ikke veldig hyggelig, og det er ikke praktisk å lese. Brukerne vil ha ringvirkninger i øynene på grunn av dette. Fjern disse hullene kan være ved å skrive nettopp en slik linje i tabellstil:

border-kollaps: kollaps

Men det skjer også at avstanden, tvert imot, bør økes. Dessuten kan størrelsen på hullene være angitt som mellom søylene og mellom linjene. For å indikere at en verdi (i stedet kollapse):

border-kollaps: separat

Men slike tiltak vil indikere at det er nødvendig å skille cellene. Som det var deres andel, indikerte ekstra eiendom:

kant-avstand: 20 piksler.

Hvis du ønsker å angi en annen avstand mellom rader og kolonner, betyr det to ting:

border-spacing: 10px20px.

Forskjellen i nettlesere

Husk at i CSS design tabeller kan se annerledes ut, avhengig av nettleseren. Spesielt ille er tilfelle med eldre versjoner, som innovasjoner i CSS ikke er støttet.

Den ovennevnte er et eksempel på ramme tykkelser til digitale verdier.

For dette eksempel er tykkelsen av rammene for konstantene.

kantlinjestiler også variere sterkt.

Derfor er utviklingen alltid se resultatet i ulike nettlesere.

I CSS design tabeller anbefales å sjekke hvilken nettleser. Spesielt stort problem pleide å være for brukere med eldre versjoner av Internet Explorer.

Svært avanserte utviklere kan, avhengig av hvilken nettleser for å koble helt forskjellige CSS-filer. Og noen gjør en sjekk på hver eller en bestemt stil (klasse).

De fleste problemer oppstår fra skyggene.

CSS: Tabell Format Eksempler

Registrering kan være ganske variert. Det kommer an på hele området og dens design. Alle bør kombineres og spraglete farger. Også det gjør en stor rolle og smaken utvikler. Følelse av skjønnhet er alle forskjellige.

Vi gir noen eksempler på de forskjellige bordene. Figuren ovenfor viser bruk av tilt og leke med bakgrunnsfarge og grensen.

Mange vil være interessant eksempel på vakre ryddig design som ikke vil kutte øyet brukere. Denne utførelsesform er passende i nesten hvilken som helst situasjon.

Kantene kan gjøres avrundet. Det ser ganske fint.

konklusjon

Som du kan se, for utseendet på tabellene i CSS er det mange verktøy. Hver parameter er også en enorm mengde verdi alternativer. Hvis du bruker alt på en gang, kan du opprette mesterverk. Spesielt hvis du gjør adaptive utforming for alle nettlesere.

Det viktigste i utformingen - ikke overdriv med effekter. Alt bør gjøres med måte. Ved første, oppsettet liker å eksperimentere og bruke all sin kunnskap umiddelbart. Som et resultat av tabellen er overmetning egenskaper. Prøv å unngå disse feilene.

Videre kan noen parametere forstyrre hverandre. For eksempel er det ikke nødvendig å spesifisere bakgrunnsfargen på tabellen, mens hvis det er fortsatt satt bakgrunnsbilde, som vil overlappe den angitte fargen.