Урок па HTML. аб'яднанне вочак

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

Табліцы знайшлі сваё шырокае прымяненне з-за вялікай колькасці атрыбутаў. Напрыклад, вельмі карысным аказалася ўласцівасць аб'яднання радкоў або Стоўбцаў.

Ўвядзенне ў тэорыю

У HTML аб'яднанне вочак адбываецца пры дапамозе двух атрыбутаў: colspan і rowspan. Яны паказваюцца для тэга td.

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

На малюнку вышэй паказана два радкі, і ў кожнай па тры ячэйкі. Гэта з'яўляецца звычайнай табліцай. Калі вы ў якой-небудзь радку пакажыце меншая колькасць вочак, то табліца "з'едзе", усё будзе адлюстроўвацца некарэктна.

HTML-табліца: аб'яднанне вочак па вертыкалі і гарызанталі

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

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

Сутнасць заключаецца ў тым, што вы паказваеце вочку, колькі прасторы яна зойме. Па змаўчанні значэнне складае 1.

Аб'яднанне вочак па вертыкалі HTML-табліцы адбываецца па такім жа прынцыпе. Проста займанае прастору будзе лічыцца па вертыкалі. Глядзім малюнак ніжэй.

Тут вочка з лічбай 43 займае два радкі. Для гэтага паказалі атрыбут rowspan. Запамінаецца проста:

• Row - радок.
• Col - калонка / слупок.
• Span - аб'яднанне.

Стваральнікі мовы імкнуліся максімальна наблізіць яго да чалавечага, каб, нават не ведаючы яго, можна было хоць неяк разбірацца.

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

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

HTML: аб'яднанне вочак. прыклады

Разгледзім больш складаныя паэтапныя прыклады ў вялікіх табліцах. Ніжэй на малюнку злева паказаны зыходны варыянт звычайнай табліцы. А справа - варыянт з аб'яднаннем двух вочак у другім радку. Так навочней і прасцей параўноўваць HTML-код.

Гэтак жа можна аб'яднаць тры вочкі ў цэнтры. У першым выпадку атрыбут colspan паказвалі ў вочку №1. Тут першая будзе без змен, а ў другой дададзены colspan, роўны тром.

Калі ж вы хочаце аб'яднаць усе вочка ў радку да адзінай, то выдаляем чатыры td і ў першай паказваем colspan = '5'.

Як бачыце, на справе ўсё гэта проста. Складанага нічога няма. Галоўнае, уважліва, з першага разу, разабрацца ва ўсіх падводных камянях табліц, і потым ніякіх праблем узнікаць не павінна.

Табліцы як каркас сайта

У HTML аб'яднанне вочак не заўсёды выкарыстоўваецца для звычайных табліц з інфармацыяй (як у Word ці Excel). Распрацоўшчыкі сайтаў часта, а раней пагалоўна выкарыстоўвалі іх для вёрсткі сайтаў.

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

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

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

заключэнне

І памятайце, што ў HTML table аб'яднанне вочак можна рабіць як заўгодна. Усё залежыць ад таго, што вам трэба, і як вы хочаце гэта аформіць. Галоўнае, не заблытацца. Калі хочаце стварыць вялікую табліцу з вялікай колькасцю аб'яднанняў, то рэкамендуецца папярэдне намаляваць усё гэта на лісточку або ў Paint. Пачаткоўцам вярстальшчыкі так будзе прасцей.

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