Възползвайте се максимално от HTML таблиците, като научите атрибути на таблици
Характеристиките на таблицата на HTML ви дават много повече контрол върху HTML таблиците. На масите има много атрибути, които да ги направят по-интересни и да променят външния вид на страницата ви.
Характеристики на елементите на HTML таблицата
В HTML5 елементът използва глобалните атрибути и един друг атрибут:. И се е променило, за да има само стойност 1 или празна (т.е. граница = ""). Ако искате да промените ширината на границата, трябва да използвате свойството CSS за ширина на границата.
Вижте по-долу, за да научите за валидните атрибути на таблицата в HTML5.
Има и няколко атрибута, които са част от спецификацията на HTML 4.01, която е остаряла в HTML5:
- -Използвайте CSS подложката собственост върху елементите TD и TH на масата.
- - Използвайте разстоянието между границите на собствеността на CSS на масата.
- -Използвайте CSS стилове border-color: black; и граничен стил на масата.
- -Използвайте CSS стилове border-color: black; и граничен стил върху съответните елементи на таблицата.
- - Вместо това трябва да опишете структурата на таблицата в CAPTION или да поставите цялата таблица във ФИГУРА и да я опишете в FIGCAPTION. Друга възможност е да опростите структурата на масата, така че да не е необходимо обяснение.
- -Използвайте собствеността на ширината на CSS.
И един атрибут, който е отхвърлен в HTML 4.01 и също е остарял в HTML5.
Научете повече за атрибутите HTML 4.01 TABLE.
- align -Използвайте вместо това собствеността на маркера CSS.
Съществуват и няколко атрибута, които не са част от която и да е HTML спецификация.
Използвайте тези атрибути, ако знаете, че браузърите, които поддържате, могат да се справят с тях и не ви интересува валиден HTML код.
- -Вместо това използвайте цвета на фона на CSS собствеността.
- bordercolor - Вместо това използвайте CSS собственост на границата.
- bordercolorlight - Използвайте вместо това цвета на графа CSS на собствеността.
- bordercolordark -Използвайте вместо това цвета на графата CSS на собствеността.
- cols - Няма алтернатива на този атрибут.
- height-Вместо това използвайте височината на собствеността на CSS.
- -Вместо това използвайте маркера на собственост на CSS.
- -Вместо това използвайте маркера на собственост на CSS.
- -Вместо това използвайте CSS свойството бяло пространство.
- - Използвайте вместо това CSS свойството вертикално.
Научете повече за атрибутите за конкретни таблици на браузъра.
HTML5 Таблица Атрибути на елемента
Както споменахме по-горе, има само един атрибут, надхвърлящ глобалните атрибути, който е валиден на елемент HTML5 TABLE: border.
Атрибутът за границата се използва за дефиниране на границата около цялата таблица и всички клетки в нея. Имаше някакъв въпрос дали ще бъде включен в спецификацията на HTML5, но остана, защото предостави информация за структурата на таблицата, която не е просто стил.
За да добавите атрибута на границата, задайте стойността на 1, ако има граница и е празна (или оставете атрибута), ако не съществува. Повечето браузъри също така поддържат 0 без граници и всяка друга целочислена стойност (2, 3, 30, 500 и т.н.), за да декларират ширината на границата в пиксели, но това е остаряло в HTML5. Вместо това трябва да използвате CSS свойства на границата на стила, за да дефинирате ширината на границата и други стилове.
За да създадете таблица с граница, напишете:
border = "1" >
Това е таблица с граница
Има HTML 4.01 атрибути, които са остарели в HTML5. Ако планирате да пишете HTML 4.01 документи, можете да ги научите, в противен случай можете да ги игнорирате. Повечето от тези атрибути имат алтернативи, описани по-горе.
Описваме атрибутите на елемента, които са валидни в HTML5 (и HTML 4.01). Това описва атрибутите TABLE, които са валидни в 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 граница.
Вижте пример за две таблици с граници.
Атрибутът определя размера на пространството между границите на клетката и съдържанието на клетката. Стандартът е два пиксела. Задайте клетъчната палитра на 0, ако не желаете място между съдържанието и границите.
За да настроите подложката на клетката на 20, напишете:
cellpadding = "20" >
Тази таблица има cellpadding от 20.
Клетъчните граници ще бъдат разделени на 20 пиксела.
Преглед на пример за таблица с cellpadding
Атрибутът определя размера на пространството между клетките на таблицата и съдържанието на клетките. Подобно на cellpadding, по подразбиране е зададено два пиксела, така че трябва да го настроите на 0, ако не искате разстояние между клетки.
За да добавите разстоянието между клетките на таблица, напишете:
<таблица cellspacing = "20" >
Тази таблица има cellspacing на 20.
Клетките ще бъдат разделени на 20 пиксела.
Вижте таблица с cellspacing
Атрибутът идентифицира кои части от границата около външната маса ще бъдат видими. Можете да оформите масата си от четирите страни, от едната страна, отгоре и отдолу, от ляво и от дясно или от никоя.
Ето HTML за таблица с лявата страна на страницата:
рамка = "lhs" >
Тази таблица
ще има
само
рамката на лявата страна.
И още един пример с долната рамка:
frame = "по-долу" >
Тази таблица има рамка в дъното.
Разгледайте някои таблици с рамки
Атрибутът е подобен на атрибута на рамката, но само засяга границите около клетките на таблицата. Можете да зададете правила за всички клетки, между колони, между групи като TBODY и TFOOT или нищо.
За да създадете таблица с линии само между редовете, напишете:
правила = "редове" >
Тази таблица с размер 4x4 има
редове, а не колони
очертан с
правила атрибут.
И друг с линиите между колоните:
правила = "cols" >
Това е
таблица
където
колони
са
маркиран
Ето един пример за таблица с правила
Атрибутът предоставя информация за таблицата за екранни четци и други агенти на потребителите, които може да имат проблеми с четенето на таблици. За да използвате атрибута за обобщение, напишете кратко описание на таблицата и я постави като стойността на атрибута. Резюмето няма да се показва на уеб страницата в повечето стандартни уеб браузъри.
Ето как да напишете проста таблица с резюме:
summary = "Това е примерна таблица, която съдържа информация за пълнежа. Целта на тази таблица е да покаже резюме." >
колона 1 ред 1
колона 2 ред 1
колона 1 ред 2
колона 2 ред 2
Преглед на таблица с резюме
Атрибутът определя ширината на таблицата в пиксели или като процент от елемента на контейнера. Ако ширината не е зададена, таблицата ще заема само толкова пространство, колкото е необходимо за показването на съдържанието, като максималната ширина е същата като ширината на родителския елемент.
За да създадете таблица със специфична ширина в пиксели, напишете:
< ширина на таблицата = "300" >
Тази таблица е 80% от ширината на контейнера, в който е в нея.
И за да изградите таблица с ширина, която е процент от родителския елемент, напишете:
< ширина на таблицата = "80%" >
Тази таблица е 80% от ширината на контейнера, в който е в нея.
Вижте пример за таблица с ширина
Отменен атрибут на таблица HTML 4.01
Има един атрибут на елемента ТАБЛИЦА, който е отхвърлен в HTML 4.01 и остарял в HTML5: подравняване . Този атрибут ви позволява да зададете къде да се намира таблицата в страницата спрямо текста, който е до нея. Този атрибут е отхвърлен в HTML 4.01 и трябва да го избягвате. Вместо това трябва да използвате собствеността на CSS или лявото поле: auto; и марж-право: автоматично; стилове. Флотът собственост ви дава резултат, който е по-близо до това, което е предоставен атрибут, но може да повлияе на начина, по който останалата част от съдържанието на страницата се показват. Маржин право: автоматично; и марж-ляво: автоматично; са това, което W3C препоръчва като алтернатива.
Ето един отхвърлен пример, използващ атрибута "align":
align = "right" >
Тази таблица е правилно подравнена
Текстът се движи около него вляво
Вижте пример, който е отхвърлен, като използвате атрибута "подравняване".
И за да получите същия ефект с валиден (неотменен) HTML, напишете:
style = "float: right;" >
Тази таблица е правилно подравнена
Текстът се движи около него вляво
Следващото обяснява атрибутите TABLE, които не са част от която и да е HTML спецификация.
Предходната информация описва атрибутите на елемента HTML, които са валидни в HTML 4.01, но са остарели в HTML5.
По-долу са описани параметри на таблицата, които не са валидни в нито една текуща спецификация. Ако не ви интересува дали вашите страници валидират и вашите потребители използват браузър, който поддържа тези елементи, тогава можете да използвате тези елементи. Но повечето от тях или не се поддържат в съвременните браузъри, или имат алтернативи, които са по-съвместими със стандартите.
Не препоръчваме да използвате тези атрибути във вашите HTML таблици.
Атрибутът е стар атрибут, включен преди CSS да е широко поддържан. Тя ви позволява да промените цвета на фона на таблицата. Можете да зададете име на цвят или шестнадесетичен код. Този атрибут все още работи в много браузъри, но за HTML, който не е защитен в бъдеще, не трябва да го използвате и вместо това да използвате CSS.
По-добрата алтернатива на този атрибут е собствеността на стила.
За да промените цвета на фона на таблицата, напишете:
style = "цвят на фона: #ccc;" >
Тази таблица има сив фон
Подобно на атрибута bgcolor, атрибутът bordercolor ви позволява да промените цвета на атрибута. Този атрибут се поддържа само от Internet Explorer. Вместо това трябва да използвате характеристиката стил на оцветяване на границата.
За да промените цвета на границата на масата си, напишете:
стил = "граница-цвят: червен;" >
Тази таблица има червена граница.
Атрибутите bordercolorlight и bordercolordark бяха включени в Internet Explorer, за да ви позволи да създадете 3D рамка около вашата таблица. Въпреки това, от IE8 и нагоре, това се поддържа само в IE7 Standards Mode и Quirks Mode . Microsoft твърди, че тези свойства вече не се поддържат.
За кратко време, атрибутът cols на елемента TABLE бе предложен, за да помогне на браузърите да знаят колко колони имаше една маса. Предпоставката беше, че това ще спомогне за ускоряване на изработването на големи маси. Въпреки това, той е бил приложен само от Internet Explorer, а от IE8 и повече, това се поддържа само в IE7 Standards Mode и Quirks Mode.
Тъй като има атрибут за ширина (остарял в HTML5), много хора предполагат, че има и атрибут за височина за таблици. Но тъй като таблиците съответстват на ширината на тяхното съдържание или на определената ширина в атрибута CSS или ширина, височината не може да бъде ограничена. Така че вместо това, браузърите позволиха височината да определя минималната височина на таблицата. Ако масата е по-висока от тази височина, тя ще се покаже по-висока. Но трябва да използвате имота
С характеристиката за височина CSS можете да ограничите височината, ако използвате и CSS свойството, за да определите какво се случва с всяко излишно съдържание.
За да зададете минималната височина на масата, напишете:
style = "височина: 30м;" >
Тази таблица е най-малко 30ms висок.
Двата атрибута и допълнително пространство около лявата / дясната страна (hspace) и горната / долната (vspace) на таблицата. Вместо това трябва да използвате собствеността на стила.
За да зададете вертикалното пространство на 20 пиксела и хоризонталното пространство до 40 пиксела, напишете:
style = "margin: 20px 40px;"
Тази таблица има vspace от 20 пиксела и hspace от 40 пиксела.
Атрибутът е булев атрибут, който определя дали съдържанието на таблицата трябва да се увива в края на родителския елемент или прозореца или да наложи хоризонтално превъртане. Вместо това трябва да дефинирате характеристиките на обвивката на всяка клетка от таблицата, използвайки свойството CSS.
За да направите колона с много текст да не се обвива, напишете:
<Маса>
style = "бяло пространство: сега;" > Това е колона с тон съдържание. Но дори и да е по-широк от контейнера, текстът не трябва да се обвива в следващия ред, а вместо това да принуди прозореца на браузъра да се придвижи хоризонтално, за да види цялото съдържание.
Накрая, атрибутът определя как съдържанието на всяка клетка трябва да се подрежда вертикално в клетката. Вместо този невалиден атрибут, трябва да използвате CSS свойството на всяка клетка, за която искате да промените подравняването. Няма да забележите ефектите от този стил, освен ако съдържанието на клетката е по-малко от наличното пространство, създадено от други, по-големи клетки.
За да накарате клетката да се приведе в долната част (вместо в средата, като стандартна), напишете:
<Маса>
Тази клетка е по-дълга от останалата част и така ще накара височината да бъде по-висока. Така че ще видите, че вертикално подравнената клетка е подравнена до дъното.
style = "вертикално-изравняване: долу"; > Съдържанието в долната част.
Съдържание в средата.