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