Атрыманне найбольш з HTML-табліц, вывучаючы атрыбуты табліцы
атрыбуты табліц HTML даць вам нашмат больш кантролю над HTML-табліц. Ёсць шмат атрыбутаў, даступных для табліц, каб зрабіць іх больш цікавымі і змяніць знешні выгляд вашай старонкі.
HTML элемент табліцы атрыбутаў
У HTML5 элемент выкарыстоўвае глабальныя атрыбуты і яшчэ адзін атрыбут :. І змянілася толькі мець значэнне 1 або пусты (г.зн. мяжы = «»). Калі вы хочаце змяніць шырыню мяжы, вы павінны выкарыстоўваць мяжы шырынёй CSS ўласцівасць.
Глядзіце ніжэй, каб даведацца аб дапушчальных атрыбутаў табліцы HTML5.
Ёсць таксама некалькі атрыбутаў, якія з'яўляюцца часткай HTML 4.01 спецыфікацыі, якая састарэе ў HTML5:
- -Используйте ўласцівасць CSS абіўка на TD табліцы і элементы TH.
- -Используйте CSS ўласцівасць пагранічнага інтэрвалу на стале.
- -выкарыстоўваць стылі CSS мяжы колеру: чорны; і стыль мяжы на стале.
- -выкарыстоўваць CSS стылі межаў колеру: чорны; і стыль мяжы на адпаведных элементах табліцы.
- -Instead, вы павінны апісаць структуру табліцы ў тытрах або пакласці ўсю табліцу ў чарцяжы і апісання яго ў FIGCAPTION. Акрамя таго, можна спрасціць структуру табліцы, так што не патрабуецца ніякага тлумачэння.
- -Используйте ўласцівасць шырыні CSS.
І адзін атрыбут, які быў састарэлым у HTML 4.01, а таксама састарэлае ў HTML5.
Больш падрабязна пра табліцы атрыбутаў HTML 4.01.
- выраўноўваць -Выкарыстанне маржынальнасць ўласцівасць CSS замест гэтага.
Ёсць таксама некалькі атрыбутаў, якія не з'яўляюцца часткай любога HTML спецыфікацыі.
Выкарыстоўвайце гэтыя атрыбуты, калі вы ведаеце, што браўзэры вы падтрымліваеце можа апрацоўваць іх, і вы не клапоціцеся пра сапраўдную HTML.
- -Используйте CSS ўласцівасць колеру фону замест.
- BorderColor -Используйте CSS ўласцівасць BorderColor замест.
- bordercolorlight -Используйте CSS ўласцівасць пагранічнага-колер замест.
- bordercolordark -Используйте CSS уласцівасцяў межаў-колер замест гэтага.
- смещ_по_столбцам -Там няма альтэрнатывы гэтаму атрыбуту.
- вышыня -Используйте CSS вышыню уласнасці замест гэтага.
- -Используйте маржу ўласцівасці CSS замест гэтага.
- -Используйте маржу ўласцівасці CSS замест гэтага.
- -Используйте CSS ўласцівасць пробельные замест гэтага.
- -Используйте CSS ўласцівасць вертыкальнага выраўноўвання замест гэтага.
Больш падрабязна аб браўзэры канкрэтных атрыбутаў табліцы.
HTML5 элемент табліцы атрыбутаў
Як мы ўжо згадвалі вышэй, ёсць толькі адзін атрыбут, акрамя глабальных атрыбутаў, што дзейнічае на элемент табліцы HTML5: мяжа.
Атрыбут мяжы выкарыстоўваецца для вызначэння мяжы вакол усёй табліцы, і ўсе клеткі ў ёй. Быў нейкі пытанне аб тым, ці будзе ён быць уключаны ў спецыфікацыі HTML5, але яна засталася, таму што ён падаў інфармацыю пра структуру табліцы, за проста стыль наступстваў.
Каб дадаць атрыбут мяжы, вы ўсталюеце значэнне 1, калі ёсць мяжа і пустая (ці пакінуць ад атрыбуту), калі няма. Большасць браўзэраў таксама будуць падтрымліваць 0 пры адсутнасці мяжы, а таксама любога іншага цэлага ліку (2, 3, 30, 500, і г.д.), каб абвясціць шырыню мяжы ў пікселях, але гэта з'яўляецца састарэлым у HTML5. Замест гэтага, вы павінны выкарыстоўваць CSS ўласцівасць мяжы стыляў , каб вызначыць межы шырыню і іншыя стылі.
Каб стварыць табліцу з мяжой, напісаць:
<Табліца мяжа = "1">
Гэта табліца з мяжой
Ёсць HTML 4.01 атрыбуты, якія з'яўляюцца састарэлымі ў HTML5. Калі вы плануеце пісаць HTML 4.01 дакументаў, вы можаце даведацца пра іх, у адваротным выпадку, вы можаце ігнараваць іх. Большасць з гэтых атрыбутаў ёсць альтэрнатывы, апісаныя вышэй.
Апішам атрыбуты элемента, якія сапраўдныя на HTML5 (і HTML 4.01). Гэта апісвае атрыбуты табліцы, якія сапраўдныя на HTML 4.01, але з'яўляюцца састарэлымі ў HTML5. Калі вы да гэтага часу пішаце HTML 4.01 дакументаў, вы можаце выкарыстоўваць гэтыя атрыбуты, але большасць з іх маюць альтэрнатывы, якія зробяць вашыя старонкі больш будучыняй абсталявана прыладай, калі вы перайсці на HTML5.
Valid HTML 4.01 Атрыбуты
Атрыбут мы апісалі вышэй.
Адзінае адрозненне ў HTML 4.01 з HTML5 з'яўляецца тое , што вы можаце паказаць любы цэлы лік (0, 1, 2, 15, 20, 200 і г.д.) , каб вызначыць шырыню мяжы ў пікселях.
Каб пабудаваць табліцу з мяжой 5px, напісаць:
<Табліца мяжа = "5">
Гэтая табліца мае мяжу 5px.
См прыклад двух табліц з межамі.
Атрыбут вызначае аб'ём прасторы паміж клеткавымі межамі і змесцівам вочка. Па змаўчанні два пікселя. Усталюйце CELLPADDING у 0, калі вы не хочаце ніякага прасторы паміж змесцівам і межамі.
Для таго, каб усталяваць водступы вочка да 20, напісаць:
<Табліца CELLPADDING = "20">
Гэтая табліца мае CELLPADDING ад 20.
Сотавыя мяжы будуць падзеленыя на 20 пікселяў.
Праглядзець прыклад табліцы з CELLPADDING
Атрыбут вызначае аб'ём прасторы паміж вочкамі табліцы і змесцівам клетак. Як CELLPADDING, па змаўчанні ўсталёўваецца на два пікселя, так што вы павінны ўсталяваць яго ў 0, калі вы не хочаце, ня адлегласць паміж вочкамі.
Для таго, каб дадаць інтэрвал паміж вочкамі ў табліцы, напісаць:
<Табліца CELLSPACING = "20">
Гэтая табліца мае CELLSPACING ад 20.
Клеткі будуць падзеленыя на 20 пікселяў.
Глядзіце табліцу з CELLSPACING
Атрыбут вызначае, якія часткі мяжы, навакольнае вонкавую паверхню табліцы будуць бачныя. Вы можаце кампанаваць табліцу з усіх чатырох бакоў, любая адзін бок, верх і ніз, левы і правы, ці не.
Вось HTML для табліцы толькі з бакавой мяжы левай:
<Табліца мяжа = "1" кадр = "л.ш.">
Гэтая табліца
будзе
толькі
левы бок аформлена.
І яшчэ адзін прыклад з ніжняй рамай:
<Табліца мяжа = "1" кадр = "ніжэй">
Гэтая табліца мае рамку на дне.
Праверце некаторыя табліцы з кадрамі
Атрыбут падобны атрыбуту фрэйма, толькі яна ўплывае на мяжы вакол вочак табліцы. Вы можаце ўсталяваць правілы для ўсіх вочак, паміж калонамі, паміж групамі, як TBODY і TFOOT ці не.
Каб пабудаваць табліцу з лініямі толькі паміж радамі, піша:
<Табліца мяжа = "1" правілы = "радок">
Гэтая табліца 4x4 мае
радкі ня слупкі
Абвядзенне
атрыбутправілы.
І яшчэ з лініямі паміж слупкамі:
<Табліцы мяжа = "1" правілы = "перавалы">
Гэта
табліца
, дзе
Стоўбцы
з'яўляецца
Наадварот
Ніжэй прыведзены прыклад табліцы аа з правіламі
Атрыбут дае інфармацыю аб табліцы для чытання з экрана і іншых карыстацкіх агентаў, якія могуць паўстаць праблемы пры счытванні табліцы. Каб выкарыстаць атрыбут зводнага, вы падправіць кароткае апісанне табліцы і пакласці, што ў якасці значэння атрыбуту. Рэзюмэ не будзе адлюстроўвацца на вэб-старонцы ў большасці стандартных вэб-браўзэраў.
Вось як напісаць простую табліцу з рэзюмэ:
<Зводная табліца = «Гэта прыклад табліца , якая змяшчае інфармацыю напаўняльніка. Мэтай дадзенай табліцы з'яўляецца дэманстрацыя рэзюмэ.» >
слупок 1 радок 1
слупок 2 радкі 1
слупок 1 радок 2
слупок 2 радок 2
Паглядзець табліцу з кароткім
Атрыбут вызначае шырыню табліцы ў пікселях або ў працэнтах ад кантэйнера элемента. Калі шырыня не ўстаноўлена, то табліца будзе займаць толькі столькі месца, колькі яму неабходна для адлюстравання змесціва, з максімальнай шырынёй такімі ж, як шырыня бацькоўскага элемента.
Каб пабудаваць табліцу з пэўнай шырынёй у пікселях, напісаць:
<Шырыня табліцы = "300">
Гэтая табліца складае 80% ад шырыні кантэйнера ён знаходзіцца ў.
І пабудаваць табліцу з шырынёй, якая ўяўляе сабой адсотак ад бацькоўскага элемента, напісаць:
<Шырыня табліцы = "80%">
Гэтая табліца складае 80% ад шырыні кантэйнера ён знаходзіцца ў.
См прыклад табліцы з шырынёй
Састарэлыя HTML 4,01 Табліца атрыбутаў
Існуе адзін атрыбут элемента табліцы , які з'яўляецца састарэлым у HTML 4.01 і састарэлае ў HTML5: выраўноўванне . Гэты атрыбут дазваляе ўсталяваць, дзе стол павінен быць размешчаны на старонцы адносна тэксту, які побач з ім. Гэты атрыбут з'яўляецца састарэлым у HTML 4.01, і вы павінны пазбягаць яго выкарыстання. Замест гэтага варта выкарыстоўваць ўласцівасць CSS ці Левае поле: аўто; і запас-направа: аўто; стылі. Ўласцівасць паплаўка дае вынік, які бліжэй да таго, што пры ўмове, выраўноўваць атрыбут, але гэта можа паўплываць на тое, як астатнюю частку дысплея змесціва старонкі. Маржа направа: аўто; і маржа налева: аўто; з'яўляецца тое, што W3C рэкамендуе ў якасці альтэрнатывы.
Вось састарэлы прыклад, выкарыстоўваючы атрыбут выраўноўвання:
<Табліца ALIGN = "направа">
Гэтая табліца выраўнаваная па правым краі
Тэкст абцякае яго налева
См састарэлага прыкладу, выкарыстоўваючы атрыбут выраўноўвання.
І, каб атрымаць той жа эфект з сапраўдным (не рэкамендуецца) HTML, напісаць:
<Табліцы стыль = "плаваць: права;" >
Гэтая табліца выраўнаваная па правым краі
Тэкст абцякае яго налева
Ніжэй прыводзіцца апісанне табліцы атрыбутаў, якія не з'яўляюцца часткай любога HTML спецыфікацыі.
Папярэдні інфармацыя апісвае атрыбуты HTML элемента, якія сапраўдныя на HTML 4.01, але з'яўляюцца састарэлымі ў HTML5.
Ніжэй апісаны атрыбуты табліцы, якія не з'яўляюцца сапраўднымі ў любой бягучай спецыфікацыі. Калі вы не клапоціцеся аб тым, праверыць вашыя старонкі і вашы карыстальнікі выкарыстоўваюць браўзэр, які падтрымлівае гэтыя элементы, то вы можаце выкарыстоўваць гэтыя элементы. Але большасць з іх альбо не падтрымліваецца ў сучасных браўзэрах або ёсць альтэрнатывы, якія з'яўляюцца больш стандартамі.
Мы не рэкамендуем выкарыстоўваць гэтыя атрыбуты ў вашай HTML - табліцах.
Атрыбут стары атрыбут, які быў уключаны да таго CSS атрымаў шырокую падтрымку. Гэта дазваляе змяніць колер фону табліцы. Вы можаце ўсталяваць назву колеру або шаснаццатковы код. Гэты атрыбут да гэтага часу працуе ў многіх браўзэрах, але і для будучыні, абсталяваная прыладай HTML, вы не павінны выкарыстоўваць яго, і выкарыстоўваць CSS замест гэтага.
Лепшай альтэрнатывай для гэтага атрыбуту з'яўляецца ўласцівасць стылю.
Каб змяніць колер фону табліцы, напісаць:
<Табліцы стыль = "колер фону: #ccc;" >
Гэтая табліца мае шэры фон
Падобна атрыбут BGColor, атрыбут BorderColor дазваляе змяніць колер атрыбуту. Гэты атрыбут падтрымліваецца толькі Internet Explorer. Замест гэтага варта выкарыстоўваць ўласцівасць мяжы колеру стылю.
Для таго, каб змяніць колер мяжы вашага стала, напісаць:
<Табліца мяжа = "1" стыль = "мяжы колеру: чырвоны;" >
Гэтая табліца мае чырвоную мяжу.
Атрыбуты bordercolorlight і bordercolordark былі ўключаныя ў Internet Explorer, каб дазволіць вам стварыць 3D рамку вакол вашага стала. Аднак, як у IE8 і вышэй, гэтая функцыя падтрымліваецца толькі ў рэжыме IE7 Standards і рэжыме сумяшчальнасці . Microsoft сцвярджае, што гэтыя ўласцівасці не больш не падтрымліваюцца.
На працягу кароткага прамежку часу, атрыбут перавалы на элеменце TABLE было прапанавана, каб дапамагчы браўзэры ведаць, колькі слупкоў табліцы было. Памяшканне было тое, што гэта дапаможа паскорыць рэндэрынг вялікіх табліц. Аднак ён быў рэалізаваны толькі Internet Explorer, а таксама з IE8 і вышэй, гэтая функцыя падтрымліваецца толькі ў рэжыме IE7 Standards і рэжыме сумяшчальнасці.
Таму што ёсць атрыбут шырыні (састарэлае ў HTML5) многія людзі лічылі, што існуе атрыбут вышыні для табліц, а таксама. Але паколькі табліца адпавядае шырыні іх утрымання або пэўнай шырыні ў CSS або шырыні атрыбуту, вышыня не можа быць абмежаваная. Такім чынам, замест таго, браўзэры дазволілі аднесці вышыню, каб вызначыць мінімальную вышыню стала. Калі табліца была вышэй за гэтую вышыні, ён будзе адлюстроўваць вышэй. Але вы павінны выкарыстоўваць ўласцівасць
З дапамогай ўласцівасці вышыні CSS вы можаце абмежаваць вышыню, калі выкарыстоўваецца ўласцівасць CSS, а таксама вызначыць, што адбываецца з любым залішняй зместам.
Для таго, каб усталяваць мінімальную вышыню на стале, напісаць:
<Табліцы стыль = "вышыня: 30em;" >
Гэтая табліца па меншай меры 30 Эмс высокая.
Два атрыбуту і дадаў прастору вакол левай / правай боку (HSPACE) і верх / ніз (VSPACE) табліцы. Вы павінны выкарыстоўваць замест ўласцівасці стылю.
Для таго, каб усталяваць вертыкальнае прастору на 20 пікселяў і гарызантальнае прастору да 40 пікселяў, напісаць:
<Табліцы стыль = "поле: 20px 40px;"
Гэтая табліца мае VSPACE 20 пікселяў і HSPACE 40 пікселяў.
Атрыбут ўяўляе сабой лагічны атрыбут, які вызначае, ці будзе змесціва табліцы варта абгарнуць на краі бацькоўскага элемента або вокны або прымусіць гарызантальную прагортку. Замест гэтага, вы павінны вызначыць абгортачную характарыстыку кожнага вочка табліцы з дапамогай ўласцівасці CSS.
Для таго, каб зрабіць слупок з вялікай колькасцю тэксту не абгортваюць, напісаць:
<Табліца>
<Тд стыль = "бела-прасторы: Nowrap;" > Гэта слупок з тонай кантэнту. Але нават калі яна шырэй, чым кантэйнер тэкст не павінен абгарнуць на наступны радок, але замест таго, каб прымусіць акно браўзэра для пракруткі па гарызанталі, каб убачыць усё змесціва.
І, нарэшце, атрыбут вызначае, як змесціва кожнага вочка павінны быць сумешчаныя па вертыкалі ў межах ячэйкі. Замест гэтага недапушчальнага атрыбуту, варта выкарыстоўваць ўласцівасць CSS на кожнай вочку, якую вы хочаце змяніць выраўноўванне. Вы не заўважыце, наступствы гэтага стылю, калі змесціва вочка не менш, чым свабоднае прастору, створанае іншымі, больш буйнымі вочкамі.
Для таго, каб прымусіць вочка, каб выраўнаваць на дно (а не па цэнтры, як па змаўчанні), напісаць:
<Табліца>
Гэтая клетка больш, чым астатнія, і такім чынам прымусіць вышыню быць вышэй. Такім чынам, вы ўбачыце, што вертыкальна ячэйкі выраўноўваецца па ніжняй часткі.
стыль = "вертыкальнае выраўноўвання: знізу;" > Утрыманне ў ніжняй часткі.
Утрыманне ў сярэдзіне.