CSS: tabel design. eksempler på registrering

Gør tabeller med CSS - af lektion interessant og ansvarlig. Tilgang til denne forretning har brug for at kompetent med kendskab til alle de mulige stilarter. Desuden er det nødvendigt at besidde en følelse af skønhed for ikke at skræmme væk fra deres kreativitet besøgende.

Tabellerne kan forvandle næsten alt. Smukt design indebærer anvendelse af CSS tabeller design grænser, bord baggrund, cell baggrund, kløften mellem dem og mere. Betragt det mest grundlæggende.

tabel grænse

CSS tabeltypografi design indebærer altid et spil med en kant (ramme). Alle standard tabeller er ikke konturer ramme. Det vil sige, det er lig med 0 pixel. Men dette kan korrigeres ved ejendommen grænsen.

Du kan angive den ydre ramme for hele tabellen:

tabel {border: 3px solid sort; }

Takket være denne linje på alle bordene på sitet, der bruger denne stil er sort ramme. Bemærk, at kun grænsen på kanterne, men ikke inde i tabellen. For cellelinier og ramme anført.

th, td {border: 3px solid sort;}

Tykkelsen og farve, kan du angive nogen. Husk, at grænserne ikke bliver fordoblet, når splejse celler.

Ordet betegner en fast kontinuerlig registrering. Du kan angive andre værdier.

det er mest almindeligt anvendt fast ramme, som det ser ud mere attraktivt og ikke aflede opmærksomheden fra de vigtigste indholdet af hjemmesiden.

grænse egenskab kan også angives på brættet. Grænsen kan kun indstilles til top, bund, venstre eller højre side. Fordi der i nogle tilfælde er det ikke en realistisk mulighed med rammen for hele tabellen på en gang.

table {border-top: 1px solid rød; }

Så du kan sætte rammen for toppen af kun bordet. I lighed med andre parter, i stedet for blot øverste skrive: højre, venstre eller nederst.

table header

Tabel header kan angives ved hjælp tagget . Dette tag kan være i CSS til at registrere en masse ejendomme til finjustering. CSS tabel design er godt, fordi det er muligt at manøvrere de elementer, som du ønsker.

Denne titel vises på samme måde som en standard i bøger (såsom "Tabel 1").

Du kan angive placeringen af titlen og ejendom billedtekst-side (top eller bund). Justering af venstre eller højre er defineret ved ejendommen text-align.

baggrund borde

Baggrund for bordet kan være enhver farve eller mønster. Farve sætter en ejendom background-color. Navnene på de egenskaber, i fuld overensstemmelse med anvendelser i tale. Det letter opbevaring mange gange.

Farven kan angives som navnet, og forskellige kodninger. Derudover kan du angive følgende:

• Transparent - Gennemsigtig.
• Overtag - farve er den samme som for den forælder element.
• Initial - standard.

Mulighed med gennemsigtighed kan bruges i de tilfælde, hvor alle tabeller i teksten i den CSS-fil er lavet i én farve, men i dette tilfælde er der ikke behov.

Derudover kan baggrunden være et billede. For at gøre dette, i stil ordineret baggrund-image ejendom. Stien er sådan her:

url ( 'URL')

Stien til filen kan være enten relativ eller absolut.

Mere kompliceret fyld kan gøres med en gradient:

• lineær-gradient ();
• radial-gradient ();
• gentage-lineær-gradient () og gentagelse-radial-gradient () - gradient gentaget.

baggrund celle

Ud over en baggrund i almindelighed, kan du angive en stribet baggrund i kolonner eller rækker. Til registrering af ejendommen bliver brugt meget ofte, fordi den visuelle adskillelse af linjerne lettere at læse oplysninger.

Ud over den vekslen, og du kan angive antallet af en bestemt kolonne eller række. For eksempel sådan her:

• tr: n'te-barn (lige) {...} - angiv interlaced;
• tr: n'te-barn (1) {...} - angivelse af egenskaberne af en bestemt række;
• TD: n'te-barn (lige) {...} - en angivelse af vekslende søjler;
• TD: n'te-barn (1) {...} - en angivelse af egenskaberne for en bestemt kolonne.

Udover sekvens og tal kan angives - den første (td: first-barn) eller sidste (td: sidste barn).

Mellemrummet mellem cellerne

I CSS, bord design giver dig mulighed for at fjerne mellemrummene mellem cellerne. Som standard er de. For eksempel, hvis du indstiller rammen i tabellen uden at indstille afstanden mellem grænserne, vil det være her dette resultat.

Enig, ser det ikke meget rart, og det er ikke praktisk at læse. Brugerne vil have krusning i øjnene på grund af dette. Fjern disse huller kan være ved at skrive netop sådan en linie i tabellen stil:

border-sammenbrud: sammenbrud

Men det sker også, at afstanden, tværtimod bør øges. Endvidere kan størrelsen af mellemrummene specificeres som mellem kolonner og mellem linjerne. At angive, at en værdi (i stedet kollaps):

border-kollaps: separat

Men sådan handling vil indikere, at det er nødvendigt at adskille cellerne. Som det var deres andel, indikerede yderligere ejendom:

border-afstand: 20px.

Hvis du vil angive en anden afstand mellem rækker og kolonner, betyder det to ting:

border-afstand: 10px20px.

Forskellen i browsere

Husk på, at design borde i CSS kan se anderledes, afhængigt af browseren. Specielt slemt er tilfældet med ældre versioner, at innovationer i CSS ikke er understøttet.

Ovenstående er et eksempel på rammetykkelser til digitale værdier.

For dette eksempel er tykkelsen af rammerne for konstanterne.

kanttypografier også er meget forskellige.

Derfor er udviklingen altid se resultatet i forskellige browsere.

I CSS anbefales design tabeller til at kontrollere type browser. Særligt stort problem plejede at være til brugere med ældre versioner af Internet Explorer.

Meget avancerede udviklere kan, afhængigt af browseren til at forbinde helt forskellige CSS-filer. Og nogen gør en check på hver eller nogle særlige stil (klasse).

De fleste problemer opstår fra skyggerne.

CSS: Tabel Format Eksempler

Tilmelding kan ganske varieret. Det hele afhænger af hele området og dens design. Alle bør kombineres og brogede farver. Også det gør en stor rolle og smag udvikler. Følelse af skønhed er alle forskellige.

Vi giver nogle eksempler på de forskellige tabeller. Figuren ovenfor viser brugen af tilt og lege med baggrundsfarven og grænsen.

Mange vil være interessant eksempel på smukke pæn design, der ikke vil skære øjet brugere. Denne udførelsesform er hensigtsmæssig i næsten enhver situation.

Kanterne kan gøres afrundet. Det ser ret nice.

konklusion

Som du kan se, for udseendet af tabellerne i CSS er der mange værktøjer. Hver parameter er også en enorm mængde af værdiindstillinger. Hvis du bruger det hele på én gang, kan du oprette mesterværker. Især hvis du gør adaptive design for alle browsere.

Det vigtigste i designet - ikke overdrive det med effekter. Alt skal gøres med måde. I første omgang layoutet kan lide at eksperimentere og bruge al deres viden med det samme. Som følge af tabellen er overmættede egenskaber. Prøv at undgå disse fejl.

Endvidere kan nogle parametre interfererer med hinanden. For eksempel er der ingen grund til at specificere baggrundsfarven af bordet, mens hvis der stadig er indstillet baggrundsbillede, som vil overlappe den angivne farve.