Добивање максимум од HTML табелите со атрибути на табелата за учење
HTML табеларните атрибути ви даваат многу поголема контрола над HTML табелите. Постојат многу атрибути на располагање на табелите за да ги направат поинтересни и да го променат изгледот на вашата страница.
Атрибути на елементи на HTML табелата
Во HTML5 елементот ги користи глобалните атрибути и уште еден друг атрибут:. И тоа е променето само да има вредност од 1 или празна (т.е. граница = ""). Ако сакате да ја промените ширината на границата, треба да го користите ширината на границата CSS.
Погледнете подолу за да дознаете за валидни HTML5 атрибути на табелата.
Постојат и неколку атрибути кои се дел од спецификацијата HTML 4.01 која стана застарена во HTML5:
- -Изберете ја сопственоста на CSS на табелата со ТД и ТХ елементи.
- -Изберете ја границата-празно место на табелата на CSS.
- -Користи стилови на CSS граница-боја: црна; и границата стил на масата.
- -Користи стилови на CSS граница-боја: црна; и граничен стил на соодветните елементи на табелата.
- -Наместо тоа, треба да ја опишете структурата на табелата во CAPTION или да ја ставите целата табела во фигура и да ја опишете во FIGCAPTION. Алтернативно, можете да ја поедноставите структурата на табелата, така што нема потреба од објаснување.
- -Користете го CSS ширината на имотот.
И еден атрибут кој беше застарен во HTML 4.01 и исто така е застарен во HTML5.
Дознајте повеќе за атрибутите на HTML 4.01 TABLE.
- align -Наместо тоа, искористете ја сопственоста на CSS маргината.
Постојат и неколку атрибути кои не се дел од спецификација на HTML.
Користете ги овие атрибути ако знаете дека прелистувачите што ги поддржувате може да ги справуваат и да не се грижат за валиден HTML.
- - Наместо тоа, користете ја сликата во боја на CSS.
- bordercolor-Наместо тоа, искористете ја границата на бои на CSS.
- bordercolorlight-Наместо тоа, користете ја границата на бои на CSS.
- bordercolordark-Наместо тоа, користете ја границата на бои на CSS.
- cols - Нема алтернатива за овој атрибут.
- висина - Наместо тоа, користете ја висината на вредноста на CSS.
- - Наместо тоа, користете маргина на имот CSS.
- - Наместо тоа, користете маргина на имот CSS.
- - Наместо тоа, користете ја CSS сопственоста бело-простор.
- -Наместо тоа, користете ја CSS сопственоста вертикално.
Дознајте повеќе за атрибутите за специфични прегледи на прелистувачот.
Атрибути на елементи на табелата HTML5
Како што споменавме погоре, постои само еден атрибут, надвор од глобалните атрибути, кој важи за HTML5 TABLE елемент: граница.
Граничниот атрибут се користи за да се дефинира границата околу целата табела и сите клетки во неа. Имаше некакво прашање дали таа ќе биде вклучена во спецификацијата HTML5, но останува бидејќи даваше информации за структурата на табелата, надвор од едноставни стилски импликации.
За да го додадете атрибутот на граница, ја поставувате вредноста на 1 ако има граница и е празна (или оставете го атрибутот) ако не постои. Повеќето прелистувачи исто така ќе поддржат 0 без граница, и која било друга целобројна вредност (2, 3, 30, 500, итн.) За да ја објави ширината на границата во пиксели, но ова е застарено во HTML5. Наместо тоа, треба да ги користите својствата на стилот на границата CSS за да ја дефинирате ширината на границата и другите стилови.
За да креирате табела со граница, напишете:
border = "1" >
Ова е табела со граница
Постојат HTML 4.01 атрибути кои се застарени во HTML5. Ако планирате да пишувате HTML 4.01 документи, можете да ги научите, инаку, можете да ги игнорирате. Повеќето од овие атрибути имаат алтернативи, опишани погоре.
Ги опишуваме атрибутите на елементот што се валидни во HTML5 (и HTML 4.01). Ова ги опишува атрибутите ТАБЕЛА кои се валидни во HTML 4.01, но се застарени во HTML5. Доколку сеуште пишувате HTML 4.01 документи, можете да ги користите овие атрибути, но повеќето од нив имаат алтернативи кои ќе ги направат вашите страници повеќе иновативни за кога ќе се преселите во HTML5.
Валидни HTML 4.01 атрибути
Атрибутот што го опишавме погоре.
Единствената разлика во HTML 4.01 од HTML5 е дека можете да наведете кој било цел број (0, 1, 2, 15, 20, 200, итн.) За да ја дефинирате ширината на границата во пиксели.
За да изградите табела со граница 5px, напишете:
border = "5" >
Оваа табела има граница 5px.
Погледнете пример од две маси со граници.
Атрибутот го дефинира износот на простор помеѓу границите на ќелиите и содржината на ќелијата. Стандардно е два пиксели. Поставете го cellpadding на 0 ако не сакате празно место помеѓу содржината и границите.
За да го поставите залихите на ќелии на 20, напишете:
cellpadding = "20" >
Оваа табела содржи cellpadding од 20.
Границите на ќелиите ќе бидат одделени со 20 пиксели.
Погледнете пример на табела со cellpadding
Атрибутот го дефинира количината на простор помеѓу табеларните ќелии и содржината на ќелијата. Како cellpadding, стандардно е поставен на два пиксели, па мора да го поставите на 0 ако не сакате празно место.
За да додадете празно место на табелата, напишете:
cellspacing = "20" >
Оваа табела има мобилен простор од 20.
Ќелиите ќе бидат одделени со 20 пиксели.
Погледнете ја табелата со мобилен простор
Атрибутот идентификува кои делови од границата околу надворешната страна на табелата ќе бидат видливи. Можете да ја обликувате вашата маса на сите четири страни, која било страна, на врвот и на дното, лево и десно, или нема.
Еве го HTML за маса со само левата страна:
frame = "lhs" >
Оваа табела
ќе има
само
лева страна рамка.
И уште еден пример со долниот рамка:
frame = "below" >
Оваа табела има рамка на дното.
Проверете некои маси со рамки
Атрибутот е сличен на атрибутот frame, само тоа влијае на границите околу ќелиите на табелата. Можете да поставите правила за сите клетки, помеѓу колони, помеѓу групи како TBODY и TFOOT или ништо.
За да изградите табела со линии само меѓу редовите, напишете:
правила = "редови" >
Оваа 4x4 табела
редовите не колони
наведени со
правила атрибут.
А друг со линии меѓу колоните:
rules = "cols" >
Ова е
маса
каде
колони
се
означен
Еве еден пример за табела со правила
Атрибутот дава информации за табелата за читачи на екран и други кориснички агенти кои може да имаат проблеми со читање на табелите. За да го користите атрибутот summary, напишете краток опис на табелата и ставете го тоа како вредност на атрибутот. Резимето нема да се прикаже на веб-страницата во повеќето стандардни веб прелистувачи.
Еве како да напишете едноставна табела со резиме:
summary = "Ова е примерна табела која содржи информации за полнење. Целта на оваа табела е да покаже резиме." >
колона 1 ред 1
колона 2 ред 1
колона 1 ред 2
колона 2 ред 2
Погледнете ја табелата со резиме
Атрибутот ја дефинира ширината на табелата во пиксели или како процент од елементот на контејнерот. Ако ширината не е поставена, табелата ќе потрае само колку што е потребно за прикажување на содржината, со максимална ширина иста како и ширината на родителскиот елемент.
За да изградите табела со одредена ширина во пиксели, напишете:
<маса ширина = "300" >
Оваа табела е 80% од ширината на контејнерот во кој е во него.
И да се изгради маса со ширина што е процент од родителскиот елемент, напишете:
< ширина на табелата = "80%" >
Оваа табела е 80% од ширината на контејнерот во кој е во него.
Погледнете пример на табела со ширина
Застарен HTML 4.01 ТАБЕЛА Атрибут
Постои еден атрибут на елементот TABLE кој е застарен во HTML 4.01 и застарен во HTML5: усогласување . Овој атрибут ви овозможува да поставите каде табелата треба да се наоѓа на страната во однос на текстот што е до него. Овој атрибут е застарен во HTML 4.01, и треба да избегнувате да го користите. Наместо тоа, треба да го користите CSS сопственост или маргина лево: авто; и маргина-десна: авто; стилови. Сопственоста на float ви дава резултат кој е поблиску до она што се дава на атрибутот за усогласување, но тоа може да влијае на начинот на прикажување на остатокот од содржината на страницата. Маргина-десна: авто; и маргина-лево: авто; се она што W3C препорачува како алтернатива.
Еве еден застарен пример користејќи го атрибутот за усогласување:
align = "десно" >
Оваа табела е точно подредена
Текстот тече околу него лево
Погледнете застарен пример користејќи го атрибутот за усогласување.
И да го добиете истиот ефект со валиден (не-застарен) HTML, напишете:
style = "float: right;" >
Оваа табела е точно подредена
Текстот тече околу него лево
Следново објаснува атрибути на TABLE кои не се дел од било која спецификација на HTML.
Претходните информации опишуваат атрибути на елементот HTML кои се валидни во HTML 4.01, но се застарени во HTML5.
Следниве ги опишува атрибутите ТАБЕЛА кои не се валидни во било која моментална спецификација. Ако не ми е гајле за тоа дали вашите страници се валидираат и вашите корисници користат прелистувач кој ги поддржува овие елементи, тогаш можете да ги користите овие елементи. Но, повеќето од нив се или неподдржани во современите прелистувачи или имаат алтернативи кои се повеќе усогласени со стандардите.
Ние не препорачуваме да ги користите овие атрибути на вашите HTML табели.
Атрибутот е стар атрибут кој беше вклучен пред CSS беше широко поддржан. Тоа ви овозможува да ја промените бојата на позадината на табелата. Можете да поставите име на боја или хексадецимален код. Овој атрибут и понатаму работи во многу прелистувачи, но за иднината HTML, не треба да го користите, и да користите CSS наместо тоа.
Подобрата алтернатива на овој атрибут е сопственост на стилот.
За да ја смените бојата на позадината на табелата, напишете:
style = "background-color: #ccc;" >
Оваа табела има сива позадина
Слично на атрибутот bgcolor, атрибутот bordercolor ви овозможува да ја промените бојата на атрибутот. Овој атрибут е поддржан само од Internet Explorer. Наместо тоа, треба да го користите стилот на границата во боја.
За промена на бојата на границата на вашата табела, напишете:
style = "border-color: red;" >
Оваа табела има црвена граница.
Атрибутите bordercolorlight и bordercolordark беа вклучени во Internet Explorer за да ви овозможат да креирате 3D граница околу вашата табела. Сепак, како на IE8 и горе, ова е само поддржано во IE7 Стандарди и Режим Quirks . Microsoft тврди дека овие својства повеќе не се поддржани.
За кратко време, атрибутот cols на елементот ТАБЕЛА беше предложен да им помогне на прелистувачите да знаат колку колони имаа маса. Премисата беше дека ова ќе помогне да се забрза рендерирање на големи маси. Сепак, тоа беше имплементирано само од Internet Explorer, а од IE8 и горе, ова е поддржано само во IE7 Standards Mode и Quirks Mode.
Бидејќи има широк атрибут (застарен во HTML5), многу луѓе претпоставуваа дека има и висински атрибут за табели. Но, бидејќи табелите се во согласност со ширината на нивната содржина или дефинираната широчина во атрибутот CSS или ширина, висината не може да биде ограничена. Така, наместо тоа, прелистувачите дозволија атрибутот height да ја дефинира минималната висина на табелата. Ако масата беше повисока од таа висина, таа ќе се покаже повисока. Но, треба да го користите имотот
Со CSS висината на имотот можете да ја ограничите висината, ако го користите и CSS сопственоста, како и да дефинирате што се случува со некоја вишок содржина.
За да ја поставите минималната висина на маса, напишете:
style = "height: 30em;" >
Оваа табела е висока од 30 ЕДС.
Двете атрибути и додаден простор околу левата / десната страна (hspace) и горниот / долниот (vspace) на табелата. Наместо тоа, треба да го користите стилот на стилот.
За да го поставите вертикалниот простор на 20 пиксели и хоризонталниот простор до 40 пиксели, напишете:
style = "margin: 20px 40px;"
Оваа табела има простор од 20 пиксели и hspace од 40 пиксели.
Атрибутот е булова атрибут кој дефинира дали содржината на табелата треба да се преврти на работ на родителскиот елемент или прозорец или да присилува хоризонтално лизгање. Наместо тоа, треба да ги дефинирате обемните карактеристики на секоја табела со помош на CSS сопственост.
За да направите колумна со голем текст, не пишувајте:
<маса>
style = "white-space: nowrap;" > Ова е колона со еден тон содржина. Но, дури и ако е поширок од контејнерот, текстот не треба да се превртува на следната линија, туку наместо тоа принудува прозорецот на прелистувачот да се лизга хоризонтално за да ја види целата содржина.
Конечно, атрибутот дефинира како содржината на секоја ќелија треба да се усогласи вертикално во рамките на ќелијата. Наместо овој валиден атрибут, треба да го користите својството CSS на секоја ќелија за која сакате да ја смените усогласувањето. Нема да ги забележите ефектите од овој стил, освен ако содржината на ќелијата не е помала од расположливиот простор создаден од други, поголеми ќелии.
За да натерате ќелија да се усогласи на дното (наместо средината, како стандардно), напишете:
<маса>
Оваа ќелија е подолга од останатите и така ќе ја присили висината да биде повисока. Така ќе видите дека вертикално порамнатата ќелија е порамнета до дното.
style = "vertical-align: bottom;" > Содржина на дното.
Содржина во средина.