a tábla td használatával: első gyermek, tábla td: utolsó gyermekválasztó, a táblázat első vagy utolsó oszlopát formázhatja (kivéve a táblázat fejlécének első celláját);
a tábla td: nth-child selector (oszlopkiválasztási szabály) segítségével a táblázat bármely oszlopát stílusba állíthatja.
Bővebben olvashat a CSS -választókról.
, és a feliratoldali tulajdonság használatával elhelyezhető a táblázat előtt vagy alatt. A text-align tulajdonság a cím szövegének vízszintes igazítására szolgál. Örökölt.
1. táblázat
| Vállalat |
Q1 |
Q2 |
Q3 |
Q4 |
...
felirat (felirat-oldal: alsó; szöveg-igazítás: jobb; kitöltés: 10 képpont 0; betűméret: 14 képpont;) 
Rizs. 2. Példa a fejléc megjelenítésére az asztal alatt 6. Hogyan lehet eltávolítani a sejtkeretek közötti rést
Az alapértelmezett táblázatcellák határait kis szóköz választja el. Ha a szegély-összecsukást állítja be: összecsukja a táblázatot, akkor a rés megszűnik. Az ingatlan öröklődik.
Szintaxis
Táblázat (szegély-összeomlás: összecsukás;)
Rizs. 3. Példa az egyesítő és osztott cellahatárokkal rendelkező táblákra
7. Hogyan növelhető a cellahatárok közötti tér
A szegélytávolság tulajdonság használatával módosíthatja a cellahatárok közötti távolságot. Ez a tulajdonság a táblázat egészére vonatkozik. Örökölt.
Szintaxis
Táblázat (szegély összecsukása: külön; szegélytávolság: 10 képpont 20 képpont;) táblázat (szegély összecsukása: külön; szegélyköz: 10 képpont;)
Rizs. 4. Példa táblázatokra, amelyeknél a cellák közötti rések megnövekedtek
8. Hogyan lehet elrejteni az üres táblázatcellákat
Az üres cellák tulajdonság elrejti vagy megjeleníti az üres cellákat. Csak azokat a cellákat érinti, amelyek nem tartalmaznak tartalmat. Ha egy cellához háttér van megadva, és egy tábla (border-collapse: collapse;) van megadva, akkor a cella nem lesz elrejtve. Örökölt.
| Vállalat |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
tábla (szegély: 1px szilárd # 69c; szegély-összecsukás: külön; üres cellák: elrejt;) th, td (szegély: 2px szilárd # 69c;) 
Rizs. 5. Példa egy üres táblázatcella elrejtésére 9. A táblázat elrendezésének elrendezése a table-layout tulajdonság segítségével
A táblázat elrendezését a két módszer egyike határozza meg: fix elrendezés vagy automatikus elrendezés. Az elrendezés ebben az esetben azt jelenti, hogy a táblázat szélessége hogyan oszlik meg a cellák szélessége között. Az ingatlan nem öröklődik.
Szintaxis
Táblázat (táblázat-elrendezés: rögzített;)
10. A legjobb asztali elrendezések
1. Vízszintes minimalizmus
A vízszintes táblázatok olyan táblázatok, amelyekben a szöveg vízszintesen olvasható. Minden entitás egy külön sor. Az ilyen táblázatokat minimalista stílusban alakíthatja ki, ha két képpontos szegélyt helyez el a címsor alatt.
| Munkavállaló | Fizetés | Bónusz | Felügyelő |
|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin tan | $150 | - | Annie |
| Joyce ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
tábla (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; háttér: fehér; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; kitöltés: 10px 8px;) td (szín: # 669; kitöltés: 9px 8px; átmenet: .3s lineáris;) tr: hover td (szín: # 6699ff;)A sok sor miatt a táblázatok ilyen kialakítása megnehezíti az olvasást. A probléma megoldásához hozzáadhat egy képpontos szegélyt az összes td elem alá.
Td (szegély-alsó: 1 képpont szilárd #ccc; szín: # 669; párnázás: 9 képpont 8 képpont; átmenet: .3s lineáris;) / * a kód többi része megegyezik a fenti példával * /
Ha hozzáad egy a: hover hatást a tr elemhez, akkor a minimalista stílusú táblázatok könnyebben olvashatók. Amikor az egérmutatót egy cella fölé viszi, az ugyanabban a sorban lévő többi cellát egyszerre emeli ki, ami leegyszerűsíti az információk nyomon követésének folyamatát, ha a táblázatok több oszlopból állnak.
Th (font-weight: normal; color: # 039; kitöltés: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; kitöltés: 10px 15px;) tr: hover td (háttér: # e8edff ;)
2. Függőleges minimalizmus
Bár az ilyen táblákat ritkán használják, a függőlegesen orientált táblázatok hasznosak az oszlop által képviselt objektumok leírásának kategorizálásához vagy összehasonlításához. Az oszlopokat elválasztó szóköz hozzáadásával minimalista stílusúvá teheti őket.
Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; kitöltés: 8px 2px;) td (border- jobb: 30 képpont szilárd #fff; szegély-bal: 30 képpont szilárd #fff; szín: #669; párnázás: 12 képpont 2 képpont;)
3. "Box" stílus
A legmegbízhatóbb stílus minden típusú asztal díszítésére az úgynevezett "doboz" stílus. Elég egy jó színsémát választani, majd beállítani az összes cella háttérszínét. Ne felejtse el hangsúlyozni a sorok közötti különbséget a határok elválasztóként való beállításával.
Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; kitöltés: 8px;) td (háttér : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid átlátszó; kitöltés: 8px;) tr: hover td (háttér: #ccddff;)
A legnehezebb az a színséma megtalálása, amely harmonikusan illeszkedik webhelyéhez. Ha a webhely tele van grafikával és dizájnnal, akkor meglehetősen nehéz lesz használni ezt a stílust.
Táblázat (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- bal: 1 képpont szilárd # 9baff1; szín: # 039; párnázás: 8 képpont;) td (háttér: # e8edff; szegély-jobb: 1 képpont szilárd # aabcfe; szegély-bal: 1 képpont szilárd # aabcfe; szín: # 669; kitöltés: 8 képpont ;)
4. Vízszintes zebra
A zebra asztal nagyon vonzónak és praktikusnak tűnik. A kiegészítő háttérszín vizuális jelként szolgálhat az emberek számára a táblázat olvasásához.
Th (betűtípus-súly: normál; szín: # 039; kitöltés: 10 képpont 15 képpont;) td (szín: # 669; szegélyfelső: 1 képpont szilárd # e8edff; kitöltés: 10 képpont 15 képpont;) tr: n. Gyermek (2n) ( háttér: # e8edff;)
5. Újság stílus
Az úgynevezett újsághatás eléréséhez szegélyeket alkalmazhat a táblázat elemeire, és játszhat a benne lévő cellákkal. A könnyű, minimális újságstílus így nézhet ki: játsszon a színsémával, adjon hozzá szegélyeket, párnázást, különböző háttereket és a: lebegés hatást a vonal fölé.
Táblázat (szegély: 1 képpont szilárd # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px szaggatott # 69c; kitöltés: 12px 17px;) td (szín: # 669; kitöltés: 7px 17px; ) tr: hover td (háttér: #ccddff;)
Táblázat (szegély: 1 képpont szilárd # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px szaggatott #fff; kitöltés: 10px; háttér: #ccddff;) tr: hover td (háttér: # 99bcff;)
Táblázat (szegély: 1 képpont szilárd # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: nagybetű; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px szaggatott # 6cf; kitöltés: 10px 20px;)
6. A táblázat háttere
Ha az asztal stílusának gyors és egyedi módját keresi, válasszon az asztal témájához kapcsolódó vonzó képet vagy fényképet, és állítsa be az asztal hátteréül.
Png ") 98% 86% nem ismétlődő;) th (font-weight: normal; font-size: 14px; color: # 339; kitöltés: 10px 12px; háttér: fehér;) td (color: # 669; border- felül: 1 képpont egyszínű fehér; párnázás: 10 képpont 12 képpont; háttér: rgba (51, 51, 153, .2); átmenet: .3s;) tr: lebegés td (háttér: rgba (51, 51, 153, .1); )
Üdv mindenkinek! Tehát most már tudja, hogyan hozhat létre elemi táblákat, amelyekből annyi sorból és oszlopból áll, amennyire szüksége van. Nem rossz, nem rossz. Most beszéljünk ezeknek a táblázatoknak a kialakításáról.
Az utolsó leckében táblázatok jelentek meg szegélyek nélkül. És látod, ez így-úgy néz ki, nem is nevezheted jelnek. Ha táblázatszegélyeket szeretne létrehozni HTML -ben, adja hozzá a címkéhez
tulajdonság határ, a nullától eltérő értéket adva.
Készítsünk tehát szegélyeket az asztalhoz. Például a már meglévőhöz:
| Bal felső cella | A jobb felső cella |
| Bal alsó cella | Jobb alsó cella |
Eredmény a böngészőben:
A táblázat szegélyeinek eltávolítása
Viszont a HTML -tábla szegélyeinek eltávolításához, vagy azt is mondhatjuk, hogy láthatatlanná tesszük, szüksége 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 határok létrehozását, de nem kezelését. Ez 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 hozzon létre különböző határokat, mind az egyes cellákon belül, mind kívül, az asztal körül.
Nézzük meg, hogyan alkalmazható a CSS a tábla külső és belső határainak létrehozásához.
Ehhez távolítsa el a border attribútumot a táblázatunkból, és adjon hozzá stílusokat:
Példa táblázat
| Bal felső cella |
A jobb felső cella |
| Bal alsó cella |
Jobb alsó cella |
Eredmény a böngészőben:
Most adjunk hozzá szegélyeket minden cellához. Ehhez csak adja hozzá a stílusokat:
Eredmény a böngészőben:
Hogyan lehet eltávolítani a kitöltést a cellák között a HTML táblában
Egyetért azzal, hogy a CSS -szel meghatározott szegélyek megjelenése nem ugyanaz, mint szeretné. Kétségtelen, hogy esztétikai szempontból van tennivaló. A böngésző oldalon láthatja, hogy alapértelmezés szerint külön -külön jeleníti meg a táblák és cellák határait. Egy példa egyértelműen bizonyítja ezt.
Ha azonban a border-collapse CSS tulajdonságot használjuk, teljesen lehetséges megszabadulni az ilyen, kettősnek nevezett határoktól. A gyakorlatban ez így néz ki:
Táblázat (szegély: szilárd 1 képpont kék; szegély összecsukása: összecsukás;) ...
Ennek eredményeképpen a cellák közötti távolság megszűnik:
A border attribútumhoz rendelt összecsukási érték eltávolítja a kettős szegélyeket. Mint látható, az eredmény a szomszédos cellahatárok, valamint a cellaszegélyek és a táblázat külső szegélyének összeomlása. Ami az utóbbit illeti, teljesen eltávolítható. És ha szükség van a megjelenítésére, növelnie kell a szélességét. Így megszabadultunk a táblázatban lévő elválasztóktól. A következő leckében pedig arról beszélünk, hogyan állíthat be függőleges és vízszintes szegélyeket. Sok szerencsét mindenkinek!
Táblázatos adatok- táblázat formájában megjeleníthető és logikusan oszlopokra és sorokra osztható információk. A HTML -címke táblázatos adatok megjelenítésére szolgál a weboldalakon
, amely egy konténer a táblázat tartalmával. A HTML táblázat tartalmát soronként írjuk le, minden sor nyitó címkével kezdődik és záró címkével végződik
.
A címke belsejében
a táblázat cellái találhatók, címkékkel ábrázolva | vagy | ... Ezek a cellák tartalmazzák a weboldalon megjelenő összes táblatartalmat.
Asztali keret
Alapértelmezés szerint a weblap HTML táblája szegély nélkül jelenik meg; a szegély hozzáadásához a táblázathoz, mint minden más elemhez, a CSS szegély tulajdonságot kell használni. De meg kell jegyezni, hogy ha csak szegélyt ad hozzá az elemhez , majd az egész asztal körül megjelenik. Annak érdekében, hogy a tábla celláinak is legyen szegélye, be kell állítania az elemek szegélytulajdonságát | és | . Táblázat, th, td (szegély: 1 képpont fekete, fekete;) Próbálja ki " Most a táblának és a celláknak is vannak határai, míg minden cellának és táblának saját szegélye van. Ennek eredményeként egy üres hely jelent meg a keretek között; a szegélytávolság tulajdonság lehetővé teszi ennek a térnek a méretét, amely a teljes táblára van beállítva. Más szóval, nem tudja egyenként szabályozni a különböző cellák közötti réseket.
Még akkor is, ha eltávolítjuk a cellák közötti hézagokat a szegélytávolság tulajdonság 0 értékével, akkor a cellák határai egymáshoz érnek, megduplázódva. A border-collapse tulajdonság a cellahatárok összevonására szolgál. Két értéket vehet fel:
- külön: az alapértelmezett. A cellák rövid távolságra jelennek meg egymástól, minden cellának saját szegélye van.
- összecsukás: összekapcsolja a szomszédos képkockákat, a cellák közötti, valamint a cellák és a táblázatkeret közötti réseket figyelmen kívül hagyja.
A dokumentum neve
| Név | Vezetéknév |
|---|
| Homérosz | a Simpson család |
| Margarin | a Simpson család |
| Név | Vezetéknév |
|---|
| Homérosz | a Simpson család |
| Margarin | a Simpson család |
Próbáld ki " Asztal mérete
Miután kereteket adtunk a táblázat celláihoz, észrevehetővé vált, hogy a cellák tartalma túl közel van a szélekhez. A párnázási tulajdonság használatával üres teret adhat a cellák élei és tartalma között: Th, td (kitöltés: 7 képpont;) Próbáld ki " Az asztal mérete a tartalmától függ, de gyakran előfordulnak olyan helyzetek, amikor az asztal túl keskeny és szükségessé válik a nyújtása. A táblázat szélessége és magassága megváltoztatható a szélesség és magasság tulajdonságaival, beállítva a kívánt méreteket magára az asztalra vagy a cellákra: Táblázat (szélesség: 70%;) th (magasság: 50 képpont;) Próbálja ki " Szöveg igazítása
Alapértelmezés szerint a táblázat fejléc celláiban lévő szöveg középre igazított, a normál cellákban lévő szöveg pedig balra igazított, a szöveg-igazítás tulajdonság segítségével szabályozhatja a szöveg vízszintes igazítását.
A függőlegesen igazított CSS tulajdonság lehetővé teszi a szöveges tartalom függőleges igazításának vezérlését. Alapértelmezés szerint a szöveg függőlegesen igazodik a cellák középpontjához. A függőleges igazítást felülírhatja a függőleges igazítás tulajdonság egyik értékével:
- felül: a szöveg a cella tetejéhez igazodik
- középen: a szöveget középre igazítja (alapértelmezett)
- alul: a szöveg a cella aljához igazodik
A dokumentum neve
| Név | Vezetéknév |
|---|
| Homérosz | a Simpson család |
| Margarin | a Simpson család |
Próbáld ki " A táblázat sorainak háttérszínének váltakozása
Amikor nagy táblázatokat nézeget, amelyek sok sort tartalmaznak, sok információval, nehéz lehet nyomon követni, hogy egy adott sorhoz melyik adat tartozik. A felhasználók navigálásához két különböző háttérszínt használhat felváltva. A leírt hatás létrehozásához használhatja az osztályválasztót, hozzáadva azt a táblázat minden második sorához:
A dokumentum neve
| Név | Vezetéknév | Pozíció |
|---|
| Homérosz | a Simpson család | apa |
| Margarin | a Simpson család | anya |
| Bart | a Simpson család | egy fiú |
| Lisa | a Simpson család | lánya |
Próbáld ki "Egy osztály attribútum hozzáadása minden második sorhoz unalmas feladat. Az: n. Gyermek álosztályt hozzáadtuk a CSS3-hoz, hogy alternatív módon kezeljük ezt a problémát. Most az átlapolás hatása kizárólag CSS segítségével érhető el, anélkül, hogy a dokumentum HTML -jelölését módosítanánk. A pszeudo-osztály: nth-child segítségével kiválaszthatja a táblázat összes páros vagy páratlan sorát a páros (páros) vagy páratlan (páratlan) kulcsszavak egyikével: Tr: n-edik gyermek (páratlan) (háttér-szín: # EAF2D3;) Próbáld ki " A sor hátterének módosítása lebegéskor
A táblázatos adatok olvashatóságának javításának másik módja az, ha megváltoztatja a sor háttérszínét, amikor fölé viszi az egérmutatót. Ez segít kiemelni a kívánt táblázattartalmat és javítja az adatok vizuális észlelését.
Ennek a hatásnak a megvalósítása nagyon egyszerű, ehhez hozzá kell adnia a: hover pszeudo-osztályt a táblázat sorválasztójához, és be kell állítania a kívánt háttérszínt: Tr: lebegés (background-color: # E0E0FF;) Próbálja ki " A táblázat középre igazítása
A HTML tábla középre igazítása csak akkor lehetséges, ha a táblázat szélessége kisebb, mint a szülőelem szélessége. A táblázat középre igazításához a margó tulajdonságot kell használnia, és legalább két értéket kell megadnia: az első érték lesz felelős a táblázat külső margójáért felül és alul, a második pedig az automatikus középigazításért : Táblázat (margó: 10 képpont automatikus;) Próbálja ki " Ha különböző margókra van szüksége a táblázat tetején és alján, akkor a margó tulajdonságát három értékre állíthatja be: az első felelős a felső margóért, a második a vízszintes igazításért, a harmadik pedig az alsó margóért: Táblázat (margó: 10 képpont automatikus 30 képpont;)
Számos módszert fontoltunk meg az oldalon található elemek, például szöveges információk, linkek, képek, címsorok formázására, de mindez még nem elég. Cikkeimben gyakran használok HTML elemeket, például táblázatokat, mert a legtöbb esetben azok segítenek a fontos információk rendszerezésében és megkönnyítik a bemutatást.
Ebben a cikkben megismertetem Önökkel a HTML táblák formázásának bonyolultságait, és új CSS tulajdonságokat tanulhat meg, amelyek célja e célok elérése.
A hipertext jelölőnyelv HTML nagyszámú lehetőséget biztosított számunkra, hogy a CSS -stílusokat tíz egyedi címkéhez kössük, amelyek táblázatokkal való együttműködésre szolgálnak, azt javaslom, hogy ismételje meg őket a további tanulmányozás előtt:
| Címke | Leírás |
|---|
| Meghatározza a táblázat tartalmát. |
|
| Megadja a tábla nevét. |
|
| A táblázat fejléccelláját határozza meg. |
|---|
|
| Sorokat határoz meg a táblázatban. |
|
| A táblázat adatcelláját határozza meg. |
| A csoportcím elhelyezésére szolgál a táblázatban (táblázat címe). |
| |
A táblázat "törzsét" tartalmazza. |
|
A táblázat "láblécét" tartalmazza (lábléc). |
|
| Meghatározza a címke minden oszlopának meghatározott oszloptulajdonságait .
|
|
| Oszlopcsoportot határoz meg a táblázatban. |
A táblázat behúzásával való munka
Párnázás használata táblázatban
Táblázat behúzások
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
Ebben a példában mi:
- Helyezze az asztalt középre, vízszintes központosítási technikával, külső margókkal (margó: 0 automatikus).
- A tábla neve (címke ) az alsó párnázást 19 pixelre állítjuk. Remélem nem zavarodnak meg az egyenetlen számok :)
Példánk eredménye:
Távolság a cellák között
A fenti példa után észrevehette, hogy rés van a táblázat összes cellája között. Nézzük meg, hogyan lehet eltávolítani vagy növelni a táblázat cellái közötti rést.
A szomszédos cellák határai közötti távolság beállításához a CSS tulajdonságot kell használni - border -spacing.
Módosítsa a táblázatok közötti távolságot
szegélytávolság: 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:
- balra lebeg). Ha lemaradt a lebegő elemek témájáról, akkor mindig visszatérhet ehhez az oktatóanyaghoz - "".
- Ezenkívül a jobb oldali asztalpárnázást 30 képpontra állítjuk, és az asztalok függőleges igazítását állítjuk be (az elem teteje a legmagasabb elem tetejéhez igazodik). Ebben a cikkben részletesen visszatérünk erre a tulajdonságra.
- ) - félkövér.
- A táblázatcellákhoz (fejléc és adatcellák) 1 képpontos tömör szegélyt állítottunk be # F50 hexadecimális értékkel, és a kitöltést 19 oldalra állítottuk be minden oldalra.
- Az első asztalhoz az osztállyal .első a táblázat cellái közötti távolságot (border-spacing property) 30px 10px-re állítottuk be, a második táblázathoz az osztállyal .második egyenlő nullával, a harmadik táblával az osztállyal .harmadik 0,2 em.
Felhívom a figyelmet arra, hogy ha csak egy hosszérték van megadva a szegélytávolság tulajdonságban, akkor az jelzi a távolságot 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 , és a második 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 cellák közötti távolságot a határtávolság tulajdonsággal 0 értékkel távolítottuk el, de miért van, hogy a cellák határai metszik egymást?
Kettős szegélyek keletkeznek, mivel az egyik cella alsó szegélyét hozzáadják az alatta lévő cella felső határához, hasonló helyzet fordul elő a cellák oldalán, és ez logikus a megjelenítés szempontjából a táblázatot, de szerencsére van egy módja annak, hogy elmondja a böngészőnek, hogy mi vagyunk, nem akarjuk látni a cellahatárok ilyen pimasz viselkedését.
Ehhez a border-collapse CSS tulajdonságot kell használnia. Furcsa módon a border-collapse tulajdonság használata az összecsukási értékkel a legjobb módja annak, hogy eltávolítsuk a cellák közötti rést anélkül, hogy kettős határokat kapnánk közöttük.
Fontolja meg a szegély viselkedésének összehasonlítását, ha 0 értékű határtávolságú tulajdonságot és összecsukási értékű border-collapse tulajdonságot használ:
Példa a szegélyek megjelenítésére a táblázat cellái körül
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:
- Lebegtettük az asztalokat, és balra igazítottuk (úszó: balra), állítsuk be a jobb oldali párnázást 30 képpontra.
- Állítsa be a tábla nevét (címke ) - félkövér.
- A táblázatcellákhoz (fejléc és adatcellák) 5 képpont szilárd szegélyt állítottunk be # F50 hexadecimális értékkel, és rögzített szélességet 50 képpontot és 75 képpont magasságot állítottunk be.
- Az első asztalhoz az osztállyal .első a táblázat cellái közötti távolságot nullára állítjuk (határtávolság: 0;), a második táblázathoz pedig az osztállyal .másodikállítsa össze a border-collapse tulajdonságot az összeomláshoz, amely lehetőség szerint egyesíti a cellahatárokat.
Példánk eredménye:
Üres sejt viselkedés
A CSS használatával beállíthatja, hogy megjelenítse -e a táblázat üres celláinak szegélyeit és hátterét. Az üres cellák tulajdonság felelős ezért a viselkedésért, amely alapértelmezés szerint, amint azt az előző példákból észrevetted, üres cellákat jelenít meg.
Térjünk át egy példára:
Példa üres táblázatcellák megjelenítésére
üres cellák: show;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
üres cellák: elrejt;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Ebből a példából az üres cellák tulajdonság működésének megértése nagyon egyszerű, ha elrejtésre van állítva, akkor az üres cellák és a bennük lévő háttér rejtve marad, ha megjelenítésre van állítva (alapértelmezett), akkor megjelennek.
A táblázat fejlécének helye
Nézzünk meg egy másik egyszerű tulajdonságot a táblázatok stílusához - a felirat -oldalt, amely meghatározza a táblázat feliratának pozícióját (a táblázat felett vagy alatt). A feliratoldali tulajdonság alapértelmezés szerint felül van beállítva, amely a feliratot a táblázat fölé helyezi. Ahhoz, hogy a címet a táblázat alá helyezze, 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:
Példa a feliratoldali tulajdonság használatára
Irány az asztal fölött
| Név | Ár |
| Egy hal | 350 rubel |
| Hús | 250 rubel |
Cím a táblázat alatt
| Név | Ár |
| Egy hal | 350 rubel |
| Hús | 250 rubel |
Ebben a példában létrehoztuk két osztály amelyek szabályozzák a táblázat fejlécének helyzetét. Első osztályú ( .topCaption) fölé helyezi a táblázat címét, ezt alkalmaztuk az első táblára és a második osztályra ( .bottomCaption) alá helyezi a táblázat címét, a második táblára alkalmaztuk. Osztály .topCaption alapértelmezett felirat-oldali tulajdonsággal rendelkezik, és demonstrációs célból jött létre.
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écben és az adatcellákban. A text-align tulajdonság a vízszintes igazításhoz használható, hasonlóan a szöveges információkhoz. Ennek a tulajdonságnak a szöveghez való használatát a "" cikk elején tárgyaltuk.
A cellák tartalmának igazításához speciális kulcsszavakat kell használnia a text-align tulajdonsággal. Tekintsük ennek a tulajdonságnak a kulcsszavainak alkalmazását a következő példában.
Példa a táblázat vízszintes igazítására
|
Jelentése | Leírás |
|
bal | A cella szövegét balra igazítja. Ez az alapértelmezett (ha a szöveg iránya balról jobbra). |
|
jobb | A cella szövegét jobbra igazítja. Ez az alapértelmezett (ha a szöveg iránya jobbról balra). |
|
központ | A cella szövegét középre igazítja. |
|
igazolni | Nyújtja a sorokat úgy, hogy mindegyik 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, amely különböző vízszintes igazítást állított be a cellákban, és alkalmazta őket a táblázat soraihoz. A cella értéke megegyezik a text-align tulajdonság értékével
Példánk eredménye:
A vízszintes igazításon kívül a függőleges igazítást a függőleges igazítás tulajdonsággal is meghatározhatja a táblázat celláiban.
Kérjük, vegye figyelembe, hogy a táblázatcellákkal való munkavégzés során ennek a tulajdonságnak csak a következő értékei* használatosak:
*
-A táblázat cellájára alkalmazott al-, szuper-, szöveg-felső, szöveg-alsó, hossz- és% értékek úgy viselkednek, mintha az alapértéket használnák.
Nézzünk egy példát a felhasználásra:
Példa a táblázat függőleges igazítására
|
Jelentése | Leírás |
|
alapvonal | Igazítja a cella alapvonalát a szülő alapvonalához. Ez az alapértelmezett. |
|
tetején | A cella tartalmát függőlegesen igazítja a tetejéhez. |
|
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, amely különböző függőleges igazítást állított be a cellákban, és alkalmazta őket a táblázat soraihoz. A cella értéke megegyezik az adott sorra alkalmazott függőleges igazítás tulajdonság értékével.
Algoritmus a táblázat elrendezésének elhelyezéséhez a böngészőben
A CSS alapértelmezés szerint a böngésző automatikus táblaelrendezési algoritmusát használja. Ebben az esetben az oszlop szélességét a cella legszélesebb, nem törő tartalma határozza meg... Ez az algoritmus bizonyos esetekben lassú lehet, mivel a böngészőnek el kell olvasnia a táblázat összes tartalmát, mielőtt meghatározná a végső elrendezést.
A tábla elrendezéstípusának megváltoztatásához a böngészővel a gombbal automatikus tovább rögzített, a táblaelrendezésű CSS tulajdonságot kell használni a fix értékkel.
Ebben az esetben a vízszintes elhelyezés csak attól függ a táblázat szélességéből és az oszlopok szélességéből, és nem a cellák tartalmából. A böngésző azonnal megjeleníti a táblázatot az első sor beérkezése után. Ennek eredményeként a rögzített algoritmus lehetővé teszi, hogy gyorsabban hozza létre az ilyen táblázat elrendezését, mint az automatikus verzió használata. Amikor nagy táblákkal dolgozik, rögzített algoritmussal javíthatja a teljesítményt.
Nézzük meg ennek a tulajdonságnak az alkalmazását a következő példával:
Példa a table-layout tulajdonság használatára
táblázat-elrendezés: automatikus;
| Név |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
| Búza |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
asztal-elrendezés: rögzített;
| 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:
A táblázat sorainak és oszlopainak formázása
A "" cikkben már részben érintettük a táblázat sorainak és oszlopainak formázásának módszereit. Ebben a cikkben megvizsgáltuk egy csoport pszeudo-osztály használatát, amely lehetővé teszi a sorok stílusainak megváltoztatását táblázatokban értékek használatával még (becsületes) és páratlan (páratlan), vagy elemi matematikai képlet.
Nézzük újra a korábbi technikákat, és fedezzük fel a táblázatok sorainak és oszlopainak stílusának új módszereit. Térjünk át a példákra.
Példa az: n. Gyermek álosztály táblázatokkal való használatára
|
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:
Folytassuk a következő példával, amelyben megvizsgáljuk a táblázat sorainak beállításának lehetőségeit.
Példa a táblázatok sorainak stílusára
|
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ábla szélességét a szülőelem szélességének 100% -ára, a fejlécet és az adatcellákat állítsa 1 képpontos szilárd szegélyre.
- Az elemhez telepítve (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.
- Az elemekhez
amelyek az elem belsejében vannak (táblázat törzse) állítsa be a háttérszínváltozást lebegéskor (álosztály: lebegés) c fehér színenként khaki(az egész sor kiemelve van).
Példánk eredménye: Rizs. 153 Példa a táblázatok sorok stílusára A következő példa bemutatja, hogyan alkalmazható sarokkerekítés a táblázat celláira (tulajdonság).
Példa a cella sarkainak lekerekítésére
Ebben a példában mi:
- Központosítsa az asztalt kitöltésekkel, állítsa a fejléccellák szélességét és magasságát 50 képpontra átlátszó szegély 5 pixel.
- Megállapítottuk, hogy amikor a fejléc fölé lebeg (pszeudo-osztály: lebeg), megkapja a hátteret kék színek, narancssárga szöveg színe, szegély narancssárga színek 5 pixel és 100%-os sugár.
- Átlátszó szegély szükséges ahhoz, hogy helyet foglaljon a szegélynek, amely megjelenik a lebegéskor, ha ezt nem teszi meg, akkor az asztal "ugrik".
Példánk eredménye:
A következő példa a HTML elemek használatát érinti és és stílusuk.
Példa a táblázat oszlopainak kiemelésére
|
Pályázat száma | 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 | Bosszantó |
1 500 |
1 500 |
|
5 | Olvasás |
3 000 |
3 000 |
Ebben a példában mi:
Példánk eredménye:
Nos, és a végső példa, amely meglehetősen nehezen érthető és fejlett CSS -tudást igényel, mivel a tanfolyam keretében részletes tanulmányozásra tervezett jövőbeli témákat érinti.
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, de közvetlenül nem állíthatja be a háttérszínt a lebegéskor (a: lebegés álosztály) ezen az elemen. Ebben a példában megvizsgáljuk, hogyan lehet kiemelni egy táblázatoszlopot csak CSS használatával.
Példa a táblázat oszlopainak és sorainak kiemelésére a lebegéskor
|
Pályázat száma | 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 | Bosszantó |
1 500 |
1 500 |
|
5 | Olvasás |
3 000 |
3 000 |
Ebben a példában mi:
- A táblázatot úgy állítottuk be, hogy a szülőelem 100% -át foglalja el, a táblázatcellák a szülőelem 25% -át foglalják el, és 1 képpontos zöld színű szegéllyel rendelkeznek, a fejlécek és az adatcellák 45 képpont magasak. Eltávolítottuk a cellák közötti rést a border-collapse tulajdonsággal az értékkel
.
- Így a :: after pszeudo-elem használatával minden elem után adjon hozzá tartalmat.
lebegéskor. A :: után pszeudo-elemet szükségszerűen a tartalom tulajdonsággal együtt használják, ennek köszönhetően beszúrunk egy háttérszínű blokk elemet erdő zöldés van abszolút pozicionálás.
- Az abszolút pozicionálás itt szükséges az elem eltolásához az őse meghatározott pereméhez képest, míg az ősnek az alapértelmezett statikától eltérő pozícióértékkel kell rendelkeznie, ellenkező esetben a szám a böngészőablak megadott széléhez viszonyul, ezért terítettünk az asztalhoz relatív pozicionálás(relatív).
- A generált blokkunkhoz beállítottuk a felső tulajdonságot, amely a pozicionált elem eltolódásának irányát jelzi a felső élről, és az alsó tulajdonságot, amely a pozicionált elem eltolásának irányát jelzi az alsó széltől. Mindkét tulajdonság esetében a 0 értéket adtuk meg, így a blokk teljesen elfoglalja az elemet a táblázat aljáról és tetejéről, ennek a blokknak a szélessége 25%volt, ez az érték megfelel a cella szélességének maga.
- És a végső tulajdonság, amelyet ehhez a blokkhoz állítottunk be: z-index "-1" értékkel határozza meg a pozicionált elemek sorrendjét Z tengely... Ez a tulajdonság szükséges ahhoz, hogy a szöveg a blokk előtt legyen, és ne mögötte, ha nem állít be 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 pozicionálásának folyamatát, akkor ne csüggedjen, ez egy nehezen érthető téma, amelyet szintén nem vettünk figyelembe, de mindenképpen meg fogjuk vizsgálni a következő cikkben bemutató "Elemek pozicionálása a CSS -ben".
Kérdések és feladatok a témában
Végezze el a gyakorlati tevékenységet, mielőtt továbblép a következő témához:
 Ha nehézségei vannak a gyakorlat befejezésével, akkor bármikor megnyithatja a példát egy külön ablakban, és megtekintheti az oldalt, hogy megtudja, milyen CSS -t használtak.
2016-2020 Denis Bolšakov, az oldal munkájával kapcsolatos észrevételeit és javaslatait elküldheti a [email protected] címre
| |
|
| |
