КампутарыПраграмнае забеспячэнне

Выкарыстанне HTML у табліцы

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

Раней практычна ўсё вэб-майстры выкарыстоўвалі табліцы менавіта для вёрсткі сайтаў. Першапачаткова табліцы для гэтага не прыдумляліся. Таму для разметкі сайта трэба выкарыстоўваць блокавы элемент div.

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

Як зрабіць табліцу HTML?

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

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

Прыклад табліцы 2 на 2.

тэкст першай ячэйкі першага радка

тэкст другі ячэйкі першага радка

тэкст першай ячэйкі другога радка

тэкст другі ячэйкі другога радка

Тэгі

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

Галоўнае правіла: колькасць вочак у кожнай радку павінна быць аднолькавым. Гэта ж табліца.

Але, як і ў рэдактары Word і Excel, вочка можна аб'ядноўваць паміж сабой.

Як аб'ядноўваць ячэйкі ў табліцы?

Для аб'яднання выкарыстоўваюць атрыбуты Colspan і Rowspan. Span перакладаецца як "ахопліваць" ці "перакрываць". Даслоўны сэнс - ахапіць / перакрыць ячэйкі / радка.

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

У дадзеным прыкладзе ў першым радку аб'ядналі 3 вочка пры дапамозе атрыбуту colspan = "3". Затым першую вочка другога радка расцягнулі на чатыры радкі. Запомніце, што расцягваем / аб'яднаем толькі ў першай вочку. Яе ўласцівасць распаўсюдзяцца далей. Усё, што ідзе раней, закранута не будзе.

Калі ў вас ёсць 5 вочак і вы хочаце аб'яднаць з 2 па 4, то трэба менавіта ў вочкі пад нумарам 2 ўказаць атрыбут colspan = "3".

Звярніце ўвагу на вочка пад нумарам 9 на малюнку вышэй. Там аб'ядналі адразу і вочкі і радкі. Такія дзеянні не забараняюцца.

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

афармленне табліц

Возьмем звычайны, стандартны выпадак HTML. У табліцы два радкі па дзве вочкі ў кожнай.

Вынік кода будзе наступным.

Як бачыце, ніякіх эфектаў няма. Можна дадаць рамку, паказаць шырыню і вышыню.

Таксама можна пагуляць з выраўноўваннем. Можна выраўноўваць як па вышыні, так і па шырыні.

Align для выраўноўвання па гарызанталі, а valign - па вертыкалі. Вось такі вынік.

Атрыбуты align і valign можна ўжываць да ўсёй радку. Тады усе вочкі, якія знаходзяцца ў ёй, будуць падпарадкоўвацца гэтым атрыбутам.

Акрамя тэгаў

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

Як падключаць стылі да табліцы?

Як і любыя тэгі HTML, табліца можа ператварацца з дапамогай стыляў. Вам трэба паказаць файл стыляў у галіне head або гатовы стыль (называецца таксама ў head).

...