CSS: asztal design. példák regisztráció

Így asztalok CSS - lecke érdekes és felelősségteljes. Megközelítés ebben a szakmában szükség van hozzáértő, akik ismerik az összes lehetséges stílust. Ezen kívül meg kell rendelkezniük szépérzéke, hogy ne elriaszt kreativitásukat a látogatók.

A táblázatok képes átalakítani szinte mindent. Gyönyörű design használatával jár CSS táblázatok tervezési határokat, asztali háttérkép, sejtek háttér, a különbség köztük és így tovább. Tekintsük a legalapvetőbb.

table border

CSS asztal stílus design mindig magában foglal egy játék egy határ (keret). Minden alapértelmezett táblázatok nem kontúrok keretben. Ez azt jelenti, értéke 0 pixel. De ez lehet korrigálni az ingatlan határán.

Megadhatja a külső keret az egész táblázatra:

táblázat {border: 3px feketének; }

Ennek köszönhetően a sort az összes asztal az oldalon, hogy használja ezt a stílus fekete kerettel. Megjegyezzük, hogy a határ csak a széleken, de nem belül az asztalra. A sejtvonalak és a keret másként.

th, td {border: 3px feketének;}

Az anyag vastagsága és színe, akkor végezze el. Tartsuk szem előtt, hogy a határok nem kétszeresére összeillesztjük sejteket.

A szó jelentése szilárd folyamatos nyilvántartását. Megadhatja egyéb értékeket.

Ez a leggyakrabban használt szilárd keret, mint amilyennek látszik, vonzóbb és nem vonja el a figyelmet a fő tartalma a helyszínen.

border tulajdonság megadható is a fedélzeten. A határ csak akkor állítható be a felső, alsó, jobb vagy bal oldalon. Mivel bizonyos esetekben ez nem járható út, a keret az egész asztal egyszerre.

táblázat {border-top: 1px szilárd piros; }

Tehát akkor meg a keret tetején a táblázatban. Hasonlóan bármely más fél, ahelyett, hogy csak felső write: jobbra, balra vagy lefelé.

táblázat fejléc

Táblázat fejléce is megadható a tag . Ez a címke lehet a CSS regisztrálni egy csomó tulajdonságainak finomhangolás. A CSS asztal design jó, mert lehetséges, hogy a manőver az elemeket a kívánt módon.

Ez a cím jelenik meg, ugyanúgy, mint egy standard in könyvek (mint például a „1. táblázat”).

Megadhatja a helyét a cím és a tulajdon felirat oldali (felső vagy alsó). Igazítása balra vagy jobbra határozza meg az ingatlan text-align.

háttér táblák

Háttérben a tábla lehet bármilyen színes vagy mintás. Színes beállít egy tulajdonságot háttér színét. A nevét az ingatlan teljesen összhangban felhasználások beszédet. Ez megkönnyíti a tárolását sokszor.

A szín megadható a neve, és a különböző kódolások. Ezen felül, akkor adja meg a következő:

• Átlátszó - Áttetsző.
• Öröklése - szín megegyezik a szülő elem.
• Kezdeti - alapértelmezett.

Opcionális átláthatóság lehet használni azokban az esetekben, ahol az összes asztal a szöveget a CSS fájlban készülnek egy szín, de ebben az esetben nincs szükség.

Ezen túlmenően, a háttérben lehet egy kép. Ehhez a stílus előírt background-image tulajdonság. Az út, mint ez:

url ( 'URL')

Az útvonal a fájl lehet relatív vagy abszolút.

Bonyolultabb töltet lehet tenni gradiens:

• lineáris-gradiens ();
• radiális-gradiens ();
• ismétlődő-lineáris-gradiens (), és megismételve-radiális gradiens () - gradiens megismételjük.

háttér sejt

Amellett, hogy a háttérben általában megadhat egy csíkos háttér oszlopok vagy sorok. A regisztrációhoz az ingatlan nagyon gyakran használják, mert a vizuális elválasztása a vonalak könnyebben olvasható információkat.

Amellett, hogy a váltakozás, és megadhatja a számát egy adott oszlop vagy sor. Például így:

• tr: n-ed gyermek (még) {...} - adja átlapolt;
• tr: n-ed gyermek (1) {...} - jelzése a tulajdonságait egy adott sorban;
• TD: n-ed gyermek (még) {...} - feltüntetése váltakozó oszlopok;
• TD: n-ed gyermek (1) {...} - jelzi a tulajdonságait egy adott oszlop.

Emellett szekvencia és számokat lehet megadni - az első (td: first-child) vagy az utolsó (td: last-gyermek).

A különbség a sejtek

A CSS-ben asztal kialakítás lehetővé teszi, hogy távolítsa el a szóközöket a sejtek között. Alapértelmezésben vannak. Például, ha a keretet a táblázat beállítása nélkül a távolság a határokat, akkor itt ez az eredmény.

Elfogadom, úgy néz ki, nem túl szép, és ez nem kényelmes olvasni. A felhasználók a tovagyűrűző szemében, mert e. Távolítsuk el ezeket a hiányosságokat lehet írásával éppen egy ilyen sort a táblázatban stílus:

border-összeomlás: összeomlás

De az is előfordul, hogy a távolság, éppen ellenkezőleg, növelni kell. Sőt, a méret a rések megadható az oszlopok között, és a sorok között. Annak jelzésére, hogy az érték (ahelyett, összeomlás):

border-collapse: külön

De az ilyen intézkedés jelzi, hogy szükség van a sejtek elválasztására. Mivel ez volt a részüket, jelzett további tulajdonság:

border-távolság: 20px.

Ha azt szeretnénk, hogy egy másik közötti távolság a sorok és oszlopok, akkor két dolgot jelez:

border-távolság: 10px20px.

A különbség a böngészők

Ne feledje, hogy a CSS tervezési táblázatok különbözőnek tűnhet, a böngészőtől függően. Különösen rossz a helyzet a régebbi verziók, hogy újítások CSS nem támogatott.

A fenti példát keret vastagságú digitális értékeket.

Ebben a példában, a vastagsága a keretek a konstansok.

szegélystílusok is nagyban különböznek.

Ezért a fejlesztési mindig látni az eredményt a különböző böngészőkben.

A CSS tervezési táblázatok ellenőrzése ajánlott böngésző típusát. Különösen nagy probléma szokott lenni, hogy a felhasználók a régebbi Internet Explorer.

Nagyon fejlett fejlesztők, attól függően, hogy a böngésző kapcsolódni teljesen különböző CSS fájlokat. És valaki tesz egy ellenőrzést az egyes illetve bizonyos stílus (class).

A legtöbb probléma merül fel az árnyékból.

CSS: Táblaformátum példák

Regisztráció is igen változatos. Minden attól függ, az egész telek és a design. Minden kombinálni kell, és tarka színekben. Szintén ez teszi nagy szerepet, aroma fejlesztő. Szépérzéke minden más.

Adunk néhány példát a különböző táblázatok. A fenti ábrán a használata tilt, és játszani a háttérszín és a határon.

Sok érdekes lesz például a gyönyörű szép design, hogy nem fogja csökkenteni a szem számára. Ez a megvalósítás megfelelő szinte bármilyen helyzetben.

A széleket lehet lekerekített. Úgy néz ki, nagyon szép.

következtetés

Mint látható, a megjelenése a táblázatok CSS sok eszközöket. Minden paraméter szintén hatalmas mennyiségű érték lehetőségeket. Ha az egészet egyszerre, akkor létre remekművek. Különösen, ha az adaptív tervezés minden böngészőben.

A legfontosabb dolog a tervezés - ne vigyük túlzásba a hatásokat. Mindent meg kell tenni a moderálás. Eleinte az elrendezés szeretnek kísérletezni, és használható minden tudást azonnal. Ennek eredményeként az asztal túltelített tulajdonságait. Próbálja meg elkerülni ezeket a hibákat.

Sőt, néhány paraméter zavarhatják egymást. Például nincs szükség megadni a háttér színe az asztalra, míg ha még van beállítva háttérképet, ami átfedi a megadott színt.