CSS: афармленне табліц. прыклады афармлення

Афармленне табліц з дапамогай CSS - занятак цікавае і адказнае. Падыходзіць да гэтай справы трэба пісьменна, з веданнем ўсіх магчымасцяў стыляў. Акрамя гэтага, трэба валодаць пачуццём прыгожага, каб не адпужваць сваёй творчасцю наведвальнікаў сайта.

У табліцах можна змяніць практычна ўсё. Прыгожае афармленне табліц CSS мае на ўвазе выкарыстанне афармлення межаў, фону табліцы, фону вочак, прамежку паміж імі і шмат чаго іншага. Разгледзім самае асноўнае.

мяжа табліцы

Стыль афармлення табліцы CSS заўсёды мае на ўвазе гульню з мяжой (рамкай). Усе табліцы па змаўчанні не абводзіў рамкай. Гэта значыць, яна роўная 0 пікселям. Але гэта можна выправіць пры дапамозе ўласцівасці border.

Можна паказаць знешнюю рамку для ўсёй табліцы:

table {border: 3px solid black; }

Дзякуючы гэтай радку ва ўсіх табліц на сайце, дзе выкарыстоўваецца гэты стыль, будзе чорная рамка. Звярніце ўвагу, што мяжа толькі па краях, але не ўнутры табліцы. Для вочак і радкоў рамка задаецца інакш.

th, td {border: 3px solid black;}

Таўшчыню і колер можна паказаць любыя. Майце на ўвазе, што мяжы не падвойваюцца пры Стыкаванне вочак.

Слова solid пазначае суцэльнае афармленне. Ўказваць можна і іншыя значэнні.

Часцей за ўсё выкарыстоўваецца менавіта суцэльная рамка, паколькі яна глядзіцца больш прывабна і не адцягвае ўвагу ад асноўнага кантэнту сайта.

Ўласцівасць border можна паказваць яшчэ і па напрамках. Мяжу можна задаваць толькі для верхняй, ніжняй, левай ці правай частцы. Паколькі ў некаторых выпадках не падыходзіць варыянт з рамкай для ўсёй табліцы адразу.

table {border-top: 1px solid red; }

Так можна задаць рамку толькі для верхняй частцы табліцы. Аналагічна і для любых іншых бакоў, проста замест top пішам: right, left або bottom.

загаловак табліцы

Загаловак табліцы можна паказаць пры дапамозе тэга . У гэтага тэга можна ў CSS прапісаць шмат уласцівасцяў для больш тонкай налады. У CSS афармленне табліц добра тым, што можна манеўраваць элементамі так, як вы хочаце.

Гэты загаловак адлюстроўваецца гэтак жа, як стандартна у кнігах (напрыклад "Табліца 1").

Пазначыць можна і размяшчэнне гэтага загалоўка уласцівасцю caption-side (top або bottom). Выраўноўванне злева ці справа задаецца уласцівасцю text-align.

фон табліцы

Фонам табліцы можа быць які-небудзь колер або малюнак. Колер задаецца уласцівасцю background-color. Назвы уласцівасцяў цалкам адпавядаюць ўжываеце ў гаворкі. Гэта палягчае запамінанне ў шмат разоў.

Колер можна паказваць як назвай, так і рознымі кадыроўкамі. Акрамя гэтага, можна паказаць наступнае:

• Transparent - празрыстасць элемента.
• Inherit - колер такі ж, як і ў бацькоў.
• Initial - значэнне па змаўчанні.

Варыянт з празрыстасцю выкарыстоўваць можна ў тых выпадках, калі ўсе табліцы ў тэксце ў CSS файле афармляюцца адным колерам, але ў дадзеным выпадку такой неабходнасці няма.

Акрамя гэтага, фонам можа быць малюнак. Для гэтага ў стылі прапісваецца ўласцівасць background-image. Шлях паказваецца вось так:

url ( 'URL')

Шлях да файла можа быць як адносным, так і абсалютным.

Больш складаную заліванне можна рабіць градыентам:

• linear-gradient ();
• radial-gradient ();
• repeating-linear-gradient () і repeating-radial-gradient () - паўтор градыенту.

фон вочак

Акрамя фону ў цэлым, можна задаць чаргуецца фон у слупках або радках. Для афармлення гэта ўласцівасць выкарыстоўваецца вельмі часта, паколькі візуальнае падзел радкоў палягчае чытанне інфармацыі.

Акрамя чаргавання, можна паказваць і нумар канкрэтнага слупка ці радкі. Напрыклад вось так:

• tr: nth-child (even) {...} - указанне чаргавання радкоў;
• tr: nth-child (1) {...} - указанне ўласцівасці канкрэтнай радка;
• td: nth-child (even) {...} - указанне чаргавання слупкоў;
• td: nth-child (1) {...} - указанне ўласцівасці канкрэтнага слупка.

Акрамя чаргавання і нумароў, можна паказваць - першы (td: first-child) або апошні (td: last-child).

Прамежак паміж вочкамі

У CSS афармленне табліц дазваляе прыбраць прамежкі паміж вочкамі. Па змаўчанні яны ёсць. Напрыклад, калі задаць рамку ў табліцы без налад адлегласці паміж межамі, то будзе вось такі вынік.

Пагадзіцеся, выглядае не вельмі прыгожа і ня зручна для чытання. У карыстачоў будзе ў вачах мітусіцца з-за гэтага. Прыбраць гэтыя прамежкі можна, прапісаўшы ў стылі табліцы вось такую радок:

border-collapse: collapse

Але бывае і так, што адлегласць, наадварот, трэба павялічыць. Прычым памер прамежкаў можна паказаць як паміж слупкамі, так і паміж радкамі. Для гэтага паказваем наступнае значэнне (замест collapse):

border-collapse: separate

Але такім дзеяннем будзе паказана, што трэба падзяляць вочка. Як менавіта іх падзяляць, паказваецца дадатковым уласцівасцю:

border-spacing: 20px.

Калі трэба паказаць розная адлегласць паміж радкамі і калонамі, то паказваецца два значэння:

border-spacing: 10px20px.

Розніца ў браўзэрах

Майце на ўвазе, што ў CSS афармленне табліц можа выглядаць па-рознаму, у залежнасці ад браўзэра. Асабліва дрэнна ідзе справу са старымі версіямі, якія навіны ў CSS не падтрымліваюць.

Вышэй прыведзены прыклад таўшчыні рамкі для лічбавых значэнняў.

Далей прывядзём прыклад таўшчыні рамкі для канстант.

Стылі рамак таксама моцна адрозніваюцца.

Таму пры распрацоўцы заўсёды глядзіце вынік у розных браўзэрах.

У CSS афармленне табліц рэкамендуецца рабіць з праверкай тыпу браўзэра. Асабліва вялікая праблема раней была з карыстальнікамі са старымі версіямі Internet Explorer.

Зусім прасунутыя распрацоўшчыкі могуць у залежнасці ад браўзэра падключаць зусім розныя CSS файлы. А хто-то робіць праверкі ў кожным або якім-небудзь пэўным стылі (класе).

Больш за ўсё праблем узнікае з ценямі.

CSS: афармленне табліц, прыклады

Афармленне можа быць самым разнастайным. Усё залежыць ад сайта ў цэлым і яго дызайну. Усё павінна спалучацца і не мільгаюць кветкамі. Таксама вялікую ролю ўносіць і густ распрацоўніка. Пачуццё прыгожага ва ўсіх рознае.

Прывядзём прыклады розных табліц. На малюнку вышэй паказана выкарыстанне нахілу і гульня з колерам фону і межаў.

Шмат каму будзе цікавы прыклад прыгожага акуратнага афармлення, якое не будзе рэзаць вочы карыстальнікам. Такі варыянт дарэчны практычна ў любой сітуацыі.

Краю можна рабіць скругленымі. Глядзіцца даволі прыгожа.

заключэнне

Як бачыце, для афармлення знешняга выгляду табліц у CSS існуе вялікая колькасць прылад. У кожнага параметру таксама вялікая колькасць варыянтаў значэнняў. Калі карыстацца ўсім гэтым адразу, можна ствараць шэдэўры. Асабліва калі рабіць адаптыўны дызайн пад усе браўзэры.

Галоўнае пры афармленні - не перабраць з эфектамі. Усё трэба рабіць у меру. На першым часе вярстальшчыкі любяць эксперыментаваць і выкарыстоўваюць адразу ўсе свае веды. У выніку табліцы аказваюцца перанасычаным ўласцівасцямі. Старайцеся пазбягаць гэтых памылак.

Больш за тое, частка зьвестак можа перашкаджаць адзін аднаму. Напрыклад, няма чаго паказваць колер фону табліцы, калі пры гэтым яшчэ там усталяваны фонавы малюнак, які будзе перакрываць ўказаны колер.