Sziasztok! Tehát most már tudja, hogyan kell elemi táblázatokat létrehozni, amelyek annyi sorból és oszlopból állnak, amennyi szükséges. Nem rossz, nem rossz. Most beszéljünk ezeknek az asztaloknak a kialakításáról.

Az utolsó órán a táblázatok szegély nélkül kerültek megjelenítésre. És látod, úgy néz ki, még csak jelnek sem nevezheted. Ha táblázatszegélyeket szeretne készíteni HTML-ben, adja hozzá a címkét

tulajdonság határ, nullától eltérő értéket adva neki.

Tehát készítsünk szegélyeket az asztalra. Például a már meglévőhöz:

Bal felső cella	Jobb felső cella
Bal alsó cella	Jobb alsó cella

Eredmény a böngészőben:

Hogyan távolítsuk el a táblázat határait

Viszont a HTML tábla szegélyeinek eltávolításához, vagy azt mondhatjuk, hogy láthatatlanná tesszük őket, szükségünk van az attribútumra határérték beállítása 0 . Ezen egyszerű műveletek után a keret eltávolításra kerül.

Az attribútum lehetővé teszi szegélyek létrehozását, de nem kezelését. Csak a vastagságuk megváltoztatását teszi lehetővé.

Ezért most arról fogunk beszélni css, amelynek tulajdonságai lehetővé teszik határ különböző szegélyeket hozhat létre az egyes cellákon belül és kívül is, az asztal egésze körül.

Nézzük meg, hogyan használhatjuk a CSS-t egy táblázat külső és belső szegélyének létrehozására.
Ehhez távolítsa el a border attribútumot a táblázatunkból, és adjon hozzá stílusokat:

Bal felső cella	Jobb felső cella
Bal alsó cella	Jobb alsó cella

Eredmény a böngészőben:

Most adjunk hozzá szegélyeket is minden cellához. Ehhez egyszerűen adjon hozzá stílusokat:

Eredmény a böngészőben:

Hogyan távolítsuk el a kitöltést a cellák között egy HTML-táblázatban

Fogadja el, hogy a megadott határ CSS használatával, nincs ilyen kinézet ahogy szeretnéd. Kétségtelen, hogy esztétikai szempontból van min dolgozni. A böngésző oldalon látható, hogy alapértelmezés szerint külön jeleníti meg a táblázatok és a cellák szegélyét. Egy példa egyértelműen bizonyítja ezt.

Azonban teljesen lehetséges megszabadulni az ilyen szegélyektől, amelyeket kettősnek neveznek, ha CSS-t használ. határterületi ingatlan-összeomlás. A gyakorlatban ez így néz ki:

Táblázat ( szegély: tömör 1px kék; szegély-összecsukás: összecsukás; ) ...

Ennek eredményeként a cellák közötti távolság megszűnik:

A border attribútumhoz rendelt összecsukási érték lehetővé teszi a kettős szegélyek eltávolítását. Mint látható, az eredmény a szomszédos cellaszegélyek, valamint a cellahatárok és a külső táblázatszegély "összeomlása". Ami az utóbbit illeti, teljesen eltávolítható. És ha szükség van a megjelenítésére, akkor növelni kell a szélességét. Így megszabadultunk a táblázat elválasztóitól. A következő leckében pedig arról fogunk beszélni, hogyan állíthat be függőleges és vízszintes szegélyeket. Sok szerencsét mindenkinek!

Tehát tanulmányoztuk Önnel a legegyszerűbb műveleteket, amelyeket táblázatszegélyekkel lehet végrehajtani. És most az asztal sokkal esztétikusabbnak tűnik. A cellák kitöltése azonban közvetlenül a határokon nyugszik. Ez egyszerűen javítható a HTML-táblázat celláinak behúzásával. És akkor a kereten belüli szöveg, a cellában olvashatóbb lesz.

Egy cella behúzásához használja az attribútumot cella kitöltése címkéhez

. Van azonban egy másik, előnyösebb lehetőség: css.

Ebben az esetben a behúzások a tulajdonság segítségével kerülnek beállításra párnázás. Segítségével nem lesz nehéz behúzni, ahol szükséges, azaz felülről, jobbra, alulról vagy balról, az alábbi tulajdonságok valamelyikével: párnázott felső, párnázás jobbra, párnázó-alsóÉs padding-bal.

Pontosan beállíthatja, hogy hány képpont legyen behúzva. Adjunk egy példát, amelyben az alsó behúzás lesz 20 pixel, és az összes többi lesz 10 . Ilyen css-kód így fog kinézni:

Td ( kitöltés: 10 képpont; kitöltés alsó: 20 képpont; )

És a teljes stíluskód ebben a szakaszban:

Táblázat ( szegély: tömör 1px kék; szegély-összecsukás: összecsukás; ) td ( szegély: tömör 1px kék; kitöltés: 10px; kitöltés-alsó: 20px; )

Eredmény a böngészőben:

Kitöltés a cellák között

A táblázatok létrehozásával kapcsolatos feladatokat általában címkék, attribútumok és tulajdonságok segítségével lehet megoldani, amelyek lehetővé teszik keretek, behúzások létrehozását a cellákban, valamint maguknak a celláknak a szín hátterét is.

A táblázatokban a behúzások nem csak a cellákon belül vannak. Ezek maguk a sejtek között is jelen lehetnek.

Két lehetőség van a cellák behúzására:

1. attribútum használatával cellatávolság címkéhez

.

segítségével css-tulajdonságok határtávolság.

Hangsúlyozni kell, hogy határtávolság a táblázat egészére, míg a tulajdonságra van írva párnázás közvetlenül a cellákba van írva.

Nézzünk egy példát:

Táblázat ( szegély: tömör 1px kék; szegély-összecsukás: külön; szegélytávolság: 5px; ) td ( szegély: tömör 1px kék; kitöltés: 10px; kitöltés-alsó: 20px; )

És a kapott eredményhez:

Azonnal kikötjük, hogy ne kelljen ilyen behúzásokkal próbálkozni határ-összeomlás: összeomlás. Valójában ennek az opciónak a használatakor a cellák egymáshoz „tapadnak”.

És hogy elkülönüljenek egymástól, érdemes használni határ-összeomlás: külön. Fontos megérteni, hogy ez az érték az alapértelmezett érték. És csak a probléma megoldásának vizuális bemutatására szolgál. Ha ezt a sort töröljük, akkor az eredmény az egymástól különálló cellák formájában kerül mentésre.

Számos módszert mérlegeltünk az oldal olyan elemeinek stílusozására, mint a szöveges információk, linkek, képek, címsorok, de mindez még mindig nem elég. A cikkeimben gyakran használok HTML elemeket, például táblázatokat, mert a legtöbb esetben azok segítik a rendszerezést fontos információés megkönnyíti a kézbesítést.

Ebben a cikkben bemutatom a stílus fortélyait HTML táblázatok, és megismerheti az e célok eléréséhez tervezett új CSS-tulajdonságokat.

A HTML hiperszöveg jelölőnyelv számos kötési lehetőséget biztosított számunkra CSS stílusok tíz egyedi címkéhez, amelyeket a táblázatokkal való együttműködésre terveztek, azt javaslom, hogy ismételje meg őket a további tanulmányozás előtt:

(a táblázat „lábléce”) háttérszín – korall, elemhez (a táblázat "fejléce") állítsa be a háttérszínt Ezüst.

Elemekhez

, amelyek az elemen belül vannak (tábla törzse) állítsa be a háttérszínt, hogy a lebegtetéskor megváltozzon (pszeudoosztály :lebeg) c fehér színenként khaki(az egész sor kiemelve van).

Példánk eredménye:

Rizs. 153 Sorstílus példa táblázatokban

A következő példa a saroklekerekítés alkalmazását mutatja be a táblázatcellákra (tulajdonságra).

) az alsó párnázást 19 pixelre állítottuk. Remélem nem zavarnak a páratlan számok :)

Példánk eredménye:

A cellák közötti távolság

A fenti példa után észrevehette, hogy még mindig van rés a táblázat összes cellája között. Nézzük meg, hogyan lehet eltávolítani a táblázat cellái közötti rést, vagy növelni azt.

A szomszédos cellák határai közötti távolság beállításához a CSS tulajdonságot kell használnia - határtávolság.

szegélyköz: 30 képpont 10 képpont;

1	2	3
2
3

határtávolság: 0;

1	2	3
2
3

határtávolság:0,2em;

1	2	3
2
3

Ebben a példában mi:

• úszó:bal). Ha lemaradt a lebegő elemek témaköréről, akkor ebben az oktatóanyagban bármikor visszatérhet hozzá - "".
• Ezen kívül a táblázatok jobb margóját 30px-re állítjuk, és beállítjuk függőleges igazítás táblázatok (az elem teteje a legmagasabb elem tetejéhez igazodik). Ebben a cikkben visszatérünk ennek az ingatlannak a részletes tárgyalására.

) félkövér.

Mert táblázat cellái(fejléc és adatcellák) beállítunk egy 1 képpontos tömör szegélyt az #F50 hexadecimális színnel, és a kitöltést minden oldalon 19 képpontra állítjuk.

Az első asztalhoz az osztállyal .első beállítjuk a táblázatcellák közötti rést (tulajdonság határtávolság) egyenlő 30 képpont 10 képpont , az osztályt tartalmazó második táblázathoz .második egyenlő nullával, az osztályt tartalmazó harmadik táblázathoz .harmadik egyenlő 0,2 em .

Felhívom a figyelmet arra, hogy ha az ingatlanban határtávolság csak egy hosszérték van megadva, akkor ez jelzi az intervallumokat, vízszintesen és függőlegesen is, és ha két hosszérték van megadva, akkor az első határozza meg a vízszintes távolságot, a második pedig függőleges. A szomszédos cellák határai közötti távolság CSS-egységekben adható meg (px, cm, em stb.). Negatív értékek nem megengedettek.

Példánk eredménye:

Szegélyek megjelenítése a táblázat cellái körül

Mondhatod: - tehát a tulajdonság használatával eltávolítottuk a cellák közötti rést határtávolság 0 értékkel, de miért vannak most metsző cellahatáraink?

A kettős szegélyek abból adódnak, hogy egy cella alsó szegélye hozzáadódik az alatta lévő cella felső szegélyéhez, hasonló helyzet adódik a cellák oldalán és ez logikus a táblázat megjelenítése szempontjából, de szerencsére ott Ez egy módja annak, hogy elmondjuk a böngészőnek, hogy nem akarjuk a cellaszegélyek ilyen szemtelen viselkedését látni.

Ehhez használni kell CSS tulajdonság határ-összeomlás. Furcsa módon, de használja az ingatlant határ-összeomlás az összeomlási értékkel az a legjobb mód hogyan tudnám eltávolítani a cellák közötti hézagot, és egyúttal ne kapjunk kettős határt közöttük.

Fontolja meg a szegélyek viselkedésének összehasonlítását a tulajdonság használatakor határtávolság 0 értékkel és tulajdonságokkal határ-összeomlásösszecsukási értékkel:

határtávolság: 0;

1	2	3
2
3

border-collapse: összeomlás;

1	2	3
2
3

Ebben a példában mi:

• Lebegővé tettük az asztalainkat, és balra toltuk ( úszó: left ), állítsa a jobb margót 30 képpontra.
• Állítsa be a táblázat nevét (tag

) félkövér.

A táblázatcellákhoz (fejléc és adatcellák) egy 5 képpontos tömör szegélyt állítunk be hexadecimális színnel #F50, és beállítunk egy fix szélességet 50px-ben és 75px-es magasságot.

Az első asztalhoz az osztállyal .első a táblázat cellái közötti távolságot nullára állítjuk (border-spacing : 0 ;), a második táblánál pedig az osztállyal .második beállított tulajdonság határ-összeomlás a collapse értékkel, amely lehetőség szerint egyesíti a cellaszegélyeket.

Példánk eredménye:

Üres cellák viselkedése

A CSS segítségével beállíthatja, hogy megjelenjen-e a táblázat üres celláinak szegélye és háttere vagy sem. Az ingatlan felelős ezért a viselkedésért. üres cellák, amely alapértelmezés szerint, ahogy azt az előző példákból is észrevette, üres cellákat jelenít meg.

Térjünk át egy példára:

üres cellák: mutat;

1	2	3
2		☺
3	☺

üres cellák: elrejteni;

1	2	3
2		☺
3	☺

Ismerje meg, hogyan működik egy ingatlan üres cellák ebből a példából nagyon egyszerű, ha elrejtésre van állítva, akkor az üres cellák és a bennük lévő háttér el lesznek rejtve, ha megjelenítésre van állítva (alapértelmezett), akkor azok megjelennek.

A táblázat fejlécének helye

Nézzünk egy másik egyszerű tulajdonságot az asztal stílusához - felirat oldalán, amely beállítja a táblázat fejlécének pozícióját (a táblázat felett vagy alatt). Alapértelmezett tulajdonság felirat oldalán a top , amely a címet a táblázat fölé helyezi. Ha fejlécet szeretne elhelyezni a táblázat alatt, akkor az alsó értékkel rendelkező tulajdonságot kell használnia.

Nézzünk egy példát ennek a tulajdonságnak a használatára:

Cím a táblázat felett

Név	Ár
Hal	350 rubel
Hús	250 rubel

Cím az asztal alatt

Név	Ár
Hal	350 rubel
Hús	250 rubel

Ebben a példában létrehoztuk két osztály, amelyek a táblázat fejlécének helyét szabályozzák. Első osztályú ( .topCaption) fölé helyezi a táblázat fejlécét, ezt alkalmaztuk az első táblára és a második osztályra ( .bottomCaption) alá helyezi a táblázat fejlécét, a második táblára alkalmaztuk. Osztály .topCaption ingatlan érték felirat oldalán alapértelmezett és demonstrációs célokra készült.

Példánk eredménye:

Vízszintes és függőleges igazítás

A legtöbb esetben, amikor táblázatokkal dolgozik, módosítania kell a tartalom igazítását a fejléceken és az adatcellákon belül. Ingatlan szöveg igazítás a vízszintes igazításhoz használható bármely szöveges információk. Korábban a "" cikkben megvizsgáltuk ennek a tulajdonságnak a szöveghez való használatát.

A cellákban lévő tartalom igazításának beállításához speciális kulcsszavakat kell használnia a tulajdonsághoz szöveg igazítás. Fontolja meg az alkalmazást kulcsszavakat ezt a tulajdonságot a következő példában.

Jelentése	Leírás
bal	A cella szövegét balra igazítja. Ez az alapértelmezett érték (ha a szöveg iránya balról jobbra).
jobb	A cella szövegét jobbra igazítja. Ez az alapértelmezett érték (ha a szöveg iránya jobbról balra).
központ	A cella szövegét középre igazítja.
igazolni	A vonalakat úgy nyújtja, hogy minden sor azonos szélességű legyen (a cella szövegét a szélességhez igazítja).

Ebben a példában létrehoztuk négy osztály, amelyek különböző vízszintes igazításokat állítottak be a cellákban és alkalmazták azokat a táblázat soraira. A cellában lévő érték megegyezik a tulajdonság értékével szöveg igazítás

Példánk eredménye:

A vízszintes igazítás mellett a tulajdonság segítségével függőleges igazítást is megadhat a táblázatcellákban függőleges igazítás.

Kérjük, vegye figyelembe, hogy a táblázat celláival való munka során ennek a tulajdonságnak csak a következő * értékei érvényesek:

* - A táblázatcellákra alkalmazott Sub , super , text-top , text-bottom , long és % értékek úgy viselkednek, mintha alapértéket használnának.

Nézzünk egy példát a felhasználásra:

Jelentése	Leírás
alapvonal	A cella alapvonalát a szülő alapvonalához igazítja. Ez az alapértelmezett érték.
tetejére	A cella tartalmát függőlegesen a tetejéhez igazítja.
középső	A cella tartalmát függőlegesen középre igazítja.
alsó	A cella tartalmát függőlegesen az aljához igazítja.

Ebben a példában létrehoztuk négy osztály, amelyek különböző függőleges igazításokat állítottak be a cellákban, és alkalmazták azokat a táblázat soraihoz. A cellában lévő érték megegyezik a tulajdonság értékével függőleges igazítás, amelyet erre a sorra alkalmaztunk.

Algoritmus a táblázat elrendezésének böngésző általi elhelyezésére

A CSS alapértelmezés szerint a böngésző automatikus táblázatelrendezési algoritmusát használja. Ebben az esetben Az oszlop szélességét a cella legszélesebb törésmentes tartalma határozza meg. Ez az algoritmus bizonyos esetekben lassú lehet, mert a böngészőnek el kell olvasnia a táblázat összes tartalmát, mielőtt meghatározná a végső elrendezését.

A táblázat elrendezésének elrendezési típusának a böngésző általi módosításához automatikus tovább rögzített, akkor a CSS tulajdonságot kell használnia táblázat elrendezése rögzített értékkel.

Ebben az esetben a vízszintes elhelyezés csak attól függ a táblázat szélességére és az oszlopok szélességére, nem a cellák tartalmára. A böngésző az első sor beérkezésekor azonnal megkezdi a táblázat megjelenítését. Ennek eredményeként a rögzített algoritmus lehetővé teszi egy ilyen táblázat elrendezésének gyorsabb létrehozását, mint az automatikus opció használata. Ha nagy táblákkal dolgozik, fix algoritmust használhat a teljesítmény növelésére.

Nézzük meg ennek a tulajdonságnak a használatát a következő példával:

táblázat-elrendezés: auto;

Név	2009	2010	2011	2012	2013	2014	2015	2016
Búza	125	215	2540	33287	695878	1222222	125840000	125

asztal-elrendezés: fix;

Név	2009	2010	2011	2012	2013	2014	2015	2016
Búza	125	215	2540	33287	695878	1222222	125840000	125

Ebben a példában mi:

Táblázat sorainak és oszlopainak formázása

Ön és én már részben érintettük a táblázat sorai és oszlopai stílusának módszereit a "" cikkben. Ebben a cikkben egy csoportos pszeudoosztály használatát vizsgáltuk, amely lehetővé teszi a sorstílusok beillesztését a táblázatokba értékek segítségével. még (becsületes) És páratlan (páratlan), vagy elemi matematikai képlet.

Tekintsük újra az eddig használt technikákat, és fedezzünk fel új módokat a táblázatok sorainak és oszlopainak stílusozására. Térjünk át a példákra.

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Ebben a példában mi:

Példánk eredménye:

Térjünk át a következő példára, amelyben megvizsgáljuk a táblázatsorok stílusának lehetőségeit.

Szolgáltatás	Ár
Összeg	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

Ebben a példában mi:

• Állítsa a táblázat szélességét a szélesség 100%-ára szülő elem, a fejlécekhez és az adatcellákhoz állítson be egy tömör keretet 1 képpont szélességgel.
• Beállítás elemhez

Címke	Leírás
. Meghatározza a táblázat tartalmát. Megadja a tábla nevét. Meghatározza a táblázat fejléccelláját. Egy táblázatsort határoz meg. Táblázat adatcellát határoz meg. Csoportfejléc tárolására szolgál egy táblázatban (táblafejléc). A táblázat "törzsének" tárolására szolgál. A táblázat "láblécének" (lábléc) tárolására szolgál. Meghatározza az adott oszloptulajdonságokat a címkén belül minden egyes oszlophoz Egy táblázat oszlopainak csoportját határozza meg. Behúzások használata a táblázatban Táblázat behúzások 1 2 3 4 2 3 4 BAN BEN ezt a példát Mi: Az asztalt középre helyeztük, a vízszintes központosítás módszerével külső behúzással ( árrés: 0 auto ). A táblázat nevéhez (tag

1	2	3	4	5

Ebben a példában mi:

• Középre helyezte a táblázatot külső margókkal, a fejléccellák szélességét és magasságát 50 képpontra állítva, megadva átlátszó szegély 5 pixel.
• Lebegés közben találtam (pszeudoosztály :lebeg) a fejléccellán, amelyet megkap a háttér kék színek, narancs szöveg színe, szegélye narancs színek 5 pixel és 100% lekerekítési sugár.
• átlátszó szegély szükséges ahhoz, hogy helyet foglaljunk a határon, ami lebegve jelenik meg, ha ez nem történik meg, az asztal „ugrik”.

Példánk eredménye:

A következő példa erre vonatkozik HTML használatával elemeket És és a stílusuk.

számú kérelem	Szolgáltatás	ár, dörzsölje.	Teljes
1	Éneklés	6 000	6 000
2	A mosogatás	2 000	2 000
3	Tisztítás	1 000	1 000
4	nyavalygás	1 500	1 500
5	Olvasás	3 000	3 000

Ebben a példában mi:

Példánk eredménye:

És az utolsó példa, amely meglehetősen nehezen érthető, és magas szintű CSS-ismeretet igényel, mivel olyan jövőbeli témákat érint, amelyeket a kurzuson belül részletesen tanulmányozunk.

Az előző példában rájöttünk, hogy a HTML elem csak egy CSS tulajdonságot alkalmazhat - a háttérszínt ( háttérszín), ugyanakkor állítsa be a háttérszínt a lebegtetésre (pszeudoosztály :lebeg) nem alkalmazható közvetlenül erre az elemre. Ebben a példában megnézzük, hogyan lehet kiemelni egy táblázat oszlopát pusztán CSS használatával.

számú kérelem	Szolgáltatás	ár, dörzsölje.	Teljes
1	Éneklés	6 000	6 000
2	A mosogatás	2 000	2 000
3	Tisztítás	1 000	1 000
4	nyavalygás	1 500	1 500
5	Olvasás	3 000	3 000

Ebben a példában mi:

• Beállítottuk, hogy a táblázatunk a szülőelem 100%-át, a táblázat cellái a szülőelem 25%-át foglalják el, és a szegélyük 1 pixel zöld, a fejléc és az adatcellák magassága 45 képpont. A tulajdonság segítségével eltávolítottuk a cellák közötti rést határ-összeomlás jelentéssel .
• És így, pszeudoelem használatával ::után minden elem után adjon hozzá tartalmat lebegve. Pszeudo elem ::után ingatlannal együtt kell használni tartalom, aminek köszönhetően beszúrunk egy blokk elemet, aminek van háttérszíne erdő zöldés van abszolút pozicionálás.
• Az abszolút pozicionálás itt szükséges ahhoz, hogy az elemet az őse adott éléhez képest eltolja, míg az ősnek rendelkeznie kell az értékkel pozíció eltér az alapértelmezett - static -tól, ellenkező esetben a számláló a böngészőablak megadott széléhez viszonyítva lesz, ezért beállítottuk a táblázatot relatív pozicionálás(relatív ).
• Beállítjuk a tulajdonságot a generált blokkunkhoz tetejére, amely megadja a pozicionált elem eltolási irányát a felső éltől, és a tulajdonságot alsó A, amely azt az irányt adja meg, amelyben a pozicionált elem el van tolva az alsó éltől. Mindkét tulajdonság 0-ra lett állítva, így a blokk a táblázat aljáról és tetejéről teljesen elfoglalja az elemet, ennek a blokknak a szélessége 25%-ra lett állítva, ez az érték magának a cella szélességének az értékének felel meg.
• És a végső tulajdonság, amit ehhez a blokkhoz állítunk be: z-index"-1" értékkel meghatározza az elhelyezett elemek elrendezésének sorrendjét Z tengely. Ez a tulajdonság azért szükséges, hogy a szöveg a blokk előtt legyen, és ne mögötte, ha nem ad meg nullánál kisebb értéket, akkor a blokk bezárja a szöveget.

Példánk eredménye:

Ha a tanulmány ezen szakaszában nem érti az elemek elhelyezésének folyamatát, akkor ne csüggedjen, ez egy nehezen érthető téma, amit szintén nem vettünk figyelembe, de mindenképpen figyelembe vesszük a következő cikkben. bemutató" Elemek pozicionálása CSS-ben ".

Kérdések és feladatok a témában

Mielőtt továbblépne a következő témára, végezze el a gyakorlati feladatot:

Ha nehézségei vannak gyakorlati feladat, Mindig megnyithatja a példát egy külön ablakban, és megnézheti az oldalt, hogy megnézze, milyen CSS-t használtak.

2016-2020 Denis Bolshakov, megjegyzéseket és javaslatokat küldhet az oldalon a [email protected] címre

Maguk a táblázatok meglehetősen "gyengén" néznek ki, emellett a böngészők a maguk módján megjelenítik a táblázatok bizonyos jellemzőit, különösen a kereteket. Ezeket a hiányosságokat azonban könnyű korrigálni a stílusok erejével. Ezzel párhuzamosan jelentősen bővülnek a táblázatok tervezésének eszközei, ami lehetővé teszi a táblázatok sikeres illeszkedését a webhely kialakításába és a táblázatos adatok áttekinthetőbb bemutatását.

Cella háttérszíne

Az összes táblázatcella háttérszíne egyidejűleg a háttér tulajdonságon keresztül állítható be, amely a TABLE választóra vonatkozik. Ugyanakkor emlékeznie kell a stílusok használatára vonatkozó szabályokra, különösen az elemek tulajdonságainak öröklésére. Bár a háttér tulajdonság nem öröklődik, a cellák alapértelmezett háttérértéke átlátszó, azaz. átlátszóság, így a háttér kitöltésének hatása a cellákra is érvényesül. Ha a TD vagy TH szelektor színét a TABLE-val egy időben adjuk meg, akkor ez a szín lesz beállítva a cella háttereként (2.3. példa).

2.3. példa. Háttérszín

1. címsor	2. címsor
3. cella	4. cella

Ebben a példában kék háttérszínt kapunk a cellákhoz (tag ) és piros a címnél (címke ). Ennek az az oka, hogy a TH szelektor stílusa nincs meghatározva, így a szülő háttere, jelen esetben a TÁBLÁZAT választó "átlátja". A TD-választó színe pedig kifejezetten meg van adva, így a cellák kékkel „telenek”.

Ennek a példának az eredménye az ábrán látható. 2.4.

Rizs. 2.4. A háttérszín megváltoztatása

Margók a cellákon belül

A margó a cella tartalmának széle és a szegély közötti távolság. Általában a címke cellpadding attribútuma használatos erre a célra.

. Meghatározza a margó értékét pixelben a cella minden oldalán. A kitöltési stílus tulajdonságot úgy használhatja, hogy hozzáadja a TD-választóhoz, ahogyan a 2.4. példában látható.

2.4. példa. Mezők a táblázatokban

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. címsor	2. címsor
3. cella	4. cella

Ebben a példában a szelektorok csoportosításával a mezők egyszerre vannak beállítva a TD és a TH szelektorhoz. A példa eredménye az ábrán látható. 2.5.

Rizs. 2.5. Mezők a cellákban

Ha a padding style tulajdonságot alkalmazza a táblázat celláira, akkor a címke cellpadding attribútumának hatása

figyelmen kívül hagyva.

A sejtek közötti távolság

A cellák közötti térköz módosításához használja a címke cellapacing attribútumát

. Ennek az attribútumnak a hatása jól látható, ha szegélyeket használ a cellák körül, vagy ha olyan színnel tölti ki a cellákat, amely kiemelkedik az oldal hátteréből. A cellatávolságot a border-spacing style tulajdonság váltja fel, amely beállítja a cellahatárok közötti távolságot. Egy érték beállítja a cellahatárok közötti függőleges és vízszintes távolságot is. Ha ennek a tulajdonságnak két értéke van, akkor az első a vízszintes távolságot határozza meg (azaz a cellától balra és jobbra), a második pedig a függőlegest (felső és alsó).

A border-spacing tulajdonságnak csak akkor van hatása, ha a TABLE választóban nincs a border-collapse beállítása összecsukásra (2-5. példa).

2.5. példa. A cellahatárok közötti távolság

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

Ennek a példának az eredménye az ábrán látható. 2.6.

Rizs. 2.6. Táblázat megjelenése szegélytávolság használatakor

internet böngésző Az Explorer a 7-es verzióig nem támogatja a border-spacing tulajdonságot, ezért ez a böngésző az alapértelmezett cellatávolság értéket fogja használni a táblázatokhoz (általában 2 képpont).

Ha a TABLE választóhoz egy szegély-összecsukás tulajdonságot ad hozzá összecsukási értékkel, a cellaosztás attribútumot a rendszer figyelmen kívül hagyja, és a szegélyköz értéke nullára lesz állítva.

Szegélyek és keretek

Alapértelmezés szerint kezdetben nincs szegély a táblázatban, és a címke border attribútuma használatával kerül hozzáadásra

. A böngészők eltérően jelenítik meg az ilyen szegélyt, ezért jobb, ha egyáltalán nem adjuk meg ezt az attribútumot, és szegélyrajzot rendelünk stílusokhoz. Nézzünk meg két, a stílusokhoz közvetlenül kapcsolódó módszert.

A cellpacing attribútum használata

Ismeretes, hogy a címke cellpacing attribútuma

beállítja a táblázat cellái közötti távolságot. Ha a táblázathoz és a cellákhoz más háttérszínt használunk, akkor a cellák között egy vonalrács jelenik meg, amelynek színe megegyezik a táblázat színével, vastagsága pedig megegyezik a cellatérfogat attribútum pixelben kifejezett értékével. A fenti 2.3. példa ezt a hatást mutatja, ezért nem ismétlem meg.

Vegye figyelembe, hogy ez nem túl kényelmes módja a határok létrehozásának, mivel korlátozott a hatóköre. Így csak egyszínű rácsot kaphat, és nem függőleges ill vízszintes vonalak a megfelelő helyeken.

A határtulajdon alkalmazása

A border style tulajdonság egyszerre állítja be a szegély színét, stílusát és az elem körüli szélességet. Ha külön sorokat szeretne létrehozni különböző oldalak, jobb származékokat használni - border-left , border-right , border-top és border-bottom , ezek a tulajdonságok rendre meghatározzák a bal, jobb, felső és alsó szegélyt.

A TABLE választóra a border tulajdonságot alkalmazva szegélyt adunk a táblázat egésze köré, a TD vagy TH választónál pedig a cellák köré (2-6. példa).

2.6. példa. Dupla szegély hozzáadása

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. címsor	2. címsor
3. cella	4. cella

Ez a példa fekete kettős szegélyt használ maga a táblázat körül, és tömör fehér szegély minden cella körül. A példa eredménye az ábrán látható. 2.7.

Rizs. 2.7. Szegély az asztal és a cellák körül

Ne feledje, hogy a cellák csatlakozásánál kettős vonalak jönnek létre. A címke cellapacing attribútumának hatására ismét megkapják őket

. Bár ez az attribútum sehol nem jelenik meg a példakódban, a böngésző alapértelmezés szerint ezt használja. Ha beállítod , akkor nem dupla, hanem egyszeres, de duplázott vastagságú vonalakat kapunk. A funkció módosításához alkalmazza a border-collapse stílus tulajdonságot az összecsukás értékkel, amely hozzáadódik a TÁBLÁZAT választóhoz (2-7. példa).

Példa 2.7. Egyetlen keret létrehozása

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. címsor	2. címsor
3. cella	4. cella

Ez a példa egy folytonos zöld vonalat hoz létre a cellák között és egy fekete vonalat az asztal körül. A táblázaton belül minden szegély azonos vastagságú. A példa eredménye az ábrán látható. 2.8.

Rizs. 2.8. Szegély az asztal körül

A cella tartalmának igazítása

Alapértelmezés szerint a táblázatcellák szövege balra van igazítva. Ez alól a szabály alól kivétel a címke , egy középre igazított címsort határoz meg. Az igazítási mód megváltoztatásához alkalmazzon stílust text-align tulajdonság(2.8. példa).

2.8. példa. A cella tartalmát vízszintesen igazítsa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. címsor	1. cella	2. cella
2. címsor	3. cella	4. cella

Ebben a példában a címke tartalma balra igazított, és a címke tartalma - a központban. A példa eredménye az alábbiakban látható (2.9. ábra).

Rizs. 2.9. Szöveg igazítása a cellákban

A függőleges igazítás egy cellában mindig középre kerül, hacsak nincs másképp megadva. Ez nem mindig kényelmes, különösen azoknál a táblázatoknál, amelyek cellatartalma eltérő magasságú. Ebben az esetben az igazítás a cella felső széléhez van beállítva a függőleges igazítás tulajdonság használatával, amint az a 2-9. példában látható.

Példa 2.9. A cella tartalmát függőlegesen igazítsa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. címsor	2. címsor
1. cella	2. cella

Ez a példa a fejléc magasságát állítja be mint 40 pixel, és a szöveg igazítása alul van. A példa eredménye az ábrán látható. 2.10.

Rizs. 2.10. Szöveg igazítása a cellákban

Üres cellák

A böngészők eltérően jelenítenek meg egy olyan cellát, amelyben nincs semmi. A „semmi” ebben az esetben azt jelenti, hogy sem kép, sem szöveg nem került a cellába, és a helyet nem veszik figyelembe. Természetesen a sejtek megjelenése csak akkor tér el, ha szegély van körülöttük. Láthatatlan szegély használatakor a cellák megjelenése, akár van bennük, akár nincs, ugyanaz.

A régebbi böngészők nem jelenítették meg az üres nézetcellák háttérszínét , így abban az esetben, ha a cellát tartalom nélkül kellett elhagyni, de a háttérszínt kellett megjeleníteni, a cellán belül elválasztatlan szóköz () került beillesztésre. A szóköz nem mindig megfelelő, főleg ha 1-2 pixelre kell beállítani a cellamagasságot, ezért is terjedt el az egypixeles átlátszó rajz. Valójában egy ilyen képet az Ön belátása szerint méretezhet, de nem jelenik meg a weboldalon.

Szerencsére elmúlt az egypixeles rajzok és mindenféle, ezekre épülő távtartó korszaka. A böngészők teljesen helyesen működnek a táblázatokkal, a cellák tartalmának jelenléte nélkül.

Az üres cellák megjelenésének szabályozására az üres cellák tulajdonságot használják; ha elrejtésre van állítva, akkor az üres cellák szegélye és háttere nem jelenik meg. Ha egy sorban minden cella üres, akkor a teljes sor el van rejtve. Egy cella üresnek számít a következő esetekben:

• egyáltalán nincsenek szimbólumok;
• a cella csak újsort, tabulátor karaktert vagy szóközt tartalmaz;
• a láthatóság értéke rejtett .

A nem törő szóköz hozzáadását látható tartalomként kezeljük, azaz. a cella többé nem lesz üres (2.10. példa).

2.10. példa. Üres cellák

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

A táblázat nézete a Safari böngészőben az ábrán látható. 2.11a. Ugyanez a táblázat az IE7-ben látható az ábrán. 2.11b.

A. Safari, Firefox, Opera, IE8, IE9 böngészőben

b. IE7 böngészőben

Rizs. 2.11. Táblázat nézet üres cellákkal