Компьютер

CSS дөңгелек пішінді кестелер.

Кестелер тілдің ажырамас элементі болып табылады гипермәтінді белгілеуӘртүрлі деректерді құрылымдау және ыңғайлы көрсету үшін әлі де өзекті болып табылатын HTML.

Ұзақ уақыт бұрын, веб-сайттар негізінен кестелік түрде жасалған кезде, кестелер жоғары сұранысқа ие болды және жаңа ресурстың бүкіл шеңберін дерлік құрады. Осыдан кейін элементтің маңыздылығы блоктарға (div) қатысты танымалдылығы төмендеді, оның көмегімен орналасу мүмкіндіктері жұмыс үстелі үшін де, жұмыс үстелі үшін де жетілдірілді. мобильді нұсқасысайттар.

Қазіргі уақытта кестелер, мысалы, прайс-парақшалар, тізімдер, сипаттамалар, сауалнамалар және т.б. үшін пайдаланылады және каскадты стиль кестелерін (CSS) пайдалану арқылы біз құжаттағы кестелердің көрнекі көрсетілімін жақсарта аламыз. Мұнда мен бастапқы коды бар HTML кестелерін жобалаудың бірнеше мысалдарын ұсынамын, оларды кейінірек жобаңызды әзірлеу кезінде қолдануға болады.

CSS көмегімен кестелерді сәндеу

Кестені сәндеу – бұл белгілі бір тегтер үшін көрсетілген CSS сипаттары бар HTML тіліндегі дайын, құрастырылған кесте. Нәтижені қалай және қайда қою керектігін білесіз деп үміттенемін көзінәтижені экранда көрсету үшін.

Бастапқыда кестенің жалпы HTML кодын беремін, оны кейінірек стильдейтін боламыз.

Аты	Сипаттама	Бағасы
Аты	Техникалық сипаттамалар	Бағасы
Аты №2	Техникалық сипаттамалар	Бағасы
Аты №3	Техникалық сипаттамалар	Бағасы

CSS үлгілері

Үлгілер түпнұсқа болып есептелмейді, бірақ көптеген адамдар үшін пайдалы болуы мүмкін.

Кесте (ені: 100%; жиек-жиыру: тасалау;) кесте td (толтырғыш: 12px 16px;) кесте беті tr (шрифт-салмағы: қалың; жиек-жоғарғы: 1px тұтас #e8e9eb;) кесте tr (жиек-төменгі: 1px қатты #e8e9eb;) кесте tbody tr: меңзерді апару (фон: #e8f6ff;)

Айтпақшы, егер біз тегті пайдаланбаған болсақ , содан кейін жалған сыныпты пайдаланып бірінші жолға өз мәнерлеріңізді орнатуға болады: nth-child(1) .

Кесте (ені: 100%; жиек-жиыру: жию;) кесте тақырыбы tr (түс: #ffffff; шрифт салмағы: қалың; фон: #00bf80;) кесте тақырыбы tr td (шекара: 1px тұтас #01ab73;) кесте tbody tr td (шекара: 1px қатты #e8e9eb;) кесте tbody tr:nth-child(2n) (фон: #f4f4f4;) кесте tbody tr:hover (фон: #ebffe8;)

Кесте (ені: 100%; жиек-жиыру: бөлек; жиек аралығы: 4px;) кесте тақырыбы tr (түс: #ffffff; шрифт-салмағы: қалың;) кесте тақырыбы tr td (шекара-радиусы: 4px 4px 0 0; фон: #2e82c3;) tbody tr td кестесі (шекара: 1px тұтас #2e82c3; жиек радиусы: 4px; фондық: #cbdfef;) tbody tr td: меңзерді жылжыту (фон: #a2c3dd; өту ұзақтығы: 0,2 с;)

Аты	Сипаттама	Бағасы
Samsung	Galaxy S8, S8 Plus	2400 ₽
Xiaomi	Redmi 4A, 4X	520 ₽
Meizu	M3S, M5S	720 ₽

Кесте (ені: 100%; мәтінді туралау: ортаңғы; жиек-төменгі: 2px тұтас #dfdfdf; жиек-радиусы: 6px; жиекті жию: бөлек; шекара аралығы: 0px;) кесте тақырыбы tr (түс: #ffffff; шрифт-салмағы: қалың; фондық: #c83240;) кесте tr td (оң жақтағы жиек: 1 пиксель тұтас #dfdfdf;) кесте tr td: соңғы еншілес (оң жақтағы жиек: 0px;) кесте tbody tr:nth-child(1n) ) (фон: #f6f6f6;) кесте tbody tr:nth-child(2n) (фон: #e6e6e6;) table tbody tr:hover (фон: #ffe8e8; өту ұзақтығы: 0,6s;)

CSS сипаттары

Үлгілерде қолданылатын CSS сипаттары нені білдіреді:

ені- үстелдің ені;
шекараның бұзылуы- кесте айналасындағы ұяшықтардың шекарасын бейнелеу тәсілі;
шекара аралығы- кестедегі ұяшықтардың шекаралары арасындағы қашықтық;
шекара-радиусы- жақтаудың бұрыштарын дөңгелектеу;
төсеу- элементтің шекараның шетінен ішкі қашықтығы;
түсі- элемент түсі;
мәтінді туралау- мәтінді көлденеңінен туралау;
шрифт салмағы- қаріптің қанықтығы;
фон- фондық параметрлер;
өту ұзақтығы- анимация ұзақтығы;
шекара- элементтің айналасындағы жиектің қалыңдығы, стилі және түсі.

Бәріңе сәлем! Сонымен, енді сіз қажетінше көптеген жолдар мен бағандардан тұратын қарапайым кестелерді қалай құру керектігін білесіз. Жаман емес, жаман емес. Енді осы кестелердің дизайнына тоқталайық.

Өткен сабақта кестелер жиексіз көрсетілді. Көрдіңіз бе, ол сондай көрінеді, сіз оны белгі деп те атай алмайсыз. HTML тілінде кесте жиектерін жасау үшін тегке қосыңыз

атрибут шекара, оған нөлден басқа мән береді.

Ендеше кестенің жиектерін жасайық. Мысалы, бізде бұрыннан бар:

Жоғарғы сол жақ ұяшық	Жоғарғы оң жақ ұяшық
Төменгі сол жақ ұяшық	Төменгі оң жақ ұяшық

Браузердегі нәтиже:

Кесте жиектерін қалай жоюға болады

Өз кезегінде, HTML кестесінің шекараларын жою үшін немесе оларды көрінбейтін етіп айта аласыз, сізге атрибут қажет. шекарамәнді орнату 0 . Осы қарапайым әрекеттерден кейін жақтау жойылады.

Атрибут шекараларды жасауға мүмкіндік береді, бірақ оларды басқаруға болмайды. Бұл тек олардың қалыңдығын өзгертуге мүмкіндік береді.

Сондықтан, қазір біз сөйлесетін боламыз css, оның қасиеттері онымен мүмкін етеді шекаражалпы кестенің айналасында әр ұяшық ішінде де, сыртында да әртүрлі шекараларды жасаңыз.

Кестенің сыртқы және ішкі шекараларын жасау үшін CSS-ті қалай пайдалану керектігін қарастырайық.
Ол үшін кестеден шекаралық атрибутты алып тастап, стильдерді қосыңыз:

Кесте мысалы

Жоғарғы сол жақ ұяшық	Жоғарғы оң жақ ұяшық
Төменгі сол жақ ұяшық	Төменгі оң жақ ұяшық

Браузердегі нәтиже:

Енді әрбір ұяшық үшін де жиектерді қосамыз. Мұны істеу үшін жай ғана стильдерді қосыңыз:

Браузердегі нәтиже:

HTML кестесіндегі ұяшықтар арасындағы толтыруды қалай жоюға болады

CSS орнатылған шекараның басқаша екеніне келісіңіз сыртқы түріқалағаныңызша. Эстетика тұрғысынан алғанда, жұмыс істейтін нәрсе бар екені сөзсіз. Браузер бетінде сіз әдепкі бойынша кестелер мен ұяшықтардың шекараларын бөлек көрсететінін көре аласыз. Мысал мұны анық көрсетеді.

Дегенмен, қос жиектер деп аталатын осындай шекараларды border-collapse CSS сипатын пайдалану арқылы толығымен жоюға болады. Іс жүзінде ол келесідей көрінеді:

Кесте (жиек: тұтас 1px көк; жиек-жиыру: жиырылу; ) ...

Нәтижесінде ұяшықтар арасындағы қашықтық жойылады:

Жиек атрибутына тағайындалған жию мәні қос жиектерді жоюға мүмкіндік береді. Көріп отырғаныңыздай, нәтиже іргелес ұяшық шекараларының, сондай-ақ ұяшық шекараларының және кестенің сыртқы шекарасының «құлауы» болып табылады. Соңғысына келетін болсақ, оны толығымен алып тастауға болады. Ал егер оны көрсету қажет болса, оның енін ұлғайту қажет. Осылайша кестедегі бөлгіштерден құтылдық. Ал келесі сабақта тік және көлденең жиектерді қалай орнатуға болатыны туралы айтатын боламыз. Бәріңе сәттілік!

Бұл мақалада сіз қалай пайдалану керектігін көресіз css стильдерікестелерді пішімдеу.

Интернеттің алғашқы күндерінде дизайнерлер белгілерді жасау үшін кестелерді пайдалану өте кең таралған. Қазір барлық дерлік сайттар белгіленген CSS анықтамасы, ал кестелер өздерінің тағайындалуы үшін – деректерді көрсету үшін пайдаланылады.

Кесте макетінің тегтері

Кестені келесі тегтер арқылы жасауға болады:

, сондықтан ұяшықты мазмұнсыз қалдыру, бірақ өң түсін көрсету қажет болған жағдайда, ұяшық ішінде бөлінбеген бос орын () қосылды. Бос орын әрқашан орынды бола бермейді, әсіресе ұяшық биіктігін 1-2 пиксельге орнату қажет болғанда, сондықтан бір пиксельді мөлдір сызба кеңінен тарады. Шынында да, мұндай суретті сіздің қалауыңыз бойынша масштабтауға болады, бірақ ол веб-бетте көрсетілмейді.

Бақытымызға орай, бір пиксельді сызбалар және оларға негізделген аралықтардың барлық түрлерінің дәуірі өтті. Браузерлер ұяшықтардың мазмұнынсыз кестелермен өте дұрыс жұмыс істейді.

Бос ұяшықтардың көрінісін басқару үшін empty-cells қасиеті пайдаланылады, жасыру үшін орнатылған кезде бос ұяшықтардағы жиек пен фон көрсетілмейді. Егер қатардағы барлық ұяшықтар бос болса, онда бүкіл жол жасырылады. Ұяшық келесі жағдайларда бос болып саналады:

символдар мүлде жоқ;
ұяшықта тек жаңа жол, қойынды таңбасы немесе бос орын бар;
көріну мәні жасырын күйге орнатылады.

Үзілмейтін кеңістікті қосу көрінетін мазмұн ретінде қарастырылады, яғни. ұяшық енді бос болмайды (2.10-мысал).

2.10-мысал. Бос ұяшықтар

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Бос ұяшықтарды пайдалану

Кестені келесі тегтер арқылы жасауға болады:

Кестенің тақырыбын (тақырыбы сияқты) көрсетеді.

Кестедегі бір бағанды анықтайды.

Кестедегі бағандар тобын анықтайды.


Кестені құрады.
Кестедегі бір немесе бірнеше жолды анықтайды.
		Кестеде бір ұяшық жасайды.

Кестенің төменгі жағында пайда болатын жолдарды анықтайды.
		Әрбір кесте бағаны үшін тақырыпты анықтайды.

Кестенің жоғарғы жағында ұсынылған бір немесе бірнеше жолдарды сақтауға арналған.

Кестеде жол жасайды.

Көріп отырғаныңыздай, кестелерде қолдануға болады көп санытегтер, соғұрлым көп CSS мәнерлері біз жеке жағдайда пайдалана аламыз.

Кестелерді пішімдеу үшін пайдаланылатын CSS сипаттары төменде талқыланады.

Шекаралар

Ұяшықтар кесте тегінде сипатталған шекараларды иеленбейді. Шекаралар кесте ұяшықтары border қасиетін пайдаланып сипаттауға болады, бірақ бұл жағдайда бос орын жасалады.

Th, td (шекара: 2px тұтас қара;)

Бұл аралықты CSS шекара аралығы сипаты арқылы жоюға болады (IE кесте тегіндегі ұяшықтар кеңістігі төлсипатын қажет етеді). Дегенмен, алшақтықты алып тастасаңыз, шекаралар екі есе артады.

Кесте (шекара аралығы:0;)

Екі еселенген жиектер мен бос орындардан құтылу үшін жиырылу мәні бар border-collapse сипатын пайдаланыңыз.

Кесте (шекара-құла:тасалау;)

Шегініс

Шегініс (іш HTML атрибуты cellpadding) толтыру сипаты арқылы анықталады. Тек ұяшықтарға қолдануға болады (

) немесе тақырыптар астындағы ұяшықтарға (

) .

Th, td (толтыру: 10px 12px 13px 14px;)

туралау

мәтінді туралау қасиеті

Мәтінді туралау (HTML бойынша туралау төлсипатында) және тік туралау сипаттары кесте ұяшығындағы мазмұнды туралайды. Мәтінді туралау сипаты (мәндер: сол , оң , орталық , негіздеу ) мазмұнды көлденеңінен туралайды. Тегтің қолдану аясы:

, .

Th, td, кесте (мәтінді туралау: ортасына;)

тік туралау қасиеті

Тігінен туралау сипаты (мәндер: жоғарғы , негізгі сызық , төменгі , орта) мазмұнды тігінен туралайды. Қолдану аясы: th , td .

Th, td (тік туралау: төменгі;)

Бағандарды пішімдеу

Ені және фондық топ сипаттарын col және colgroup тегтеріне қолдануға болады. Бұл бағанды бөлектегіңіз келсе немесе оған белгілі бір ен бергіңіз келсе пайдалы.

Класс және идентификаторлар

Белгілі бір ұяшықты немесе кестені пішімдеу үшін сыныптар, идентификаторлар және т.б. туралы ұмытпаңыз.

Кестелердің өзі «нашар» болып көрінеді, сонымен қатар, браузерлер кестелердің кейбір сипаттамаларын, атап айтқанда, кадрларды өзінше көрсетеді. Дегенмен, бұл кемшіліктерді стильдердің күші арқылы түзету оңай. Сонымен қатар кестелерді жобалауға арналған құралдар айтарлықтай кеңейтілді, бұл кестелерді сайт дизайнына сәтті орналастыруға және кестелік деректерді неғұрлым анық көрсетуге мүмкіндік береді.

Ұяшық фонының түсі

Барлық кесте ұяшықтарының фондық түсі бір уақытта TABLE селекторына қолданылатын фон қасиеті арқылы орнатылады. Бұл ретте стильдерді пайдалану ережелерін, атап айтқанда, элемент қасиеттерінің мұрасын есте сақтау керек. Фондық сипат мұраланбағанымен, ұяшықтар үшін әдепкі фондық мән мөлдір, яғни. мөлдірлік, сондықтан фон толтыру әсері ұяшықтар үшін де алынады. Егер сіз TD немесе TH селекторының түсін TABLE сияқты бір уақытта көрсетсеңіз, онда бұл түс ұяшықтың фоны ретінде орнатылады (2.3-мысал).

2.3-мысал. Фон түсі

кестелер

Тақырып 1	Тақырып 2
3-ұяшық	4-ұяшық

В бұл мысалұяшықтардың көк фондық түсін алыңыз (тег

) және тақырыптағы қызыл (тег

). Себебі TH селекторының мәнері анықталмаған, сондықтан ата-ананың фоны, бұл жағдайда TABLE селекторы "арқылы көрсетіледі". Ал TD селекторының түсі анық көрсетілген, сондықтан ұяшықтар көк түспен «толтырылады».

Бұл мысалдың нәтижесі суретте көрсетілген. 2.4.

Күріш. 2.4. Фон түсін өзгерту

Ұяшықтар ішіндегі шеттер

Жиек - ұяшық мазмұнының шеті мен оның шекарасы арасындағы қашықтық. Әдетте бұл мақсат үшін тегтің ұяшықты толтыру атрибуты пайдаланылады.

. Ол ұяшықтың барлық жағындағы пикселдердегі жиек мәнін анықтайды. Толтыру стилінің қасиетін 2.4-мысалда көрсетілгендей TD селекторына қосу арқылы пайдалануға болады.

2.4-мысал. Кестелердегі өрістер

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

кестелер

Тақырып 1	Тақырып 2
3-ұяшық	4-ұяшық

Бұл мысалда селекторларды топтастыру арқылы өрістер TD және TH селекторы үшін бір уақытта орнатылады. Мысалдың нәтижесі суретте көрсетілген. 2.5.

Күріш. 2.5. Ұяшықтардағы өрістер

Егер толтыру стилі сипаты кесте ұяшықтарына қолданылса, онда тегтің ұяшық толтыру атрибутының әсері

еленбейді.

Ұяшықтар арасындағы қашықтық

Ұяшықтар арасындағы қашықтықты өзгерту үшін тегтің ұяшықтар аралығы атрибутын пайдаланыңыз

. Бұл атрибуттың әсері ұяшықтардың айналасындағы жиектерді пайдаланғанда немесе беттің фонында ерекшеленетін түспен ұяшықтарды толтырғанда анық көрінеді. Ұяшықтар аралығы ұяшық шекаралары арасындағы қашықтықты орнататын жиек аралығы стилі сипатымен ауыстырылады. Бір мән ұяшық жиектері арасындағы тік және көлденең қашықтықты орнатады. Егер бұл сипаттың екі мәні болса, онда біріншісі көлденең қашықтықты анықтайды (яғни, ұяшықтың сол және оң жағына), екіншісі тік (жоғарғы және төменгі) анықтайды.

Жиек аралығы сипаты тек TABLE селекторында жиектеу жиегін жию орнатылмаған болса ғана әсер етеді (2-5 мысал).

2.5-мысал. Ұяшық шекаралары арасындағы қашықтық

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

Ұяшықтар аралығын ауыстыру

Леонардо	5	8
Рафаэль	4	11
Микеланджело	24	9
Донателло	2	13

Бұл мысалдың нәтижесі суретте көрсетілген. 2.6.

Күріш. 2.6. Жиек аралығын пайдалану кезінде кестенің көрінісі

Интернет браузері Explorer 7-нұсқаға дейінгі және оны қоса алғанда, шекара аралығы сипатына қолдау көрсетпейді, сондықтан бұл браузер кестелер үшін әдепкі ұяшықтар аралығы мәнін пайдаланады (әдетте 2px).

TABLE селекторына жиырылу мәні бар жиекті жию сипатын қосқанда, ұяшықтар кеңістігі төлсипаты еленбейді және шекара аралығының мәні нөлге орнатылады.

Жиектер мен жақтаулар

Әдепкі бойынша кестеде бастапқыда шекара жоқ және ол тегтің шекаралық атрибуты арқылы қосылады

. Браузерлер мұндай жиекті басқаша көрсетеді, сондықтан бұл атрибутты мүлдем көрсетпей, стильдерге жиек сызбасын тағайындаған дұрыс. Стильдерге тікелей қатысты екі әдісті қарастырайық.

Ұяшықтар кеңістігі төлсипатын пайдалану

Белгілі болғандай, тегтің жасуша кеңістігі атрибуты

кесте ұяшықтары арасындағы қашықтықты орнатады. Кесте мен ұяшықтар үшін басқа өң түсін пайдалансаңыз, ұяшықтар арасында түсі кестенің түсіне сәйкес келетін сызықтар торы пайда болады, ал қалыңдығы пикселдердегі ұяшықтар аралығы атрибутының мәніне тең. Жоғарыдағы 2.3-мысал бұл әсерді көрсетеді, сондықтан мен оны қайталамаймын.

Бұл шекараларды жасаудың өте ыңғайлы әдісі емес екенін ескеріңіз, өйткені оның ауқымы шектеулі. Осылайша сіз дұрыс жерлерде тік немесе көлденең сызықтарды емес, тек бір түсті торды ала аласыз.

Шекара қасиетін қолдану

Жиек стилі сипаты бір уақытта жиектің түсін, оның мәнерін және элементтің айналасындағы енін орнатады. Әртүрлі жақтарда бөлек сызықтар жасағыңыз келсе, туынды сөздерді қолданған дұрыс - border-left , border-right , border-top және border-bottom , бұл қасиеттер сәйкесінше сол жақ, оң жақ, жоғарғы және төменгі шекараны анықтайды.

TABLE селекторына шекара қасиетін қолдану арқылы кестенің айналасына тұтастай жиек қосамыз, ал TD немесе TH селекторына ұяшықтардың айналасына жиек қосамыз (2-6 мысал).

2.6-мысал. Қос жиекті қосу

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

кестелер

Тақырып 1	Тақырып 2
3-ұяшық	4-ұяшық

Бұл мысал кестенің айналасында қара қос жиекті және тұтас жиекті пайдаланады ақ түсәрбір жасушаның айналасында. Мысалдың нәтижесі суретте көрсетілген. 2.7.

Күріш. 2.7. Кесте мен ұяшықтардың айналасындағы шекара

Назар аударыңыз, жасушалардың түйіскен жерінде, қос сызықтар. Олар тегтің ұяшықтар аралығы атрибуты әрекетінің арқасында қайтадан алынады

. Бұл атрибут мысал кодының ешбір жерінде көрсетілмесе де, браузер оны әдепкі бойынша пайдаланады. Егер сіз орнатсаңыз

, содан кейін біз қос емес, жалғыз сызықтарды аламыз, бірақ қалыңдығы екі еселенген. Бұл мүмкіндікті өзгерту үшін, TABLE селекторына қосылған collapse мәнімен шекараны жию мәнері сипатын қолданыңыз (2-7 мысал).

2.7-мысал. Бір кадр құру

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

кестелер

Тақырып 1	Тақырып 2
3-ұяшық	4-ұяшық

Бұл мысал ұяшықтар арасында тұтас жасыл сызық пен кестенің айналасындағы қара сызықты жасайды. Кестедегі барлық жиектер бірдей қалыңдыққа ие. Мысалдың нәтижесі суретте көрсетілген. 2.8.

Күріш. 2.8. Үстелдің айналасындағы шекара

Ұяшықтың мазмұнын теңестіру

Әдепкі бойынша кесте ұяшығындағы мәтін солға тураланады. Бұл ережеден ерекшелік тег болып табылады

, ол ортаға тураланған тақырыпты анықтайды. Туралау әдісін өзгерту үшін мәтінді туралау стилі қасиеті қолданылады (2.8-мысал).

2.8-мысал. Ұяшық мазмұнын көлденеңінен туралаңыз

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

кестелер

Тақырып 1	1 ұяшық	2-ұяшық
Тақырып 2	3-ұяшық	4-ұяшық

Бұл мысалда тегтің мазмұны

солға тураланған және тегтің мазмұны

- орталықта. Мысалдың нәтижесі төменде көрсетілген (2.9-сурет).

Күріш. 2.9. Ұяшықтардағы мәтінді туралау

Басқаша көрсетілмесе, ұяшықтағы тік туралау әрқашан орталықта болады. Бұл әрқашан қолайлы емес, әсіресе ұяшық мазмұны биіктігі бойынша өзгеретін кестелер үшін. Бұл жағдайда туралау 2-9-мысалда көрсетілгендей вертикальді туралау сипатын пайдаланып ұяшықтың жоғарғы жиегіне орнатылады.

2.9-мысал. Ұяшық мазмұнын тігінен туралаңыз

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

кестелер

Тақырып 1	Тақырып 2
1 ұяшық	2-ұяшық

Бұл мысал тақырып биіктігін орнатады

40 пиксель сияқты және мәтінді туралау төменгі жағында. Мысалдың нәтижесі суретте көрсетілген. 2.10.

Күріш. 2.10. Ұяшықтардағы мәтінді туралау

Бос ұяшықтар

Браузерлер ішінде ештеңе жоқ ұяшықты басқаша көрсетеді. Бұл жағдайда «ештеңе» ұяшыққа сурет те, мәтін де қосылмағанын және бос орын ескерілмейтінін білдіреді. Әрине, жасушалардың сыртқы түрі олардың айналасында шекара орнатылған жағдайда ғана ерекшеленеді. Көрінбейтін шекараны пайдаланған кезде ұяшықтардың сыртқы түрі, оларда бірдеңе бар ма, жоқ па, бірдей болады.

Ескі браузерлер бос көрініс ұяшықтарының өң түсін көрсетпеді