Vіdstan mіzh stovpchikami a CSS táblázataiban.

Jó napot. Az asztalnak, mint elemnek megvannak a maga sajátosságai, mivel erősen felfújódik її nagyobb gazdag blokkok formájában. Ma ezekről szeretnék mesélni, hogyan kell css-ben írni a középső táblák közé.

V_dminnosti z blokkmodell

Zokogjon, ha a blokkok közepére helyezi, hangzik vikorista zvnishnі stupi, de ne dolgozzon a középsőkkel. A középső belső lépései írhatók, de a külső tengely nem írható.

Az egész nem nagy, csak a roztashovaniya táblázataiban a középső retesz mögötti tengely nem egy az egyhez passzolt, hanem kis lépésekkel, mintha nem kellett volna elindulni. Hogyan tisztíthatom meg őket?

A határtávolság ereje

A hatalom jön a segítségre, ahogy a css-ben a táblázatos adatoknál szokás - a határközöknél. Ahogy a név érthető, a bőr közepén (a lépésben) megjelenik a szabad hely.

Egy fontos pont: állítsa be az összes tábla szegélyközét. Ez a tengely a következő:

asztal (
határtávolság: 0;
}

Általában a középpontok között takarítunk, és most egytől egyig erősen nyomódik a bűz. Nyilván a pontokon lehet kérdezni, mert szükség lesz rá.

Lehetséges, kicsit homályosan, hogy milyen teljesítmény van beállítva az asztalválasztónak, de ez az asztalok olyan különlegessége, hogy csak emlékezni kell rá. A tápellátás nem fog működni, így a tábláknál is be kell állítani border-collapse: collapse. Ilyen állapotban a középső lépcsőkből automatikusan a középső lépések kerülnek, és nincs szükség szegélytávolságra.

Egy régi módszer a híváspontok középre állítására

Korábban annak, aki a címke előtt

Hozzáadtuk a cellpacing attribútumot, amivel a bejegyzést jelölték meg, de ma már nem ajánlott ilyen módszert használni. Tse zasmіchu kód, és nem felelnek meg a webfejlesztés jelenlegi szabványainak.

Pontosan abban, amit látsz fülledt tekintettel elem, a html pedig abszolút nem megfelelő a tієї jogra. A szabványok előírják, hogy mi a felelős a fő css-ért.

Mint egy bachit, css-ben rendet rakhatsz a középső asztalok között, vagy dédelgetheted őket a további erőért határtávolság. Mindezt mára. Ha tetszik a weboldal témája, kérjük, iratkozzon fel, hogy értesüljön az új anyagokról a weboldalon.

Atyám, megajándékoztunk téged csak dії, Yakі lehet zdіysnyuvati z az asztalok között. És most az asztal sokkal esztétikusabbnak tűnik. A középsők egy része azonban közvetlenül a szegélyekben ragadt. A Tse könnyen korrigálható, elég csak besétálni a közepébe HTML táblázatok. És akkor a keret közepén, középen lévő szöveg olvashatóbb lesz.

Ahhoz, hogy ezt a komisszárban dolgozhassa ki, nyerje meg az attribútumot cella kitöltése címkéhez

. A harmadik, rövidebb változat azonban: css.

Ilyen lelkiállapotban lépéseket kérnek további erőért párnázás. Nem fontos, hogy segítsek bejutni oda, de szükség, a vadállathoz, jobbkezesen, alulról, vagy balkezesen, vikoristaként, nyilván a következő tekintélyek valamelyikéhez: párnázott felső, párnázás jobbra, párnázó-alsóі padding-bal.

Kérdezheted, maga a pixel a hibás a bemenetért. Célozzuk meg a fenekét, amiben mi leszünk az alsó bejárat 20 pixel, és az összes többi lesz 10 . ilyen css- a kód így fog kinézni:

td (padding: 10px; padding-bottom: 20px;)

És az új 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:

Sétáljon a központok között

Általános szabály, hogy zavdannya, povyazanі zі svrennyam táblázatok, akkor virishiti, vikoristovuyuuchi ehhez a címkék, attribútumok és jogosultságok, yakі lehetővé teszi, hogy kereteket hozzon létre, a közepén, és beállíthatja maguknak a középsők háttérszínét is.

A táblázatok bejegyzései nem csak a közepén találhatók. A bűz jelen lehet, és maguk között a középsők között is.

Іsnuє dvі possiblity zrobiti vіdstupi mizh seredkami:

1. attribútumváltozattal cellatávolság címkéhez

.

győzelmekből css- Dominancia határtávolság.

Támogatást igényel, mi határtávolság az asztal egészére kell előírni, abban az órában teljesítményként párnázás szünet nélkül kell előírni az átlagnak.

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;)

І az eredmény kivonásához:

Azonnal menjünk tovább, hogy nem kell segítséget kérni, ezért lépjünk segítségért határ-összeomlás: összeomlás. Életkor vikoristanny tsієї optsії középső "stick" egy az egyhez.

És így a bűz okremo volt az egyik, a következő vikoristovuvat határ-összeomlás: külön. Fontos megérteni, hogy mit adott értéketє znachennyam a zamovchuvannyam számára. І zastosovuєtsya csak azért, hogy személyesen megmutassa, hogyan sértik meg a feladatot. Ha ezt a sort látjuk, akkor az eredmény úgy néz ki, mint a megtakarítások közepén ugyanannyi elrejtett.

Önmagukban a táblázatok „rossznak” tűnnek, ezt megelőzően a böngészők a maguk módján tükrözik a táblázatok, zocrema, keretek jellemzőit. Ugyanakkor ezek a nedolіki könnyen javíthatók a mіtsyu stílusok felgyorsításával. Ha ez megtörtént, a táblázatok kibővülnek, ami lehetővé teszi a táblázatok beírását az oldal kialakításába, és a táblázat adatainak áttekinthetőbb megjelenítését.

Színes háttér középen

A táblázat összes elemének háttérszíne egyszerre állítható be a háttér erejével, ahogy a TABLE választónál van beállítva. Ugyanakkor emlékezzen a vikoristannya stílusok szabályaira, a zokremára, az elemek erejének csökkenésére. A háttér ereje ugyan nem csökken, de a középső háttér esetében a blokkolás mögött transzparens kerül felhasználásra, így az átlátszóság, tehát a háttér kitöltésének hatása középen jelenik meg. Ha egyszerre állítja be a TD vagy TH választó színét a TÁBLÁZAT-ból, akkor ez a szín a szoba hátterében lesz beállítva (2.3. példa).

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

1. téma	2. téma
seredok 3	seredok 4

BAN BEN ezt a fenekét távolítsa el a kék színt a középsők hátteréről (tag ) Piros vagyok a címnél (tag ). Ennek az az oka, hogy a TH választóhoz nincs hozzárendelve a stílus, amelyen "átvilágít" az apa, jelen esetben a TÁBLÁZAT választó háttere. A TD választó színe pedig kézenfekvő, a középső i tengelye kék színnel „töltve”.

Ennek a fenékről szóló ajánlásnak az eredménye az ábrán. 2.4.

Mal. 2.4. Módosítsa a háttér színét

Mezők a közepén

A mezőt a perem közepén hívják a középső és a її kordon helyett. Gyűrű a tsієї meti zastosovuєtsya attribútum cellpadding címkéjéhez

. A Vіn a mező értékét pixelben határozza meg a középső bal oldalától számítva. Megengedett a padding stíluserősségének megváltoztatása, kiterjesztve azt a TD választóra, ahogy az a 2.4. függelékben látható.

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

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. téma	2. téma
seredok 3	seredok 4

Ebben az alkalmazásban a további csoportosításhoz a mezőválasztó egyik napról a másikra telepítve van a TD és TH választóhoz. ábrán látható jelzések tompa eredménye. 2.5.

Mal. 2.5. Mezők a közepén

Ha a padding stílusereje be van állítva a táblázatelemekhez, akkor ez a címke cellpadding attribútumára lesz alkalmazva

figyelmen kívül kell hagyni.

Vidstan mіzh közepek

A középpontok közötti távolság megváltoztatásához a címke cellapacing attribútuma be van állítva

. Ezt az attribútumot beöntve jó emlékezni arra, hogy mikor győznek a kordonok, de a közepén, vagy amikor a közepe tele van színnel, ami az oldalsó levéltetveken látszik. A cellatávolság helyettesítéseként a szegélytávolság stilisztikai ereje stílusossá válik, és a középső kordonok között rögzíti magát. Egy jelentés van beállítva egyszerre, függőlegesen és vízszintesen a középső kordonok között. Ha két jelentése van a hatalom uralkodójának, akkor az első vízszintes (akkor dühös és jobbkezes középen), a másik pedig függőlegesen (fent és lent).

A szegélytávolság ereje csak kismértékben különbözik, mivel a TABLE választó nem úgy van beállítva, hogy az összecsukási értékekből szegély-összecsukást kapjon (2.5. példa).

Példa 2.5. Álljon a középső kordonok közé

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 fenékről szóló ajánlásnak az eredménye az ábrán. 2.6.

Mal. 2.6. Táblázat nézet különböző szegélytávolsággal

böngésző internet böngésző e verzióig nem támogatja a szegélytávolság erejét, így a táblák melyik böngészőjében lefagy a cellaterelési feladatok bezáráshoz (a hang 2px).

Ha a szegélyösszecsukást a TABLE választóhoz összecsukási értékekkel adja hozzá, akkor a cellapacing 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

A kordonnak a táblázatban való rögzítéséhez nincs hátsó rész, és її a határcímke további attribútuma kiegészítése

. A böngészők más módon jelenítenek meg egy ilyen kordont, ezért jobb, ha nem az attribútumot tüntetik fel előtte, hanem a kordon festését stílusokra helyezik. Nézzünk meg két módszert, középső po'yazanih zі stílusok nélkül.

cellpacing attribútum wiki

Úgy néz ki, mint a címke cellapacing attribútuma

terítsd meg az asztalok közepét. Ha a táblázatok és a középsők hátterére más-más színt választunk, akkor a középső sorok között különböző színek vannak, ezek színei a táblázat színétől függően változnak, a többi szín pedig a cellaközök értékei. attribútumot pixelben. A hegyes személy esetében több alkalmazás 2.3 azonos hatású javallatok, ezt a jógát nem ismétlem meg.

Tisztelettel, a között nem ismert alkotási mód, borszilánkok kerülhetnek a zastosuvannya gömbjébe. Így csak egyszínű hálót lehet levenni, és nem függőlegesen ill vízszintes vonalak a szükséges helyeken.

hatalmi határ pangása

A szegély stílusereje egyszerre határozza meg a kordon színét, az elem stílusát és bajtársiasságát. Ott, ahol határvonalakat kell létrehozni a különböző oldalakon, jobb, ha megnyerjük a pokhіdnі - szegély-bal, határ-jobb, szegély-felül és szegély-alsó, hogy hatalmon legyen, jobbra, a fenevadnak és lent.

Ha a szegély hatványát a TÁBLÁZAT választóra helyezzük, egy szegélyt adunk a táblázat egésze köré, a TD vagy TH szelektor előtt pedig egy szegélyt a középpont körül (2.6. példa).

Példa 2.6. Függesztett keret hozzáadása

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. téma	2. téma
seredok 3	seredok 4

Ebben a fenékben maga az asztal mellett egy fenséges fekete színű keret, a bőrközpont mellett pedig egy erős fehér színű keret található. ábrán látható jelzések tompa eredménye. 2.7.

Mal. 2.7. Kordon az asztalok és a középpontok közelében

Mutassa be azt a tiszteletet, hogy a konvergencia világában kialakulnak a középvonalak. A cellpacing címke rahunok di attribútuma miatt ismét kijön a bűz

. Ha ezt az attribútumot szeretném hozzáadni a kódhoz, akkor sehol nem jelenik meg, a böngésző ezt használja a zároláshoz. hogyan kell megkérdezni , Ezt nem a subwines-től veszik el, hanem egy sorból, hanem egy alvállalattól. A hozzárendelt specifikáció módosításához a stílusjogosultság az összecsukási értékekből határ-összecsukásra van beállítva, amint 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. téma	2. téma
seredok 3	seredok 4

Ebben a popsiban az asztalon a középső és a fekete között erős zöld színű vonal jön létre. Az asztalok közepén lévő összes kordon lehet ugyanaz a tovshchina. ábrán látható jelzések tompa eredménye. 2.8.

Mal. 2.8. Kordon az asztalok mellett

Virivnyuvannya vmistu komіrok

A zamovchuvannyam szöveghez komіrtsі táblázatokban virіvnyuєtsya a bal szélén. Vynyatkom z th rule є címke , Vіn vyznaє címsor, olyan módon vyvіvnyuvannya vіdbuvaєtsya a központban. A szövegigazítás stilisztikai erejének beállítási módjának megváltoztatása (2.8. példa).

Példa 2.8. A szoba vízszintes megtekintése a szobában

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. téma	középső 1	seredok 2
2. téma	seredok 3	seredok 4

Ebben az alkalmazásban van egy címke a bal oldalon rendezve, és a címke helyett - a központban. A leolvasások tömbjének eredménye alább látható (2.9. ábra).

Mal. 2.9. A szöveg megtekintése középen

Az igazítás középen függőleges, és mindig a közepét nézi, ami nem egyértelmű. Ne tekerje fel kézzel, főleg asztaloknál, helyenként a szobák magasság szerint vannak osztva. Ebben a helyzetben az igazítás a középső felső széle mentén van beállítva a további függőleges igazítási teljesítmény érdekében, amint az a 2.9. függelékben látható.

Példa 2.9. Egy szoba együttnézete függőlegesen

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

1. téma	2. téma
középső 1	seredok 2

A fejléc magassága ebben az alkalmazásban van beállítva például 40 pixel, és a szöveg igazítása az alsó szélen jelenik meg. ábrán látható jelzések tompa eredménye. 2.10.

Mal. 2.10. A szöveg megtekintése középen

üres közepek

A böngészők továbbra is a közepét mutatják, a közepe nem mond semmit. A „semmi” ebben az esetben azt jelenti, hogy a vichka közepén nem adtak hozzá kicsiket, vagy a szöveget, ráadásul nem is vittem be a rozrahunokba. Természetesen a fajok csak ugyanúgy oszlanak meg, mivel határvonal van közöttük. Amikor vikoristanny láthatatlan keret, fajta középső, független attól, є bennük scho-nebud chi, zbіgaєtsya.

A régi böngészők nem mutatták az üres cellák színes hátterét , Ezért abban az esetben, ha a közepét hely nélkül kell hagyni, de a színt a háttérre kell mutatni, akkor a középső közepét a középső közepéhez adtuk ütés nélkül (). Igyekeztem nem járkálni állandóan, főleg, ha 1-2 pixelre kell beállítani a szoba magasságát, amin keresztül a kicsik egypixeles rekeszéről levesznek egy nagyobb szélességet. Valójában az ilyen kicsiket saját belátása szerint méretezheti, de nem jelenik meg a webhelyen.

Szerencsére elmúlt az egypixeles kicsik és ezek alapján mindenféle rózsa korszaka. A böngészők megfelelően működnek táblázatokkal és jelenlét nélkül a középsők helyett.

Az üres cellák megjelenésének szabályozására az üres cellák teljesítményét használjuk, a hide értéknél az üres cellákban a keret és a háttér nem jelenik meg. Ha az összes közepe üres egy sorban, akkor a sort egésznek kell tekinteni. A közepét üresen veszik a közelgő hullámvölgyekben:

• nincsenek szimbólumok;
• a komіrtsі-ben csak a sor eltolása van, a táblázat szimbóluma vagy hiányzik;
• A láthatóság értéke rejtett.

Egy nem feltűnő minta hozzáadásával a rendszer úgy veszi, ahogy van, így a közepe már nem lesz üres (2.10.

2.10. példa. üres közepek

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

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

de. Safari, Firefox, Opera, IE8, IE9 böngészőkhöz

b. IE7 böngészőhöz

Mal. 2.11. Nézet a táblázat üres középpontjaival

A CSS specifikáció szabadságot ad a táblázatok tervezésében. A zár mögött az asztalon és az asztal elemein nincsenek látható kordonok és hátterek, míg az asztal közepén lévő középpont nem illeszkedik egy az egyhez.

A táblázat közepének szélességét a táblázat szélessége határozza meg, így a táblázat oszlopainak szélessége eltérő lehet. A sorozat összes középpontjának magassága azonos, és a legmagasabb középpont magassága határozza meg.

táblázat formázása

1. Táblázatok közötti szegély

A táblázat és a közepén lévő középsők böngészőszerűen, látható kordonok nélkül jelennek meg. asztalok közöttállítsa be a határ erejét:

Táblázat (szegély-összecsukás: összecsukás; / * a közepek közötti üres terek eltávolításra kerülnek * / szegély: 1 képpont tömör szürke; / * készlet 1 képpontos régi szürke kordonnal rendelkező asztalokhoz tovshchina * /)

A fejléc közepe között bőröltés van beállítva az edik elemhez:

Th (szegély: 1 képpont tömör szürke;)

közepe között táblázattestek vannak beállítva a td elemhez:

Td (szegély: 1 képpont, tömör szürke;)

A bírósági iratok keretszáma nem visszafogott, így minden táblához kordont állíthat be a következő módon:

Th, td (szegély: 1 képpont, tömör szürke;)

Az asztal régi kordonját megtekintheti, ha nagyobb szélességét állítja be:

Táblázat (szegély: 3 képpont, tömör szürke;)

Gyakran kérdezheti a határt:

/ * Állítsa be az asztalra a tovschina szürke színű kordonját 3px * / asztal (szegély-tető: 3px tömör szürke;) / * Állítsa be az asztal törzsének közepére a tovshchina szürke színű kordonját 1px * / td (szegély-alsó: 1px tömör szürke;)

A határ hatalmáról bővebben olvashat.

2. Az asztal szélességének és magasságának beállítása

Zamovchuvannyam számára asztal szélessége és magassága vynachaetsya in myst її seredkіv. Ha a szélesség nincs beállítva, akkor az egyenlő lesz a legszélesebb sor (sor) szélességével.

Táblázat és oszlopszélesség beállítva további teljesítményszélességhez. Ha az asztal asztalra van állítva (szélesség: 100%;), akkor az asztal szélessége megegyezik a tárolóblokk szélességével, amelyben elhelyezték.

Állítsa be a táblázatok és oszlopok szélességét px-ben vagy %-ban, például:

Táblázat (szélesség: 600 képpont;) th (szélesség: 20%;) td: első gyermek (szélesség: 30%;)

Asztal magassága ne tedd. a sorok magassága A táblázatok az elemek felső és alsó párnázásával kezelhetők і . Nem javasolt a rögzítési magasság a nagyobb teljesítmény érdekében.

Th, td (padding: 10px 15px;)

3. Hogyan állítsuk be az asztal hátterét

Zamovchuvannyam számára asztal háttérés seredkіv prozory. Mint egy oldal vagy egy blokk, ami megtisztítja az asztalt, mossa le a hátteret, akkor az ablakok átvilágítanak az asztalon. Ha a feladatok háttere és a táblázatoknál és a középsőknél, akkor az átfedés mezőiben a táblázatok és a középsők háttere csak a középsők háttere lesz látható. A táblázat egészének háttereként és a її seredkіv működhet:
töltő,
,
.

4. Táblázat oszlopai

A táblázat CSS-modellje elsősorban a súgócímke mögött kialakított sorokra (sorokra) összpontosít

. A gyakorlatban vannak ingadozások, ha az oszlopok speciális formázására van szükség, mivel ez sértő módokon lehetséges:

segítségért címke

Tetszőleges számú bejegyzés hátterét beállíthatja;

a tábla súgója mögött td: first-child, table td: last-child szelektor, stílusokat állíthatunk be a táblázat első vagy további oszlopához (a táblázat fejlécének közepén az első sor után);

a táblázat td: nth-child Selector (az oszlopok kiválasztásának szabálya) segítségével a táblázat bármely oszlopához beállíthatunk stílusokat.

A CSS-szelektorokról bővebben olvashat.

5. Hogyan adjunk hozzá táblázatcímet

A címke segítségére címet adhatunk a táblázathoz , A további teljesítmény érdekében a feliratoldali jóga az asztal elé vagy alá helyezhető. Vízszintes igazításhoz a címsor szövege szövegigazításra van állítva. Hanyatlás.

...

táblázat 1. sz

vállalat	Q1	Q2	Q3	Q4

felirat (felirat oldala: alul; szövegigazítás: jobbra; kitöltés: 10 képpont 0; betűméret: 14 képpont;) Mal. 2. Példa a táblázat alatti címsorra

6. Hogyan tegyük rendbe a középső keretei közötti teret

Keretek az asztalok közepén a reteszelő elválasztók mögött, kis hézaggal. Hasonlóképpen állítsa be a border-collapse: összecsukást a táblákhoz, akkor a rés összeomlik. A teljesítmény csökken.

szintaxis

táblázat (határ-összeomlás: összecsukás;)
Mal. 3. Butt asztalok

7. Hogyan lehet növelni a távolságot a középső keretek között

A szegélytávolság további teljesítménye érdekében válthat a középső keretek között. Tekintettel a hatalom zastosovuetsya az asztal egészére. Hanyatlás.

szintaxis

Táblázat (szegély-összecsukás: külön; szegélytávolság: 10px 20px;) táblázat (szegély-összecsukás: külön; szegély-köz: 10px;)
Mal. 4. Fenékasztal a középső keretek között nagyobb térközökkel

8. Hogyan lehet megragadni az üres asztalokat

Az üres cellák ereje vagy üres cellákat mutat. Dіє tіlki a seredki, yakі ne mіstyat be-yakoy tartalmat. Ha a feladatdoboznak van háttere, és a táblázathoz tábla (border-collapse: collapse;) be van állítva, akkor a gomb csatolva lesz. Hanyatlás.

vállalat	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

táblázat (szegély: 1px tömör #69c; szegély összecsukása: külön; üres cellák: elrejtés;) th, td (szegély: 2px tömör #69c;) Mal. 5. Az asztal üres közepére erősített fenék

9. A táblázat elrendezésének elrendezése a további táblázatelrendezési teljesítmény érdekében

A táblázat elrendezésének elrendezését két megközelítés egyike határozza meg: az elrendezés rögzítése vagy az automatikus elrendezés. Az ilyen elrendezés alatt lehetőség van az asztal szélességének változtatására a középsők szélessége között. A hatalom nem csökken.

szintaxis

Táblázat (tábla-elrendezés: rögzített;)

10. Jobb asztalelrendezések

1. Vízszintes minimalizmus

Vízszintes táblázatok - minden olyan táblázat, amelyben a szöveg vízszintesen olvasható. A nap bőre egy okremy sor. Hasonló asztalokat tervezhet minimalista stílusban, ha a címsor alá két pixeles kordont helyez el.

munkavállaló	Fizetés	Bónusz	Felügyelő
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

táblázat (betűcsalád: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; betűméret: 14 képpont; háttér: fehér; maximális szélesség: 70%; szélesség: 70%; szegély összecsukása: összecsukás; szöveg -igazítás: balra;) th (betűsúly: normál; szín: #039; szegély-alsó: 2px tömör #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;)

nál nél remek szám egy sor ilyen táblázatkialakítás megkönnyíti az olvashatóságot. A probléma megoldásához hozzáadhat egy pixeles kordont td elemekkel.

Td (szegély-alsó: 1 képpont tömör #ccc; szín: #669; kitöltés: 9px 8px; átmenet: .3s lineáris;)

A hatás fokozása: vigye az egérmutatót a tr elemre, hogy könnyebben olvasható legyen a minimalista stílusban kialakított táblázat. Ha az egérmutatót középre viszi, más középső részek és ugyanazok a sorok is megjelennek egyszerre, ami leegyszerűsíti az információk hozzáadásának folyamatát, mintha a táblázatok oszlopok szóródását látnák.

th (betűsúly: normál; szín: #039; kitöltés: 10px 15px;) td (szín: #669; szegély felső: 1px tömör #e8edff; kitöltés: 10px 15px;) tr: hover td (háttér: #e8edff ;)

2. Függőleges minimalizmus

Függetlenül attól, hogy a táblázatokhoz hasonlókat ritkán idézik, de nem kevesebbet, a táblázatok függőleges tájolásúak kategorizálás céljából, vagy hasonlóak az oszlop által ábrázolt objektumok leírásához. Minimalista stílusban díszítheti őket, szóközökkel bővítheti az oszlopokat.

th(betűsúly: normál; szegély-alsó: 2px tömör #6678b1; szegély-jobb: 30px tömör #fff; szegély-bal: 30px tömör #fff; szín: #039; kitöltés: 8px 2px;) td(border- jobbra: 30px tömör #fff; szegély balra: 30px tömör #fff; szín: #669; kitöltés: 12px 2px;)

3. "dobozos" stílus

A legjobb stílus minden típusú asztal tervezéséhez, az úgynevezett "doboz" stílushoz. Dosit pіdіbrati jó színösszeállítás, Ezután állítsa be a háttérszínt az összes középső részhez. Ne felejtse el megerősíteni a sorok közötti ülést, miután a kordont adagolóként szerelte fel.

th(betűméret: 13px; betűsúly: normál; háttér: #b9c9fe; szegély felső: 4px tömör #aabcfe; keret alsó: 1px tömör #fff; szín: #039; kitöltés: 8px;) td(háttér : #e8edff; szegély-alsó: 1px tömör #fff; szín: #669; szegély felső: 1px tömör átlátszó; kitöltés: 8px;) tr: hover td (háttér: #ccddff;)

Kényelmesebb - ismerni ezt a színskálát, hogy harmonikusan illeszkedjen webhelyéhez. A grafika és a design iránt érdeklődő oldalként hangsúlyoznia kell stílusát.

Táblázat (betűcsalád: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; betűméret: 14 képpont; maximális szélesség: 70%; szélesség: 70%; szövegigazítás: középre; szegély összecsukása: összecsukás ; szegély felső: 7 képpont tömör #9baff1; szegély alsó: 7 képpont tömör #9baff1;) th (betűméret: 13 képpont; betűsúly: normál; háttér: #e8edff; jobb szegély: 1 képpont tömör #9baff1; szegély- bal: 1px tömör #9baff1; szín: #039; kitöltés: 8px;) td(háttér: #e8edff; szegély-jobb: 1px tömör #aabcfe; szegély-bal: 1px tömör #aabcfe; szín: #669; kitöltés: 8px ;)

4. Vízszintes zebra

A zebraasztal kellemesnek és praktikusnak tűnik. A háttér további színei vizuális támpontként szolgálhatnak az emberek számára, amikor táblázatokat olvasnak.

th (betűsúly: normál; szín: #039; kitöltés: 10px 15px;) td (szín: #669; szegély felső: 1px tömör #e8edff; kitöltés: 10px 15px;) tr: nth-child(2n) ( háttér: #e8edff;)

5. Újságstílus

Az úgynevezett újsághatás elérése érdekében az asztalok elemeihez kordont helyezhetünk, és középen játszhatunk a középsőkkel. A könnyed, minimalista újságstílus a következőképpen nézhet ki: játsszon a színsémával, adjon hozzá kordont, lépcsőket, különböző háttereket és hatást: mutasson a sor fölé.

Táblázat (szegély: 1px tömör #69c;) th (betűsúly: normál; szín: #039; szegély-alsó: 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: 1px, tömör #69c;) th (betűsúly: normál; szín: #039; kitöltés: 10px;) td (szín: #669; szegély teteje: 1px szaggatott #fff; kitöltés: 10px; háttér: #ccddff;) tr: lebeg td (háttér: #99bcff;)

Táblázat (szegély: 1px tömör #6cf;) th (betűsúly: normál; betűméret: 13px; szín: #039; szövegátalakítás: nagybetűs; jobb oldali szegély: 1px tömör #0865c2; szegély teteje: 1px tömör #0865c2; szegély balra: 1px tömör #0865c2; szegély alul: 1px tömör #fff; kitöltés: 20px;) td (szín: #669; szegély jobbra: 1px szaggatott #6cf; kitöltés: 10px 20px;)

6. Táblázat háttér

Ha az asztalok egyedi és egyedi tervezési módját keresi, válasszon egy megfelelő képet vagy fotót, ahogy az azokban a táblázatokban áll, és állítsa be az asztalok hátterének.

Png ") 98% 86% no-repeat;) th (betűsúly: normál; betűméret: 14px; szín: #339; kitöltés: 10px 12px; háttér: fehér;) td (szín: #669; szegély- felső: 1px tömör fehér; kitöltés: 10px 12px; háttér: rgba(51, 51, 153, .2); átmenet: .3s;) tr: hover td (háttér: rgba(51, 51, 153, .1); )