A táblázatok széles körben használt elemek a különféle adatok bemutatására prezentációkban, előadásokban, szórólapokon és egyebekben. Áttekinthetőségük, sokoldalúságuk és egyszerűségük miatt a táblázatokat a weboldalakon is széles körben használják annak érdekében, hogy a szükséges anyagot jobban átadják az olvasónak. Ha a stílusok teljes erejét hozzáadja a táblázatokhoz, akkor nagyon sikeresen illesztheti be a táblázatokat a webhely kialakításába, és világosan és szépen jelenítheti meg a táblázatos adatokat.
Asztal szélessége
Alapértelmezés szerint a táblázat szélességét maga a böngésző állítja be, a benne lévő táblázatos adatok mennyisége alapján. Ha sok szöveg van a cellákban, akkor a táblázat a rendelkezésére álló teljes szélességet elfoglalja, ha pedig nincs elég szöveg, akkor a táblázat szélessége automatikusan csökken. Ha több táblázat van egy oldalon, akkor ezek eltérő szélessége néha hanyagnak tűnik. Ezért jobb, ha a táblázat szélességét kifejezetten százalékban, pixelben, ems-ben vagy bármilyen más CSS-egységben állítja be, ahogy az 1. példában látható.
1. példa: A táblázat szélessége százalékban
Táblázat ( szélesség: 100%; ) .tbl-medium ( szélesség: 60%; ) .tbl-small ( szélesség: 200 képpont; )
Ebben a példában a 100%-os szélesség minden táblázatra vonatkozik. Ismét az osztályok segítenek beállítani a kiválasztott táblák szélességét egy korábban létrehozott osztály használatával. Ahhoz, hogy a táblázat 200 pixel szélességű legyen, hozzá kell adni az elemet
Ebben a példában az oldalon lévő összes táblázat középre igazításra van állítva.
Háttérszín
Az összes táblázatcella háttérszíne egyidejűleg a háttér tulajdonságon keresztül állítható be, amely a táblázatválasztóra vonatkozik. Ebben az esetben emlékeznie kell a stílusok használatára vonatkozó szabályokra, különösen az elemek tulajdonságainak öröklésére. Ha a táblázattal egyidejűleg beállítja a td vagy th választó színét, akkor az lesz beállítva háttérként (3. példa).
3. példa: Háttérszín
| Csatlakozás típusa | ||
|---|---|---|
| Tengely | Ujj | |
| Ingyenes | H9 | D10 |
| Normál | N9 | én s 9 |
| Sűrű | P9 | |
Ennek a példának az eredménye az ábrán látható. 1.
Rizs. 1. Módosítsa a háttérszínt
Ha zebramintát szeretnénk készíteni, aminek a neve a váltakozó, különböző színű vonalak, akkor használjuk az :nth-child pszeudoosztályt, hozzáadva a tr választóhoz. Annak érdekében, hogy a zebra csak a táblázat törzsére terjedjen ki, és ne a fejlécére, elemekkel választjuk el őket egymástól És
(4. példa).4. példa: Zebra létrehozása
| Méretközök, mm | IT tolerancia, µm, minősítésekre | |||
|---|---|---|---|---|
| 5 | 6 | 7 | 8 | |
| 3-ig | 4 | 6 | 10 | 14 |
| St. 3-6 | 5 | 8 | 12 | 18 |
| St. 6-10 | 6 | 9 | 15 | 22 |
| St. 10-18 | 8 | 11 | 18 | 27 |
| St. 18-30 | 9 | 13 | 21 | 33 |
| St. 30-tól 50-ig | 11 | 16 | 25 | 39 |
| St. 50-80 | 13 | 19 | 30 | 46 |
Ennek a példának az eredménye az ábrán látható. 2.
Rizs. 2. Zebra
Az :nth-child választó páros értéke minden páros sorra alkalmazza a stílust, és beállítja a háttérszínüket. Akkor módosíthatod páratlanra is szürke A páratlan sorok kiemelve lesznek.
Ehhez hasonlóan az oszlopokat, nem pedig a sorokat, a td:nth-child(even) kell használni.
Margók a cellákon belül
A margó a cellaszegély és annak tartalma közötti távolság. Margó nélkül a táblázat szövege „ragad” a kerethez, ezáltal rontja annak érzékelését, de a margók hozzáadása javítja a szöveg olvashatóságát. Erre a célra a padding style tulajdonságot használják, amely a td vagy th választóval működik, amint az a 3. és 4. példában látható. Általában egyetlen érték van megadva, amely azután meghatározza a cella tartalma körüli üres teret. minden oldalról egyszerre. Két érték íródik ki, ha különböző mezőket kell beállítani függőlegesen (első érték) és vízszintesen (második érték).
A sejtek közötti távolság
A cellák között van egy kis üres hely, amely nem látható, hacsak nem állít be szegélyt vagy háttérszínt a cellákhoz. Ez a térköz kezdetben 2 képpont, és a border-spacing tulajdonság segítségével módosítható, ha hozzáadja a táblázatválasztóhoz (5. példa).
5. példa: Szegélyköz használata
Táblázat ( szegélyköz: 3 képpont; /* cellák közötti térköz */ ) thead th ( háttér: #e08156; /* Fejléc háttérszíne */ színe: #333; /* Szöveg színe */ ) td, th ( kitöltés: 5 képpont /* A cellákban lévő mezők */ háttér: #4c715b /* A cellák háttérszíne */ szín: #f5e8d0;
Bármely táblázathoz hozzáadva ezt a stílust, az ábrán látható eredményt kapjuk. 3.
Rizs. 3. Táblázat nézet cellák közötti távolsággal
Ha a border-collapse tulajdonságot hozzáadjuk a táblához a collapse értékkel, akkor a border-collapse figyelmen kívül hagyja, mert már nincs távolság a cellák között.
Szegélyek és keretek
Az egyik cella tartalmának egyértelmű elkülönítése érdekében a cellákhoz szegélyeket kell hozzáadni. Ezeket a border style tulajdonság hozza létre, amelyet az elemekre alkalmaznak (
6. példa: A border-collapse tulajdonság használata táblázatszegélyek létrehozásakor
| O | X | X |
| O | O | X |
| X | X | O |
A táblaszegélyek közötti különbség a border-collapse tulajdonsággal és anélkül az ábrán látható. 4.
Rizs. 4. Táblázat nézet keretösszecsukás használatakor
ábrán. A 4a. ábra az alapértelmezett táblázatkeretet mutatja. Felhívjuk figyelmét, hogy az asztalon belül minden vonal dupla vastagságú. A szegély összecsukása eltávolítja ezt a funkciót, és az összes vonal vastagsága azonos lesz (4b. ábra).
A vonalaknak nem kell a cellák minden oldalán lenniük, de úgy is megtervezhetők, hogy elválasztsák az egyik sort vagy oszlopot a másiktól. Ehhez a border-bottom , border-left és más hasonló tulajdonságokat használjuk. Szegélyek alkalmazása az elemekre
7. példa: Sorok a sorok között
| Csatlakozás típusa | Tűrési mezők a kulcshorony szélességéhez | |
|---|---|---|
| Tengely | Ujj | |
| Ingyenes | H9 | D10 |
| Normál | N9 | én s 9 |
| Sűrű | P9 | |
Ennek a példának az eredménye az ábrán látható. 5.
Rizs. 5. Táblázat vízszintes vonalakkal
Alapértelmezés szerint a táblázatcellában lévő szöveg balra és középre igazított. A kivétel az elem
8. példa: A cella tartalmának vízszintes igazítása
| 1. címsor | 1. cella | 2. cella |
|---|---|---|
| 2. címsor | 3. cella | 4. cella |
Ebben a példában a tartalom
Rizs. 6. Szöveg igazítása a cellákban
A cellában a függőleges igazítás mindig középre kerül, hacsak nincs másképp jelezve. Ez nem mindig kényelmes, különösen olyan táblázatok esetében, amelyek cellatartalma eltérő magasságú. Ebben az esetben az igazítás a cella felső széléhez van állítva a függőleges igazítás tulajdonság használatával top értékkel, a 9. példában látható módon.
9. példa Cella tartalmának függőleges igazítása
| Csatlakozás típusa | Tűrési mezők a kulcshorony szélességéhez | |
|---|---|---|
| Tengely | Ujj | |
| Ingyenes | H9 | D10 |
| Normál | N9 | én s 9 |
| Sűrű | P9 | |
Ebben a példában a szöveg a felső széléhez igazodik. A példa eredménye az ábrán látható. 7.
A táblázatok a hipertext nyelv szerves részét képezik HTML jelölés, amely továbbra is releváns a különféle adatok strukturálása és kényelmes bemutatása szempontjából.
Réges-régen, amikor a webhelyek elsősorban táblázatos formában készültek, a táblázatok iránti igény nagy volt, és az új forrás szinte teljes keretét tették ki. Ezt követően az elem jelentősége a blokkokhoz képest csökkent népszerűségben (div), aminek segítségével az elrendezési lehetőségek mind asztali, mind pedig mobil verziók oldalak.
Jelenleg a táblázatokat például árlistákhoz, listákhoz, jellemzőkhöz, kérdőívekhez és sok máshoz használják, a Cascading Style Sheets (CSS) használatával pedig javítani tudjuk a táblázatok vizuális megjelenítését egy dokumentumban. Itt bemutatok néhány példát a HTML táblák forráskóddal történő tervezésére, amelyeket később a projekt fejlesztése során használhatunk fel.
Táblázatok formázása CSS-sel
A Table styling egy HTML-be épített kész táblázat, amely bizonyos címkékhez CSS-tulajdonságokkal rendelkezik. Remélem tudja, hogyan és hova kell beilleszteni a kapottakat forráskód hogy az eredmény megjelenjen a képernyőn.
Először megadom a táblázat általános HTML kódját, amelyet később stílusozunk.
| Név | Leírás | Ár |
| Név | Jellemzők | Ár |
| Név #2 | Jellemzők | Ár |
| Név #3 | Jellemzők | Ár |
CSS-sablonok
A sablonok nem állítják, hogy eredetiek, de sokak számára hasznosak lehetnek.
Táblázat (szélesség: 100%; szegély összecsukása: összecsukás;) táblázat td (kitöltés: 12px 16px;) táblázat címsora tr (betűsúly: félkövér; keret teteje: 1px tömör #e8e9eb;) tr táblázat (szegély-alsó: 1px tömör #e8e9eb;) táblázat tbody tr:hover (háttér: #e8f6ff;)
Egyébként ha nem használnánk a címkét , akkor beállíthatja saját stílusait az első sorhoz a pszeudo-class:nth-child(1) segítségével. Táblázat (szélesség: 100%; szegély összecsukása: összecsukás;) táblázat címsora tr (szín: #ffffff; betűsúly: félkövér; háttér: #00bf80;) táblázat címsora tr td (szegély: 1px tömör #01ab73;) táblázat tbody tr td (szegély: 1px tömör #e8e9eb;) táblázat tbody tr:nth-child(2n) (háttér: #f4f4f4;) táblázat tbody tr:hover (háttér: #ebffe8;) Táblázat (szélesség: 100%; szegély összecsukása: külön; szegélytávolság: 4px;) table thead tr (szín: #ffffff; font-weight: bold;) table thead tr td (szegélysugár: 4px 4px 0 0); háttér: #2e82c3;) táblázat tbody tr td (szegély: 1px szilárd #2e82c3; szegélysugár: 4px; háttér: #cbdfef;) táblázat tbody tr td:hover (háttér: #a2c3dd; átmeneti időtartam: 0,2 mp;) Táblázat (szélesség: 100%; szövegigazítás: középre; szegély-alsó: 2px tömör #dfdfdf; szegélysugár: 6px; szegély-összecsukás: külön; szegélytávolság: 0px;) táblázatfej tr (szín: #ffffff; font-weight: háttér: #c83240;) table tr td (border-right: 1px solid #dfdfdf;) table tr td:last-child (border-child: 0px;) table tbody tr:nth-child(1n) ) (háttér: #f6f6f6;) táblázat tbody tr:nth-child(2n) (háttér: #e6e6e6;) táblázat tbody tr:hover (háttér: #ffe8e8; átmeneti időtartam: 0,6 s;) Mit jelentenek a sablonokban használt CSS-tulajdonságok: Táblázatos adatok- táblázatban megjeleníthető és logikusan oszlopokra, sorokra bontható információk. A weboldalak táblázatos adatainak megjelenítésére szolgál. HTML tag Egy címke belsejében Alapértelmezés szerint a weboldal HTML-táblázata szegély nélkül jelenik meg, hogy szegélyt adjon a táblázathoz, valamint az összes többi elemhez CSS tulajdonság határ . De érdemes odafigyelni arra, hogy ha csak egy elemhez adunk keretet Táblázat, th, td ( szegély: 1 képpont tömör fekete; ) Próbálja » Most már mind a táblázatnak, mind a celláknak van szegélye, és minden cellának és táblázatnak saját szegélye van. Ennek eredményeként a keretek között üres hely jelent meg, ennek a helynek a mérete szabályozható az egész táblára beállított border-spacing tulajdonsággal. Más szóval, nem szabályozhatja külön-külön a különböző cellák közötti távolságot. Még ha eltávolítja is a cellák közötti szóközt a 0 szegélytávolság tulajdonság értékével, a cellák szegélyei összeérnek egymással, megduplázva a méretet. A cellaszegélyek kombinálásához használja a border-collapse tulajdonságot. Két jelentése lehet: A táblázatcellák szegélyeinek hozzáadása után észrevehetővé vált, hogy a cellák tartalma túl közel van a szélekhez. Hozzáadni szabad hely Használhatja a kitöltési tulajdonságot a cellák szélei és azok tartalma között: Th, td ( padding: 7px; ) 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ás. A táblázat szélessége és magassága módosítható a szélesség és magasság tulajdonságok segítségével, beállítva a kívánt méreteket akár magának a táblázatnak, akár a celláknak: Táblázat (szélesség: 70%; ) th (magasság: 50 képpont; ) Próbáld ki » Alapértelmezés szerint a táblázat fejléccelláiban lévő szöveg középre igazodik, míg a normál cellákban lévő szöveg balra igazítva a szöveg igazítása tulajdonsággal szabályozhatja a szöveg vízszintes igazítását. A függőleges igazítású CSS tulajdonság lehetővé teszi a szövegtartalom függőleges igazításának szabályozását. Alapértelmezés szerint a szöveg függőlegesen igazodik a cellák közepéhez. A függőleges igazítás felülbírálható a függőleges igazítás tulajdonságértékek egyikével: Ha olyan nagy táblázatokat tekint meg, amelyek sok sort tartalmaznak sok információval, nehéz lehet nyomon követni, hogy egy adott sorhoz milyen adatok tartoznak. A felhasználók eligazodásának elősegítése érdekében 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 a táblázat minden második sorához:
Az osztályattribútum hozzáadása minden második sorhoz meglehetősen fárasztó. A pszeudo-class:nth-child hozzáadásra került a CSS3-hoz, hogy alternatív megoldást kínáljon erre a problémára. Most már kizárólag az alternáló hatás érhető el CSS használatával a dokumentum HTML-jelölésének megváltoztatása nélkül. Az pszeudoosztály:nth-child használatával kiválaszthatja a táblázat összes páros vagy páratlan sorát a kulcsszavakat: páros (páros) vagy páratlan (páratlan): Tr:nth-child(páratlan) ( háttérszín: #EAF2D3; ) Próbáld ki » Egy másik módszer a táblázatos adatok olvashatóságának javítására, ha megváltoztatja egy sor háttérszínét, amikor az egeret fölé viszi. Ez segít kiemelni a táblázat kívánt tartalmát, és javítja az adatok vizuális észlelését. Egy ilyen effektus megvalósítása nagyon egyszerű, ehhez hozzá kell adnia egy pszeudo-class:hover-t a táblázat sorválasztójához, és be kell állítania a kívánt háttérszínt: Tr:hover ( háttérszín: #E0E0FF; ) Próbáld ki » HTML igazítás A táblázat középre állí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álni, legalább két értéket adva meg neki: az első érték a táblázat külső margójáért lesz felelős felül és alján, a második érték pedig automatikus igazítás középre: Táblázat ( margó: 10 képpont automatikus; ) Próbálja » Ha különböző margókra van szüksége a táblázat tetején és alján, a margó tulajdonságot három értékre állíthatja be: az első a felső margóért, a második a vízszintes igazításért, a harmadik pedig az alsó margóért lesz felelős: Táblázat ( margó: 10 képpont automatikus 30 képpont; ) Maguk a táblázatok meglehetősen gyengén néznek ki, és a böngészők bizonyos táblázatjellemzőket, különösen a kereteket a maguk módján jelenítik meg. Ugyanakkor ezek a hiányosságok a stílusok erejével könnyen korrigálhatók. 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. 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. Ebben az esetben 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érkitöltési effektust is megkapjuk a celláknál. Ha a TABLE-val egyidejűleg beállítja a TD vagy TH választó színét, akkor ez a szín lesz beállítva a cella háttereként (2.3. példa). Példa 2.3. Háttérszín
Ebben a példában kék háttérszínt kapunk a cellákhoz (tag 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 . Meghatározza a margó értékét pixelben a cella minden oldalán. Használhatja a padding style tulajdonságot, ha hozzáadja a TD választóhoz, amint az 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 Ebben a példában a szelektorok csoportosításával a mezők egyszerre vannak beállítva a TD és TH szelektorokhoz. A példa eredménye az ábrán látható. 2.5. Rizs. 2.5. Mezők a cellákban A sejtek közötti távolság . 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 stílus tulajdonság border-spacing helyettesíti a cellatávolságot, beállítja a cellák határai 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őleges távolságot (fent és lent). A border-spacing tulajdonság csak akkor lép érvénybe, ha a TABLE választóban a border-collapse tulajdonság nem összecsukásra van állítva (2.5. példa). 2.5. példa. A cellahatárok közötti távolság
Ennek a példának az eredménye az ábrán látható. 2.6. Rizs. 2.6. Táblázat nézet szegélytávolság használatakor Internet böngésző Az Explorer 7-es és újabb verziói nem támogatják a border-spacing tulajdonságot, ezért ebben a böngészőben az alapértelmezett cellatávolság (általában 2 képpont) lesz használva a táblázatokhoz. Ha a TABLE választóhoz adunk egy border-collapse tulajdonságot összecsukás értékkel, akkor a cellapacing attribútumot a rendszer figyelmen kívül hagyja, és a border-collapse tulajdonságot nullára állítja vissza. Alapértelmezés szerint kezdetben nincs szegély a táblázatban, és a hozzáadása a címke border attribútuma használatával történik Ismeretes, hogy a címke cellpacing attribútuma Vegye figyelembe, hogy ez nem teljesen kényelmes módja határok létrehozása, mert korlátozott a hatóköre. Így csak egyszínű rácsot kaphat, függőleges vagy vízszintes vonalakat nem a megfelelő helyeken. A szegélystílus tulajdonság egyidejűleg beállítja az elem körüli szegély színét, stílusát és vastagságát. Amikor külön sorokat kell létrehozni a különböző oldalakon, jobb a - border-left , border-right , border-top és border-bottom származékok használata, ezek a tulajdonságok rendre meghatározzák a bal, jobb, felső és alsó szegélyt. . Ha egy TABLE szelektorra alkalmazzuk a border tulajdonságot, akkor a tábla egésze köré szegélyt adunk, a TD vagy TH szelektorhoz pedig a cellák köré (2.6. példa). 2.6. példa. Dupla keret hozzáadása 2.4. példa. Mezők a táblázatokban
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 Kérjük, vegye figyelembe, hogy a cellák csatlakozásánál kettős vonalak keletkeznek. A címke cellapacing attribútumának hatására ismét megkapják őket Példa 2.7. Egyetlen keret létrehozása 2.4. példa. Mezők a táblázatokban
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. Keret az asztal körül 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 Példa 2.8. A cella tartalmát vízszintesen igazítsa 2.4. példa. Mezők a táblázatokban
Ebben a példában a címke tartalma Rizs. 2.9. Szöveg igazítása a cellákban A cellában a függőleges igazítás mindig középre kerül, hacsak nincs másképp jelezve. Ez nem mindig kényelmes, különösen olyan táblázatok esetében, 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 2.4. példa. Mezők a táblázatokban
Ez a példa beállítja a fejléc magasságát Rizs. 2.10. Szöveg igazítása a cellákban A böngészők másképp jelenítenek meg egy 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, függetlenül attól, hogy van-e bennük valami, ugyanaz. A régebbi böngészők nem jelenítették meg az üres nézetcellák háttérszínét Szerencsére elmúlt az egypixeles rajzok és az ezekre épülő mindenféle távtartók korszaka. A böngészők tökéletesen működnek a táblázatokkal, még cellatartalom nélkül is. Az üres cellák megjelenésének szabályozásához használja az üres cellák tulajdonságot, ha elrejtésre van állítva, a keret és a háttér nem jelenik meg az üres cellákban. Ha egy sorban minden cella üres, akkor a teljes sor el van rejtve. A cella üresnek számít a következő esetekben: A nem törő szóköz hozzáadását látható tartalomként érzékeljük, azaz. a cella többé nem lesz üres (2.10. példa). 2.10. példa. Üres cellák 2.4. példa. Mezők a táblázatokban
Táblázat nézet be Safari böngészőábrán látható. 2.11a. Ugyanez a táblázat az IE7 böngészőben látható az ábrán. 2.11b. A. Böngészőben Safari, Firefox, Opera, IE8, IE9 b. IE7 böngészőben Rizs. 2.11. Egy táblázat nézete üres cellákkal És ebben a cikkben a tervezésükről fogok beszélni CSS használatával. A lépcsőzetes stílusok a következő tulajdonságokat használják a táblázatok formázásához: Állítsa be az asztal szélességét és magasságát. Ezen tulajdonságok nélkül a paraméterek meghatározása automatikusan történik, és a tartály tartalmától függenek Táblázat (szélesség: 450 képpont; magasság: 80%;) Meghatározza, hogy a címke által leírt táblafejléc hova kerüljön Exkluzív Firefox böngésző elérhető értékek balra(fejléc a bal oldalon) és jobbra(a táblázat jobb oldalán), de más böngészők nem értik őket. táblázat (felirat oldala: felül;) Segít elkerülni azokat a helyzeteket, amikor a cellahatárok kettős szegélyt alkotnak. Az alábbi ábra egy ilyen esetet mutat be. Alapértelmezés szerint így jelennek meg a cellák keretei. Szabály határ-összeomlás: külön; ugyanazt a hatást adja. A probléma megoldásához deklarálni kell border-collapse: összeomlás;(az eredmény az alábbi ábrán látható). Meghatározza a cellahatárok közötti távolságot. A szabály az egész táblázatra egyszerre van beállítva. Ha van egy érték, akkor vízszintesen és függőlegesen is beállítja a távolságot. Ha két érték van, akkor az első beállítja a vízszintes távolságot, a második pedig függőleges. A tulajdon összeegyeztethetetlen a szabállyal táblázat (határ-összeomlás: összeomlás;). Táblázat ( szegély: 4 képpont dupla #FCA360; szegély összecsukása: külön; szegélyköz: 10 képpont 20 képpont; ) td ( kitöltés: 3 képpont; szegély: 1 képpont tömör #FCA360; ) A következő megjelenést kölcsönzi a táblázatnak: Meghatározza, hogy a cella háttere és szegélyei megjelenjenek-e, ha az üres. A tulajdonságnak két értéke lehet: Megmondja a böngészőnek, hogyan határozza meg a táblázatcellák szélességét a tartalom alapján. Ne felejtse el, hogy más univerzális szabályokat is beállíthat az asztalra, például, ahogy a magasságnál tettük ( magasság) és szélesség ( szélesség). Ezt szem előtt tartva hozzunk létre egy egyszerű táblázatot, amely részben kommentálja a kódot.
A böngészőben a táblázat az alábbiak szerint fog kinézni. szélesség: 50%; Állítsa be a táblázat szélességét a szülőtábla szélességének felére. 50%-át a tartály szélességéből veszik
mert nincs más szülei. Vagyis a táblázat pontosan a böngészőablak felét fogja elfoglalni. feliratoldal: alsó; A címet alulra, az asztal alá helyezzük. keret: 4px tömör #006400; Adjon az asztalnak egy 4 pixel vastagságú színes keretet. border-collapse: összeomlás; Cellaszegélyek egyesítése. asztal-elrendezés: fix; Beállítjuk, hogy a böngésző hogyan határozza meg a táblázat szélességét. betűméret: 13 képpont; Állítsa be a fejléccellák betűméretét. betűsúly: félkövér; Tegye félkövérre a bennük lévő szöveget. háttér: #ADFF2F; Állítsa be a cellák háttérszínét. border-top: 4px solid #006400; keret-alsó: 3 képpont tömör #FF8C00; A felső és alsó keret beállítása. szín: # 039; Határozza meg a szöveg színét. padding: 8px; Állítsa be a cellák tartalma és a szegély közötti távolságot nyolc képpontra.Név Leírás Ár
Samsung Galaxy S8, S8 Plus 2400 ₽
Xiaomi Redmi 4A, 4X 520 ₽
Meizu M3S, M5S 720 ₽
CSS-tulajdonságok
, amely egy tároló a táblázat tartalmával. Tartalom HTML táblázatok soronként írja le, minden sor egy nyitó címkével kezdődik
és egy zárócímkével végződik .
címkék által képviselt táblázatcellák találhatók vagy . Ezek azok a cellák, amelyek a weboldalon megjelenített összes táblázattartalmat tartalmazzák.
Asztalkeret
, akkor az egész asztal körül megjelenik. Ahhoz, hogy a táblázat celláinak is legyen szegélye, be kell állítani a border tulajdonságot az elemekhez
És .
Név Vezetéknév Homérosz Simpson Margarin Simpson
Próbáld ki » Név Vezetéknév Homérosz Simpson Margarin Simpson Asztal mérete
Szöveg igazítás
Próbáld ki » Név Vezetéknév Homérosz Simpson Margarin Simpson A táblázatsorok háttérszínének váltogatása
Próbáld ki »Név Vezetéknév Pozíció Homérosz Simpson apa Margarin Simpson anya Bart Simpson fiú Lisa Simpson lánya A sor hátterének módosítása az egérmutatóval
Asztal igazítása középre
Cella háttérszíne
1. címsor 2. címsor 3. cella 4. cella ) é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".
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.
1. címsor 2. címsor 3. cella 4. cella 
Ha a padding style tulajdonságot alkalmazzák a táblázatcellákra, akkor a címke cellpadding attribútumának hatása
figyelmen kívül hagyva.
A cellák közötti távolság módosításához használja a címke cellapacing attribútumait
Leonardo 5 8 Raphael 4 11 Michelangelo 24 9 Donatello 2 13 
Szegélyek és keretek
. 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 a szegélyek rajzolását a stílusokra bízzuk. Nézzünk meg két, a stílusokhoz közvetlenül kapcsolódó módszert.
A cellpacing attribútum használata
beállítja a táblázat cellái közötti távolságot. Ha a táblázathoz és a cellákhoz különböző háttérszíneket 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 cellaspacing attribútum pixelben kifejezett értékével. A fenti 2.3 példa ezt a hatást mutatja, ezért nem ismétlem meg.
A border tulajdonság használata
1. címsor 2. címsor 3. cella 4. cella 
. 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 dupla vastagságú vonalakat kapunk. A funkció módosításához használja a border-collapse style tulajdonságot az összecsukás értékkel, amely hozzáadódik a TÁBLÁZAT választóhoz (2.7. példa).
1. címsor 2. címsor 3. cella 4. cella 
A cella tartalmának igazítása
, egy középre helyezett fejlécet határoz meg. Az igazítási mód megváltoztatásához használja a text-align style tulajdonságot (2.8-as példa).
1. címsor 1. cella 2. cella 2. címsor 3. cella 4. cella balra van igazítva, és a címke tartalma - a központban. A példa eredménye az alábbiakban látható (2.9. ábra).
1. címsor 2. címsor 1. cella 2. cella például 40 képpont, és a szöveg az alsó szélhez igazodik. A példa eredménye az ábrán látható. 2.10.
Üres cellák
, így amikor egy cellát tartalom nélkül kellett hagyni, de a háttérszínt kellett megjeleníteni, egy el nem választott szóköz () került hozzáadásra a cellán belül. A hely nem mindig megfelelő, különösen akkor, ha a cellamagasságot 1-2 pixelre kell állítani, ezért is terjedt el az egy pixeles átlátszó kialakítás. Valóban, egy ilyen képet az Ön belátása szerint méretezhet, de semmilyen módon nem jelenik meg a weboldalon.
Leonardo 5 8
Raphael 11
Michelangelo 24
Donatello 13
szélessége és magassága
. Az értékek bármilyen CSS hosszegységre vannak beállítva, de gyakran pixeleket használnak ( px) és kamat ( %
). Az utóbbi a szülőelemhez viszonyított szélességet, míg az előbbi az abszolút értéket állítja be.
felirat-oldal
határ-összeomlás
határtávolság
üres cellák
táblázat-elrendezés
Példa asztaltervre
Árak 2014
2015 2016
Kenyér 16
18 21
Cukor 35
44 50
Só 8
8,50 9
