CSS: bord design. exempel på registrering

Göra tabeller med CSS - av lektionen intressant och ansvarsfullt. Förhållningssätt till denna verksamhet behöver kompetent, med kunskap om alla möjliga stilar. Dessutom är det nödvändigt att ha en känsla av skönhet för att inte skrämma bort sina kreativitet besökare.

Tabellerna kan förvandla nästan allt. Vacker design innebär användning av CSS tabeller konstruktionsgränser, bord bakgrund, cell bakgrund, gapet mellan dem och mer. Överväga de mest grundläggande.

table border

CSS tabellformat design innebär alltid ett spel med en gräns (ram). Alla standard tabeller är inte konturer ram. Det vill säga, är det lika med 0 pixlar. Men detta kan korrigeras genom fastigheten gränsen.

Du kan ange den yttre ramen för hela tabellen:

tabell {kant: 3px solid svart; }

Tack vare denna linje vid alla tabeller på webbplatsen som använder denna stil är svart ram. Observera att endast gränsen på kanterna, men inte i tabellen. För cellinjer och ram annat anges.

e, td {kant: 3px solid svart;}

Tjockleken och färg kan du ange någon. Tänk på att gränserna inte dubbleras när skarvning celler.

Ordet betecknar en solid kontinuerlig registrering. Du kan ange andra värden.

Det är vanligast fast ram, som det ser ut mer attraktiv och inte avleda uppmärksamheten från det huvudsakliga innehållet på webbplatsen.

border egenskap kan anges också i styrelsen. Gränsen kan bara ställas in för toppen, botten, vänster eller höger sida. Eftersom det i vissa fall är det inte ett genomförbart alternativ med ramen för hela tabellen på en gång.

tabell {border-top: 1px fast rött; }

Så du kan ställa in ramen för toppen av endast tabellen. I likhet med andra parter, i stället för bara övre write: höger, vänster eller botten.

table header

Table header kan anges med taggen . Den här taggen kan vara i CSS för att registrera en hel del egenskaper för finjustering. CSS tabellen design är bra eftersom det är möjligt att manövrera de element som du vill.

Denna titel visas på samma sätt som en standard i böcker (t.ex. "Tabell 1").

Du kan ange platsen för titeln och fastighets bildtext-sida (övre eller nedre). Rikta in vänster eller höger definieras av fastighets text-align.

bakgrunds tabeller

Bakgrund av bordet kan vara vilken färg eller mönster. Color sätter en fastighet bakgrundsfärg. Namnen på de egenskaper som helt överensstämmer med användningen i tal. Det underlättar att lagra många gånger.

Färgen kan anges som namnet, och olika kodningar. Dessutom kan du ange följande:

• Transparent - Genomskinlig.
• Ärva - färgen är densamma som i det överordnade elementet.
• Initial - standard.

Option med transparens kan användas i de fall där alla tabeller i texten i CSS-filen görs i en färg, men i detta fall finns det inget behov.

Dessutom kan bakgrunden vara en bild. För att göra detta, i stil föreskrivna background-image egendom. Vägen är så här:

url ( 'URL')

Sökvägen till filen kan antingen vara relativ eller absolut.

Mer komplicerade fyllning kan göras med en gradient:

• linjär-gradient ();
• radial-gradient ();
• upprepa-linjär-gradient () och upprepning-radial-gradient () - gradient upprepas.

bakgrunds~~POS=TRUNC cell~~POS=TRUNC

Förutom en bakgrund i allmänhet, kan du ange en randig bakgrund i kolumner eller rader. För registrering av fastigheten används mycket ofta, eftersom den visuella separationen av linjerna lättare att läsa information.

Förutom växlingen, och du kan ange numret på en särskild kolumn eller rad. Till exempel så här:

• TR: n: te-barn (även) {...} - ange flätad;
• tr: n: te-barn (1) {...} - angivelse av egenskaperna hos en särskild rad;
• TD: n: te-barn (även) {...} - en indikation på alternerande kolumner;
• td: n: te-barn (1) {...} - en indikation på egenskaperna hos en viss kolumn.

Förutom kan specificeras sekvens och siffror - den första (td: första barn) eller sista (td: sista barn).

Gapet mellan cellerna

I CSS tillåter tabellen designen du ta bort mellanrummen mellan cellerna. Som standard är de. Till exempel, om du ställer ramen i tabellen utan att ställa in avståndet mellan gränserna, kommer det att vara här detta resultat.

Håller med, det ser inte mycket trevligt och det är inte lämpligt att läsa. Användarna kommer att ha rippel i ögonen på grund av detta. Ta bort dessa brister kan vara genom att skriva just en sådan linje i tabellen stil:

border-kollaps: kollaps

Men det händer också att avståndet, tvärtom bör ökas. Vidare kan storleken av gapen specificeras som mellan kolumner och mellan raderna. För att visa att ett värde (i stället kollaps):

border-kollaps: separat

Men en sådan åtgärd kommer att indikera att det är nödvändigt att separera cellerna. Eftersom det var deras andel, indikerade ytterligare egenskap:

border-avstånd: 20px.

Om du vill ange en annan avståndet mellan rader och kolumner, betyder det två saker:

border-avstånd: 10px20px.

Skillnaden i webbläsare

Tänk på att konstruktionstabeller i CSS kan se annorlunda ut beroende på vilken webbläsare. Särskilt illa är fallet med äldre versioner, att innovationer i CSS inte stöds.

Ovanstående är ett exempel på ramtjocklekar till digitala värden.

För detta exempel, tjockleken av ramarna för de konstanter.

gräns stilar skiljer sig också kraftigt.

Därför utvecklingen ser alltid resultatet i olika webbläsare.

I CSS konstruktionstabeller rekommenderas för att kontrollera vilken typ av webbläsare. Särskilt stora problem brukade vara för användare med äldre versioner av Internet Explorer.

Mycket avancerade utvecklare kan, beroende på webbläsaren för att ansluta helt olika CSS-filer. Och någon gör en kontroll i varje eller någon speciell stil (klass).

De flesta problem uppstår ur skuggorna.

CSS: Tabell Format Exempel

Registreringen kan vara ganska varierade. Det beror helt på hela webbplatsen och dess utformning. Alla bör kombineras och brokiga färger. Också det gör en stor roll och smak utvecklare. Känsla av skönhet är alla olika.

Vi ger några exempel på de olika tabellerna. Bilden ovan visar användningen av tilt och leka med bakgrundsfärg och gränsen.

Många kommer att bli intressant exempel på vackra snygg design som inte kommer att skära ögon användarna. Detta utförande är lämpligt i nästan alla situationer.

Kanterna kan göras rundade. Det ser ganska trevligt.

slutsats

Som ni kan se, för uppkomsten av tabellerna i CSS finns många verktyg. Varje parameter är också en stor mängd värde alternativ. Om du använder det på en gång, kan du skapa mästerverk. Speciellt om du gör anpassningsbar design för alla webbläsare.

Det viktigaste i design - överdriv inte med effekter. Allt ska ske med måtta. Först layouten gillar att experimentera och använda alla sina kunskaper omedelbart. Som ett resultat av tabellen är övermättade egenskaper. Försök att undvika dessa fel.

Vidare kan vissa parametrar stör varandra. Till exempel finns det ingen anledning att ange bakgrundsfärgen i tabellen, medan om det fortfarande är inställd bakgrundsbild, som kommer att överlappa den angivna färgen.