Характеристиките на таблицата на HTML ви дават много повече контрол върху HTML таблиците. На масите има много атрибути, които да ги направят по-интересни и да променят външния вид на страницата ви.
Характеристики на елементите на HTML таблицата
В HTML5 елементът използва глобалните атрибути и един друг атрибут:. И се е променило само да има стойност 1 или празни (т.е. Гранична = ""). Ако искате да промените ширината на границата, трябва да използвате гранично-широчина CSS собственост.
Вижте по-долу, за да научите за валидните атрибути на таблицата в HTML5.
Има и няколко атрибута, които са част от спецификацията на HTML 4.01, която е остаряла в HTML5:
- -Използвайте CSS
подложкасобственост върху масатаTDиTHелементи. - -Използвайте собствеността на CSS
граница между редоветена масата. - -Използвайте CSS стилове
граничен цвят: черен;игранично-стилна масата. - -Използвайте CSS стилове
граничен цвят: черен;игранично-стилвърху съответните елементи от таблицата. - - Вместо това трябва да опишете структурата на таблицата в a
CAPTIONили поставете цялата маса в aФИГУРАи описвайки го в aFIGCAPTION, Друга възможност е да опростите структурата на масата, така че да не е необходимо обяснение. - -Използвайте CSS
широчинаИмот.
И един атрибут, който е отхвърлен в HTML 4.01 и също е остарял в HTML5.
Научете повече за атрибутите HTML 4.01 TABLE.
подравняване-Използвайте CSSмаржвместо това.
Съществуват и няколко атрибута, които не са част от която и да е HTML спецификация. Използвайте тези атрибути, ако знаете, че браузърите, които поддържате, могат да се справят с тях и не ви интересува валиден HTML код.
- -Използвайте собствеността на CSS
Цвят на фонавместо. BORDERCOLOR-Използвайте собствеността на CSSграничен цвятвместо.bordercolorlight-Използвайте собствеността на CSSграничен цвятвместо.bordercolordark-Използвайте собствеността на CSSграничен цвятвместо.Графи- Няма алтернатива на този атрибут.височина-Използвайте собствеността на CSSвисочинавместо.- -Използвайте собствеността на CSS
маржвместо. - -Използвайте собствеността на CSS
маржвместо. - -Използвайте собствеността на CSS
бяло пространствовместо. - -Използвайте собствеността на CSS
вертикално подравняваневместо.
Научете повече за атрибутите за конкретни таблици на браузъра.
HTML5 Таблица Атрибути на елемента
Както споменахме по-горе, има само един атрибут, извън глобалните атрибути, който е валиден за HTML5 TABLE елемент: граница.
Най- граница атрибут се използва за дефиниране на границата около цялата таблица и всички клетки в нея. Имаше някакъв въпрос дали ще бъде включен в спецификацията на HTML5, но остана, защото предостави информация за структурата на таблицата, която не е просто стил.
За да добавите граница атрибут, зададете стойността на 1 ако има граница и е празна (или да се излезе от атрибута), ако не съществува. Повечето браузъри също ще поддържат 0 без граници и всяка друга стойност от цялото число (2, 3, 30, 500 и т.н.), за да декларирате ширината на границата в пиксели, но това е остаряло в HTML5. Вместо това трябва да използвате CSS свойства на границата на стила, за да дефинирате ширината на границата и други стилове.
За да създадете таблица с граница, напишете:
Гранична = "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 граница, напишете:
<> Гранична = "5" > Тази таблица има 5px граница.
Вижте пример за две таблици с граници.
Атрибутът определя размера на пространството между границите на клетката и съдържанието на клетката. Стандартът е два пиксела. Нагласиcellpadding да се0 ако не искате пространство между съдържанието и границите.
За да настроите подложката на клетката на 20, напишете:
<> cellpadding = "20" > Тази таблица има a cellpadding от 20. Клетъчните граници ще бъдат разделени с 20 пиксела.
Преглед на пример за таблица с cellpadding
Атрибутът определя размера на пространството между клетките на таблицата и съдържанието на клетките. катоcellpadding, настройката по подразбиране е зададена на два пиксела, така че трябва да я зададете0 ако не искате разстояние между клетките.
За да добавите разстоянието между клетките на таблица, напишете:
<> cellspacing = "20" > Тази таблица има a cellspacing от 20. Клетките ще бъдат разделени с 20 пиксела.
Вижте таблица с cellspacing
Атрибутът идентифицира кои части от границата около външната маса ще бъдат видими.Можете да оформите масата си от четирите страни, от едната страна, отгоре и отдолу, от ляво и от дясно или от никоя.
Ето HTML за таблица с лявата страна на страницата:
кадрите = "лява скала" >
Тази таблица ще има само лявата рамка.
И още един пример с долната рамка:
рамка = "по-долу" >
Тази таблица има рамка в дъното.
Разгледайте някои таблици с рамки
Атрибутът е подобен накадър атрибут, само той засяга границите около клетките на масата. Можете да зададете правила за всички клетки, между колони, между групи катоTBODY иTFOOT или няма.
За да създадете таблица с линии само между редовете, напишете:
Правила = "редове" >
Тази 4x4 маса има редове, а не колони очертана с атрибут на правилата.
И друг с линиите между колоните:
Правила = "Графи" >
Това е маса където колони сте подчертано
Ето един пример за таблица с правила
Атрибутът предоставя информация за таблицата за екранни четци и други агенти на потребителите, които може да имат проблеми с четенето на таблици. За да използватерезюме атрибут, напишете кратко описание на таблицата и я постави като стойността на атрибута. Резюмето няма да се показва на уеб страницата в повечето стандартни уеб браузъри.
Ето как да напишете проста таблица с резюме:
<> 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 илимаркер-ляво: автоматично; иmargin-right: auto; стилове. Най-поплавък собственост ви дава резултат, който е по-близо до това, коетоподравняване , но може да повлияе на начина, по който се показва съдържанието на останалата част от страницата. Най-margin-right: auto; имаркер-ляво: автоматично; са това, което W3C препоръчва като алтернатива.
Ето един отхвърлен пример с помощта наподравняване атрибут:
<> приведе = "дясно" > Тази таблица е правилно подравнена Текстът се движи около него вляво
Вижте отхвърлен пример, като използватеподравняване атрибут.
И за да получите същия ефект с валиден (неотменен) HTML, напишете:
<> стил = "поплавък: прав" > Тази таблица е правилно подравнена Текстът се движи около него вляво
Следва обяснениетоTABLE атрибути, които не са част от която и да е HTML спецификация.
Предходната информация описва атрибутите на елемента HTML, които са валидни в HTML 4.01, но са остарели в HTML5.
По-долу е описаноTABLE атрибути, които не са валидни в нито една текуща спецификация. Ако не ви интересува дали вашите страници валидират и вашите потребители използват браузър, който поддържа тези елементи, тогава можете да използвате тези елементи. Но повечето от тях или не се поддържат в съвременните браузъри, или имат алтернативи, които са по-съвместими със стандартите.
Не препоръчваме да използвате тези атрибути във вашите HTML таблици.
Атрибутът е стар атрибут, включен преди CSS да е широко поддържан. Тя ви позволява да промените цвета на фона на таблицата. Можете да зададете име на цвят или шестнадесетичен код. Този атрибут все още работи в много браузъри, но за HTML, който не е защитен в бъдеще, не трябва да го използвате и вместо това да използвате CSS.
По-добрата алтернатива на този атрибут е собствеността на стила.
За да промените цвета на фона на таблицата, напишете:
<> style = "цвят на фона: #ccc;" > Тази таблица има сив фон
Подобно наBGCOLOR атрибут,BORDERCOLOR атрибута ви позволява да промените цвета на атрибута. Този атрибут се поддържа само от Internet Explorer. Вместо това трябва да използвате характеристиката стил на оцветяване на границата.
За да промените цвета на границата на масата си, напишете:
style = "border-color: red;" >
Тази таблица има червена граница.
Най-bordercolorlight иbordercolordark атрибути бяха включени в Internet Explorer, за да ви позволи да създадете 3D рамка около вашата таблица. Въпреки това, от IE8 и нагоре, това се поддържа само в IE7 Standards Mode и Quirks Mode. Microsoft твърди, че тези свойства вече не се поддържат.
За кратко времеГрафи атрибут върхуTABLE елемент бе предложен, за да помогне на браузърите да знаят колко колони имаше една маса. Предпоставката беше, че това ще спомогне за ускоряване на изработването на големи маси. Въпреки това, той е бил приложен само от Internet Explorer, а от IE8 и повече, това се поддържа само в IE7 Standards Mode и Quirks Mode.
Защото имаширочина атрибут (остарял в HTML5) много хора предполагат, че имависочина атрибут за таблици също. Но тъй като таблиците съответстват на ширината на тяхното съдържание или определената ширина в CSS илиширочина атрибут, височината не може да бъде ограничена. Така че вместо това, браузърите позволихависочина атрибут за определяне на минималната височина на таблицата. Ако масата е по-висока от тази височина, тя ще се покаже по-висока. Но трябва да използвате имота
С CSSвисочина property, можете да ограничите височината, ако използвате и CSS свойството, за да определите какво ще се случи с излишното съдържание.
За да зададете минималната височина на масата, напишете:
<> стил = "височина: 30м;" > Тази таблица е най-малко 30 сms висока.
Двата атрибута и допълнително пространство около лявата / дясната страна (hspace) и отгоре / отдолу (vspace) на таблицата. Вместо това трябва да използвате собствеността на стила.
За да зададете вертикалното пространство на 20 пиксела и хоризонталното пространство до 40 пиксела, напишете:
<> style = "margin: 20px 40px;" Тази таблица има vspace от 20 пиксела и hspace от 40 пиксела.
Атрибутът е булев атрибут, който определя дали съдържанието на таблицата трябва да се увива в края на родителския елемент или прозореца или да наложи хоризонтално превъртане. Вместо това трябва да дефинирате характеристиките на обвивката на всяка клетка от таблицата, използвайки свойството CSS.
За да направите колона с много текст да не се обвива, напишете:
<> style = "white-space: nowrap"; > Това е колона с тон съдържание. Но дори и да е по-широк от контейнера, текстът не трябва да се обвива към следващия ред, а вместо това да накара прозореца на браузъра да се придвижи хоризонтално, за да види цялото съдържание.
Накрая, атрибутът определя как съдържанието на всяка клетка трябва да се подрежда вертикално в клетката. Вместо този невалиден атрибут, трябва да използвате CSS свойството на всяка клетка, за която искате да промените подравняването. Няма да забележите ефектите от този стил, освен ако съдържанието на клетката е по-малко от наличното пространство, създадено от други, по-големи клетки.
За да накарате клетката да се приведе в долната част (вместо в средата, като стандартна), напишете:
Тази клетка е по-дълга от останалата част и така ще накара височината да бъде по-висока. Така че ще видите, че вертикално подравнената клетка е подравнена до дъното. <> style = "vertical-align: bottom;" > Съдържание в дъното. Съдържание в средата.
