Az alapértelmezett az asztal szélességében van beállítva a böngésző saját, volumene alapján azt táblázatos adatokat. Ha a szöveg a sejtekben számos, akkor a táblázat elfoglalja a teljes szélességében a rendelkezésére, és ha kicsi, a táblázat szélessége automatikusan csökken. Ha több táblázatok az oldalon különböző szélességű néha úgy néz ki, hanyag. Tehát jobb, ha kifejezetten meghatározza a táblázat szélessége százalékban, pixel, em, vagy bármely más CSS egység, amint azt az 1. példában.
1. példa A szélessége a táblázat százalékában
Ebben a példában szélessége 100% alkalmazzák minden asztal. Ismét az osztályok segítik a szélessége a kiválasztott táblák kerékpározás korábban létrehozott osztályba. Megadásához táblázat szélessége 200 képpont hozzá kell adni az elem
tbl-kis osztály.
igazítása asztalok
Kezdetben minden asztal található, a bal szélén a böngésző ablakot. Igazíthatod a központban, ha a táblázat nem foglalja el a teljes rendelkezésre álló területet, más szóval, kevesebb, mint 100%. Ehhez a stílus az asztal kell hozzá padding a margin tulajdonság auto. amint azt a 2. példában.
2. példa egyengetőasztal határértéket használunk
Ebben a példában az összes asztal az oldalon van beállítva, hogy középre igazítást.
A háttér színe a sejtek ugyanakkor a táblázat segítségével állítjuk be az ingatlan háttérben. amely alkalmazható a választó táblázatot. Emlékeztetni kell arra, hogyan használják a stílus, különösen az öröklési tulajdonságok elemek. Ha egyidejűleg a táblázat a színe a választó td vagy én. és akkor lesz a háttér (3. példa).
3. példa: háttérszíne
A példa eredményét az ábrán látható. 1.
Ábra. 1. Változtassa meg a háttér színét
Ha kell, hogy a zebra - az úgynevezett váltakozó sorokban különböző színű, akkor használja a pszeudo: n-ed gyermek. hozzátéve, hogy a választó tr. Zebra terjedni csak a test a táblázat, nem pedig annak címet, hogy elválassza őket egymástól útján elemek és
(4. példa).
4. példa: létrehozása Zebra
A példa eredményét az ábrán látható. 2.
Jelentése még dial: n-ed gyermek stílus vonatkozik minden páros sorokat, és beállítja a háttér színét. Az is lehetséges, hogy változtassa meg a páratlan. Ezután szürke osztják páratlan sort.
Hasonlóképpen, a színes vonal nem kerül kiosztásra, valamint egy oszlopot kell használni erre a választó tbody td: n-ed gyermek (igaz).
Field a sejtben
Field közötti távolság a határ a cella és annak tartalmát. Keret nélküli szöveget a táblázat „ragad” a keret, és ezáltal romlik az ő felfogása, kiegészítve a mezők javíthatja a szöveg olvashatóságát. Erre a célra vonatkozik style tulajdonság padding. amely működik egy választókapcsoló vagy td th. fentebb bemutatott példákban a 3. és 4. Általában jelzik egyetlen érték, mivel ez határozza meg az üres helyet a cella tartalmát egyszerre minden oldalról. A két érték van írva, amikor arra szükség van, hogy különböző területeken függőlegesen (az első érték) és horizontálisan (a második érték).
A cellák közötti távolság
A cellák közötti van egy kis üres távolság, ami nem látható, amíg a sejtek nem hoz létre a határon vagy a háttér színét. Kezdetben ez a távolság 2px, és meg lehet változtatni a tulajdonság határ-távolság. hozzátéve, hogy a választó táblázatban (5. példa).
5. példa használata border-spacing
Azáltal, ez a stílus minden asztalra megkapjuk az eredményeket ábrán látható. 3.
Ábra. 3. Tekintse meg a táblázatot a távolság a sejtek
Ha a tábla hozzáadjuk a border-collapse tulajdonság beállított összeomlik. A border-távolság figyelmen kívül hagyjuk, mert a távolság a sejtek nem több.
Keretei közé
Ahhoz, hogy egyértelműen elválasszák a tartalmát egy cella egy másik, hozzá a sejtekhez határ. Mert a létesítmény megfelel stilisztikai border tulajdonság. amely az elemei (
vagy | ). Azonban itt is várják a buktatókat. Mivel a keret jön létre minden cellában, az érintkezési pontok között a határ nyert sejtek dupla vastagságú. Hogy megszüntesse a fenti funkciók, számos módja van. A legegyszerűbb - használja a border-collapse tulajdonság értéke összeomlása. Feladata, hogy figyelemmel kíséri felsővezeték, és ahelyett, hogy a kettős határ ábrázol egyetlen. Ez a tulajdonság elég hozzá, hogy a választó táblázatot. és akkor mindent magad (6. példa).
6. példa Alkalmazás tulajdonságai border-collapse létrehozásakor a táblázat keret
A különbség a határok az asztal új ingatlanokat border-összeomlás. és anélkül, hogy ez a ábrán látható. 4.
és - tulajdonság nincs beállítva
b - tulajdonság
Ábra. 4. Tekintse meg a táblázat segítségével border-összeomlás
Ábra. A 4a ábra a keret a táblázat által használt alapértelmezett. Megjegyezzük, hogy a táblázatban az összes vonalak vastagságának kétszerese. Hozzáadása a határ-összeomlás eltávolítja ezt a funkciót, és a vonalak vastagsága azonos lesz (4B.).
Vonal nem feltétlenül teszik valamennyi fél sejtek szerint a design, ezek elválaszthatók egy sort vagy oszlopot a másiktól. Ehhez használjuk a tulajdonságok border-bottom. border-balra és hasonlók. Alkalmazza a határ elemek | . .
és Nem tudjuk, ezért hozzá őket a választó táblázatot és a TD (7. példa).
7. példa A vonalak a sorok között
A példa eredményét az ábrán látható. 5.
Ábra. 5. táblázat vízszintes vonalak
Szövegigazítás sejtekben
Alapértelmezésben a szöveget a táblázat cellájába balra igazított és középen magasságát. Kivételt képez ez alól az elem
. meghatározza a fejlécen, amelyben az illesztést zajlik a közepén. Igazíthatja alkalmazott módszer stílusú ingatlan text-align (8. példa).
8. példa Alignment cellatartalom vízszintesen
Ebben a példában a tartalmát | balra igazított, és a tartalmát | - a központban. Példa eredmények az alábbiakban láthatók (6.).
Ábra. 6. Állítsa be a szöveget a sejtekben
A függőleges igazítás a cella mindig előfordul a közepén, ha nem másként. Ez nem mindig kényelmes, különösen a táblázatokat, amelyekben a cella tartalmát különbözik magasságot. Ebben az esetben, a nyomvonal a legfelső szélén a sejtet egy tulajdonság függőleges-igazítsa a felső értéket. amint azt a 9. példában.
9. példa Alignment cellatartalom függőlegesen
Ebben a példában, a szöveg igazítás történik felső széle mentén. Példa eredményeket ábrán mutatjuk be. 7.
Ábra. 7. Szövegigazítás sejtekben
Kapcsolódó cikkek
|
