Добијање највише од ХТМЛ таблица помоћу атрибута табеле
ХТМЛ таблични атрибути дају вам много више контроле над ХТМЛ таблицама. Постоји много атрибута које су доступне таблицама како би их учинили интересантнијим и променили изглед ваше странице.
ХТМЛ ТАБЛЕ Елементи атрибута
У ХТМЛ5 елемент користи глобалне атрибуте и још један атрибут:. И променио се само да има вредност од 1 или празна (тј. Граница = ""). Ако желите да промените ширину границе, користите ЦСС својство границе ширине.
Погледајте испод како бисте сазнали за валидне атрибуте таблице ХТМЛ5.
Постоји и неколико атрибута који су део ХТМЛ 4.01 спецификације која је застарјела у ХТМЛ5:
- -Упорабите ЦСС својство на табеларним ТД и ТХ елементима.
- -Упорабите гранични размак ЦСС-а на столу.
- -Услови ЦСС стилова бордер-цолор: блацк; и гранични стил на столу.
- -Услови ЦСС стилова бордер-цолор: блацк; и граничног стила на одговарајућим елементима табеле.
- -Настав, требали би описати структуру табеле у ЦАПТИОН или ставити целу таблицу у ФИГУРЕ и описати је на ФИГЦАПТИОН-у. Алтернативно, можете поједноставити структуру табеле тако да није потребно објашњење.
- -Користите својство ЦСС ширине.
И један атрибут који је застарио у ХТМЛ 4.01 и такође је застарио у ХТМЛ5.
Сазнајте више о атрибутима ХТМЛ 4.01 ТАБЛЕ.
- поравнајте - Користите ЦСС маргин својство умјесто.
Постоји и неколико атрибута који нису део било које ХТМЛ спецификације.
Користите ове атрибуте ако знате да претраживачи који подржавате могу да их изађу и да вам не брине о важећем ХТМЛ-у.
- Користите ЦСС својство позадине у боји.
- бордерцолор-Умјесто тога користите ЦСС својство граничне боје.
- бордерцолорлигхт-Уместо тога користите ЦСС својство граничне боје.
- бордерцолордарк-Уместо тога користите ЦСС својство граничне боје.
- цолс - Нема алтернативе за овај атрибут.
- висина - Користите ЦСС висину висине.
- - Уместо тога користите ЦСС својину.
- - Уместо тога користите ЦСС својину.
- Уместо тога користите ЦСС својство бијелог простора.
- -Упорабите ЦСС својство вертикално поравнати умјесто.
Сазнајте више о атрибутима специфичног претраживача претраживача.
ХТМЛ5 ТАБЕЛА елемента атрибута
Као што смо горе поменули, постоји само један атрибут, који је поред глобалних атрибута, који важи на ХТМЛ5 ТАБЛЕ елементу: граница.
Атрибут границе се користи за дефинисање границе око целог стола и свих ћелија унутар ње. Постојало је неко питање о томе да ли ће бити укључено у спецификацију ХТМЛ5, али је остало зато што је пружио информације о структури табеле, а не само због симулација стила.
Да бисте додали гранични атрибут, поставите вредност на 1 ако постоји граница и празна (или оставите атрибут) ако није. Већина претраживача ће такође подржавати 0 без границе, а било која друга вриједност цијеле вриједности (2, 3, 30, 500, итд.) Да декларира ширину границе у пикселима, али је то застарјело у ХТМЛ5. Уместо тога, требало би користити ЦСС својства стила границе да дефинишете ширину границе и друге стилове.
Да бисте креирали таблицу са границом, напишите:
<табле бордер = "1" >
<тр>
<тд> Ово је табела са границом
Постоје ХТМЛ 4.01 атрибути који су застарјели у ХТМЛ5. Ако планирате да пишете ХТМЛ 4.01 документе, можете их научити, у супротном, можете их игнорисати. Већина ових атрибута има алтернативе, горе описане.
Описујемо атрибуте елемента који важе у ХТМЛ5 (и ХТМЛ 4.01). Ово описује атрибуте ТАБЕЛА који важе у ХТМЛ 4.01, али су застарјели у ХТМЛ5. Ако и даље пишете ХТМЛ 4.01 документе, можете користити ове атрибуте, али већина њих има алтернативе које ће вашим странама бити сигурније у будућности када се преселите у ХТМЛ5.
Валид ХТМЛ 4.01 атрибута
Атрибут који смо описали изнад.
Једина разлика у ХТМЛ-у 4.01 из ХТМЛ5 је да можете одредити било који цијели цијели број (0, 1, 2, 15, 20, 200, итд.) Да бисте дефинирали ширину границе у пикселима.
Да бисте направили таблицу са граничном линијом 5пк, напишите:
<табле бордер = "5" >
<тр>
<тд> Ова табела има границу од 5пк.
Погледајте примјер двије табеле са границама.
Атрибут дефинише количину простора између граница ћелије и садржаја ћелије. Подразумевана вредност је два пиксела. Поставите целлпаддинг на 0 ако не желите простора између садржаја и граница.
Да бисте поставили падање ћелије на 20, напишите:
<табле целлпаддинг = "20" >
<тр>
<тд> Ова табела има целлпаддинг од 20.
<тр>
<тд> Границе ћелија ће бити раздвојене за 20 пиксела.
Погледајте пример табеле са ћелијском опцијом
Атрибут дефинише количину простора између ћелија таблице и садржаја ћелија. Као и целлпаддинг, подразумевано је постављено на два пиксла, тако да га морате подесити на 0 ако не желите размак између ћелија.
Да бисте додали размак ћелија у таблицу, напишите:
<табле целлспацинг = "20" >
<тр>
<тд> Ова табела има ћелијски размак од 20.
<тр>
<тд> Ћелије ће бити раздвојене са 20 пиксела.
Погледајте табелу са целлспацинг
Атрибут идентификује који делови границе који окружују спољашњост табеле ће бити видљиви. Можете поставити свој сто на све четири стране, било коју страну, горњи и доњи, лево и десно или ниједно.
Овде је ХТМЛ за сто са само левом бочном границом:
<табле бордер = "1" фраме = "лхс" >
<тр>
<тд> Ова табела
<тд> ће имати
<тр>
<тд> само
<тд> лева страна уоквирена.
Још један пример са доњим оквиром:
<табле бордер = "1" фраме = "испод" >
<тр>
<тд> Ова табела има оквир на дну.
Погледајте неке табеле са оквирима
Атрибут је сличан атрибуту оквира, само то утиче на границе око ћелија табеле. Можете одредити правила за све ћелије, између ступаца, између група као што су ТБОДИ и ТФООТ или ниједна.
Да бисте направили табелу са линијама само између редова, напишите:
<табле бордер = "1" правила = "редови" >
<тр>
<тд> Ова 4к4 таблица има
<тд> редови нису колоне
<тр>
<тд> приказано са
<тд> атрибут правила.
А други са линијама између ступаца:
<табле бордер = "1" рулес = "цолс" >
<тр>
<тд> Ово је
<тд> табела
<тд> где је
<тр>
<тд> колоне
<тд> су
<тд> означено
Ево примера табеле с правилима
Атрибут пружа информације о таблици за читаче екрана и друге корисничке агенте који могу имати проблема са очитавањем табела. Да бисте користили атрибут сажетка, уписујете кратак опис табеле и ставите је као вредност атрибута. Резиме неће бити приказан на веб страници већине стандардних веб прегледача.
Ево како написати једноставну таблицу са резимеом:
<табле суммари = "Ово је табела узорака која садржи информације о пуњењу. Сврха ове табеле је да демонстрира резиме." >
<тр>
<тд> колона 1 ред 1
<тд> колона 2 ред 1
<тр>
<тд> колона 1 ред 2
<тд> колона 2 ред 2
Погледајте табелу са резимеом
Атрибут дефинише ширину табеле у пикселима или као проценат елемента контејнера. Ако ширина није постављена, табела ће трајати само толико простора колико је потребно за приказ садржаја, а максимална ширина је исто као и ширина родитељског елемента.
Да бисте направили таблицу са одређеном ширином у пикселима, напишите:
<табле видтх = "300" >
<тр>
<тд> Ова табела је 80% ширине контејнера у коме се налази.
И да бисте направили таблицу ширине која је проценат родитељског елемента, напишите:
<табела видтх = "80%" >
<тр>
<тд> Ова табела је 80% ширине контејнера у коме се налази.
Погледајте пример табеле ширине
Застарели ХТМЛ 4.01 ТАБЕЛСКИ атрибут
Постоји један атрибут елемента ТАБЛЕ који је застарјел у ХТМЛ 4.01 и застарјел у ХТМЛ5: алигн . Овај атрибут вам омогућава да поставите где ће се табела налазити на страници у односу на текст који је поред ње. Овај атрибут је застарио у ХТМЛ 4.01, и не би требало да га користите. Уместо тога, требало би да користите својство ЦСС или маргин-лијево: ауто; и маргин-десно: ауто; стилова. Функција флоат даје резултат који је ближи ономе што је додељен атрибут поравнања, али то може утицати на начин приказивања остатка садржаја странице. Маржа-десно: ауто; и маргин-лево: ауто; оно што В3Ц препоручује као алтернативу.
Овде је застарели примјер кориштењем атрибута алигн:
<табле алигн = "ригхт" >
<тр>
<тд> Ова табела је исправно поравнана
<тр>
<тд> Текст текући око њега лево
Погледајте застарели примјер кориштењем атрибута поравнања.
Да бисте добили исти ефекат са важећим ХТМЛ-ом који није застарио, напишите:
<табле стиле = "флоат: ригхт;" >
<тр>
<тд> Ова табела је исправно поравнана
<тр>
<тд> Текст текући око њега лево
Следеће објашњавају атрибуте ТАБЛЕ-а који нису дио било које ХТМЛ спецификације.
Претходне информације описују атрибуте ХТМЛ елемента који важе у ХТМЛ 4.01 али су застарјели у ХТМЛ5.
Следеће описује атрибуте ТАБЕЛА који нису важећи у било којој тренутној спецификацији. Ако вам није брига о томе да ли ваше странице потврђују и ваши корисници користе прегледач који подржава ове елементе, онда можете користити ове елементе. Али већина њих није подржана у модерним претраживачима или има алтернативе које су у складу са стандардима.
Не препоручујемо коришћење ових атрибута на ХТМЛ таблицама.
Атрибут је стар атрибут који је укључен пре него што је ЦСС био широко подржан. Омогућава вам да промените боју позадине табеле. Можете подесити име боје или хексадецимални код. Овај атрибут и даље функционише у великом броју претраживача, али за ХТМЛ-заштићене верзије будућности, не бисте га требали користити, а уместо тога користите ЦСС.
Боља алтернатива овом атрибуту је својство стила.
Да бисте променили боју позадине таблице, напишите:
<табле стиле = "бацкгроунд-цолор: #ццц;" >
<тр>
<тд> Ова табела има сиву позадину
Слично као атрибут бгцолор, атрибут бордерцолор вам омогућава да промените боју атрибута. Овај атрибут подржава само Интернет Екплорер. Уместо тога, требало би да користите својство стила граничног стила.
Да бисте променили боју границе таблице, напишите:
<табле бордер = "1" стиле = "бордер-цолор: ред;" >
<тр>
<тд> Ова табела има црвену ивицу.
Атрибут бордерцолорлигхт и бордерцолордарк је укључен у Интернет Екплорер да бисте омогућили креирање 3Д границе око ваше табеле. Међутим, од ИЕ8 и горе, ово је подржано само у ИЕ7 стандардном режиму и Куиркс моду . Мицрософт наводи да ова својства више нису подржана.
За кратко време, предложени су атрибут цолса на елементу ТАБЕЛА који би помогао претраживачима да знају колико столова има стол. Претпоставка је била да ће то помоћи убрзавање приказивања великих столова. Међутим, то је имплементирано само од стране Интернет Екплорер-а, а од ИЕ8-а и горе, ово је подржано само у ИЕ7 стандардном режиму и Куиркс моду.
Пошто постоји атрибут ширине (застарео у ХТМЛ5), многи су претпоставили да постоји и висина атрибута за табеле. Али зато што табеле одговарају ширини њиховог садржаја или дефинисане ширине у атрибуту ЦСС или ширини, висина није могла бити ограничена. Дакле, умјесто тога, претраживачи су омогућили атрибут висине да дефинишу минималну висину табеле. Ако је табела била виша од те висине, биће приказана виша. Али требао би користити имовину
Са својством ЦСС висине можете ограничити висину ако користите и ЦСС својство да бисте дефинисали шта се дешава са било којим вишком садржаја.
Да бисте поставили минималну висину на столу, напишите:
<табле стиле = "хеигхт: 30ем;" >
<тр>
<тд> Ова табела је најмање 30 емс висока.
Два атрибута и додатни простор око леве / десне стране (хспаце) и горње / доње (вспаце) табеле. Уместо тога користите свој стил стил.
Да бисте поставили вертикални простор на 20 пиксела и хоризонтални простор на 40 пиксела, напишите:
<табле стиле = "маргин: 0пк;
<тр>
<тд> Ова табела има површину од 20 пиксела и хспаце од 40 пиксела.
Атрибут је боолеан атрибут који дефинише да ли садржај табеле треба да се прелази на ивицу родитељског елемента или прозора или да примени хоризонтално померање. Уместо тога, требало би дефинирати карактеристике омотања сваке ћелије таблице користећи ЦСС својство.
Да бисте направили колону са великим бројем текста, не пишите:
<табела>
<тр>
<тд стиле = "вхите-спаце: новрап;" > Ово је колона са тоном садржаја. Али чак и ако је шири од контејнера, текст не треба да се преклопи на следећу линију, већ умјесто тога приморава прозор прегледача да се помера хоризонтално да би видио сав садржај.
Коначно, атрибут дефинише како садржај сваког ћелија треба вертикално поравнати унутар ћелије. Уместо овог неважећег атрибута, требало би користити особину ЦСС у свакој ћелији којој желите промијенити поравнање. Нећете примијетити ефекте овог стила, осим ако садржај ћелије није мањи од расположивог простора креираног од других, већих ћелија.
Да бисте приморали ћелију да се поравна на дно (а не у средини, као подразумевано), напишите:
<табела>
<тр>
<тд> Ова ћелија је дуже од остатка и тако ће силити висину да буде виша. Тако ћете видети да је вертикално поравнана ћелија поравната на дну.
<тд стиле = "вертицал-алигн: боттом;" > Садржај на дну.
<тд> Садржај у средини.