2. Property background="URL" - задава фоновото изображение. Вместо URL трябва да се изпише адресът на фоновото изображение.

Пример

Примерна таблица

Колона 1

Колона 2

Преобразува в следното на страницата:

В горния пример нашето фоново изображение се намира в папката img (която е в същата директория като html страницата) и изображението се нарича fon.gif. Моля, обърнете внимание, че в тага добавихме style="color:white;" . Тъй като фонът е почти черен, за да предотвратим сливането на текста с фона, направихме текста бял.

3. Свойство bgcolor="color" - задава цвета на фона на таблицата. Можете да изберете всеки цвят от цялата палитра (вижте кодовете и имената на html цветовете)

4. Свойство border="number" - задава дебелината на границата на таблицата. В предишните примери посочихме border="1", което означава, че дебелината на рамката е 1 пиксел.

5. Свойство bordercolor="color" - задава цвета на границата. Ако border="0", тогава няма да има рамка и цветът на рамката няма да има значение.

6. Свойство cellpadding="number" - отстъп от рамката към съдържанието на клетката в пиксели.

7. Свойство cellspacing="number" - разстоянието между клетките в пиксели.

8. Свойство cols="number" - броя на колоните. Ако не го зададете, браузърът сам ще определи броя на колоните. Единствената разлика е, че посочването на този параметър най-вероятно ще ускори зареждането на таблицата.

9. Свойство frame="parameter" - как да се показват граници около таблицата. Може да приема следните стойности:

• void - не рисувайте граници
• граница - граница около масата
• отгоре - граница по горния ръб на масата
• отдолу - граница в долната част на таблицата
• hsides - добавете само хоризонтални граници (отгоре и отдолу на таблицата)
• vsides - начертайте само вертикални граници (отляво и отдясно на масата)
• rhs - рамка само от дясната страна на масата
• lhs - рамка само от лявата страна на масата

10. Свойство height="number" - задава височината на таблицата: в пиксели или в проценти.

11. Property rules="parameter" - къде да се показват граници между клетките. Може да приема следните стойности:

• всички - около всяка клетка на таблицата се очертава линия
• групи - показва се линия между групите, образувани от тагове

Атрибути и свойства

1. Свойство align="parameter" - задава подравняването на отделна клетка от таблицата. Може да приема следните стойности:

• ляво - ляво подравняване
• център - централно подравняване
• дясно - дясно подравняване

2. Property background="URL" - задава фоновото изображение на клетката. Вместо URL трябва да се изпише адресът на фоновото изображение.

3. Свойство bgcolor="color" - задава цвета на фона на клетката.

4. Свойство bordercolor="color" - задава цвета на границата на клетката.

5. Свойство char="letter" - указва буквата, от която да се направи подравняването. Стойността на атрибута align трябва да бъде зададена на char.

6. Свойство colspan="number" - задава броя на хоризонталните клетки за обединяване.

7. Свойство height="number" - задава височината на таблицата: в пиксели или като процент.

8. Свойство width="number" - задава ширината на таблицата: в пиксели или като процент.

9. Свойство rowspan="number" - задава броя на вертикалните клетки за обединяване.

10. Свойство valign="parameter" - вертикално подравняване на съдържанието на клетката.

• отгоре - подравнете съдържанието на клетката към горния ръб на реда
• средно - средно подравняване
• отдолу - подравняване към долния ръб
• базова линия - подравняване спрямо основната линия

За етикет

Как да предотвратите залепването на границите на клетки в таблица

Ако използвате рамка (граница на клетка) и нулева подложка между клетките, те все още са залепени една за друга и получавате двойна рамка. За да избегнете това, трябва да укажете border-collapse: collapse в стиловете на таблицата:

...

Уважаеми читателю, сега научихте много повече за тага на html таблицата. Сега ви съветвам да преминете към следващия урок.

Тази лекция разглежда подробно принципите за използване на таблици в HTML маркиране. Това включва таблична организация на текста, таблична координатна мрежа и графики, организирани в таблици.

Инструменти за описание на таблици в HTML

С развитието на WWW стана ясно, че ресурсите, съдържащи се в HTML, не са достатъчни за висококачествено показване на различни видове документи. Недостатъкът на HTML беше липсата на инструменти за показване на таблици. За тази цел предварително форматиран текст (tag

), в който таблицата беше очертана с ASCII знаци.  Но тази форма на представяне на маса не беше достатъчна Високо качествои се открояваше от общия стил на документа.  След въвеждането на таблиците в HTML, уебмастърите разполагат не само с инструмент за поставяне на текст и цифрови данни, но и с мощен инструмент за проектиране за поставяне на графични изображения и текст на правилното място на екрана.

Създаване на таблици в HTML
Тагът се използва за описание на таблици<ТАВLЕ>.  Етикет<ТАВLЕ>, подобно на много други, автоматично превежда реда преди и след таблицата.
Създаване на табличен ред - таг<ТR>
Етикет<ТR>(Ред на таблица) създава ред на таблица.  Целият текст, други тагове и атрибути, които трябва да бъдат поставени на един ред, трябва да бъдат поставени между таговете lt;TR>.
Дефиниране на клетки от таблица - таг<ТD>
Клетките с данни обикновено се поставят в ред на таблица.  Всяка клетка, съдържаща текст или изображение, трябва да бъде оградена с тагове<ТD>.  Брой тагове<ТD>в ред определя броя на клетките

 

 
Таблица
 
 

Ако една таблица има два TR тагова, тогава тя има два реда.
Ако има три TD етикета в един ред,	след това в него	три колони.

Заглавия на колони в таблица - етикет<ТН>

Заглавията за колоните и редовете на таблицата се задават с помощта на етикета за заглавие<ТН>(TableHeader, заглавие на таблица). Тези етикети са подобни<ТD>. Разликата е, че текстът, ограден между таговете<ТН>, се изписва автоматично с удебелен шрифт и се поставя в средата на клетката по подразбиране. Можете да децентрирате текста и да го подравните отляво или отдясно. Ако използвате<ТD>с етикет<В>и атрибут<АLIGN=center>, текстът също ще изглежда като заглавие. Имайте предвид обаче, че не всички браузъри поддържат удебелен шрифт в таблиците, така че е по-добре да задавате заглавия на таблици с<ТН>.

Заглавката е центрирана по подразбиране	Заглавката може да обединява колони
Заглавката може да бъде поставена преди колоните	Текст или данни	Текст или данни
Заглавката може да свързва редове	Текст или данни	Текст или данни
	Текст или данни	Текст или данни
	Текст или данни	Текст или данни

Използване на заглавки на таблици - етикет<САРТIОN>

Етикет

Нека отворим файла на нашата уеб страница index.html за редактиране с помощта на Notepad++. И го отворете с помощта на браузър, за да видите промените на страницата.

В самото начало на тази статия говорихме за факта, че оформлението на сайта, което сме планирали, е таблица.

Освен това нашата таблица с оформление на сайта ще се състои от три реда (Heder, Content и Footer) и две колони (Menu и Content).

За да добавим таблица с три реда и две колони, нека променим нашия код, за да добавим следното:

За да зададете граница в таблицата, използвайте параметъра border. Дебелината на рамката на таблицата се посочва в пиксели (px).

Нека добавим границен параметър към нашия html код със стойност на аргумента, равна на 1px. Тоест дебелината на рамката на таблицата ще бъде равна на един пиксел:

За да подравним таблицата в центъра на прозореца на браузъра, използваме параметъра align, който може да приема три стойности: ляво, централно, дясно. Ясно е, че за да подравним таблицата в центъра на прозореца на браузъра, стойността на аргументът на параметъра за подравняване трябва да бъде равен на: център.

И нека зададем ширината на таблицата тук. Ширината на таблицата се определя от параметъра width. Стойностите, които този параметър може да приеме, могат да бъдат изразени като цяло число в пиксели или като процент от текущата ширина на прозореца на браузъра.

Нека добавим подравняване и ширина на таблицата към нашия код и в резултат получаваме следния код:

Опресняваме прозореца на браузъра на страницата на нашия уебсайт, за да видим промените, виждаме, че таблицата е подравнена към центъра на прозореца и е променила ширината си.

Сега нека се върнем към рамката на таблицата, в html кода я задаваме на 1 пиксел, използвайки стойността на аргумента на параметъра border: border=”1”.

Обърнете се към параметрите на тага TABLE в html справочника; тук има два параметъра, които влияят външен видрамка.

Първият параметър: cellpacing – задава разстоянието между клетките на таблицата.

Втори параметър: cellpadding – разстоянието от рамката до съдържанието на клетката зависи от стойността на аргумента на този параметър.

За да направим всички разстояния и отстъпи минимални, задаваме стойностите на аргументите над горните параметри на нула.

В резултат на това html кодът на таблицата ще приеме следната форма:

Както си спомняте, нашата таблица трябва да има три реда, като първият ред трябва да има една клетка, вторият ред трябва да има две клетки, а третият ред трябва също да има една клетка.

Ако погледнем външния вид на таблицата, ще видим, че за да приведем таблицата в желаната форма, просто трябва да комбинираме хоризонталните клетки на първия и третия ред.

За да направим това, ще използваме параметъра colspan. Този параметър се използва в TD тага. Стойността на аргумента на параметъра colspan показва броя на хоризонталните клетки, които да бъдат обединени; в нашия случай тази стойност е 2.

Освен добавянето на параметъра colspan, нека променим етикетите в клетките на таблицата, за да съответстват на нашето оформление.

След всички промени, пълният html код на нашата страница ще бъде както следва:

Нека запазим нашия код в Notepad и опресним файла index.html в браузъра, за да видим промените.

И така, този урок се оказа доста голям, така че нека продължим да работим върху html таблицата на нашата страница в следващия урок.

Таблиците в HTML са толкова функционални, че можете да ги използвате за оформление на цели уебсайтове (прочетете). Сега ще говорим за вмъкване на прости HTML таблици в уеб страница, като анализираме само маркирането, но без да засягаме дизайна, защото е по-добре да украсите таблици с помощта на CSS стилове.

Тагове и атрибути на таблици

Ето основните елементи, от които се нуждаете, за да създадете таблици:

• - контейнер, вътре в който се намира масата (същото като
  за маркирани или
  за номерирани списъци).
  1. граница- атрибут, който определя дебелината на рамките. Вместо това е по-добре да използвате CSS свойството border.

  указва сигнатурата на таблицата. Не е необходимо да използвате контейнер, но ако все пак решите да озаглавите таблицата, поставете я веднага след етикета , извън клетки и редове.

  - сдвоен таг, съдържащ ред от таблица (клетки, разположени на същото хоризонтално ниво).

  , ще има толкова много клетки в него: един етикет - една клетка.

  ви позволява да групирате колони, бързо и без задръстване на кода, да им присвоите общи характеристики. С помощта на контейнер можете да отделите логическите части на таблица една от друга. Поставя се след етикета

  , ако не е там, след това .

  използвани за същата цел като . може да съдържа , но не и обратното.

  педя- атрибут, който указва броя на колоните, към които се прилагат свойствата на контейнера

  .

  , И - контейнери, които ви позволяват да разделите таблицата съответно на горна (заглавия), основна (тяло) и долна (крайна) части. В HTML таблица последователността на тези етикети е същата като последователността на контейнерите , И

  Инструменти за създаване на уебсайтове

  Предназначение	Инструмент
Маркиране	HTML	XHTML
Декор	CSS
развитие	PHP	Python

  В браузъра документът ще изглежда така:

  Нека да разберем кои редове от код са отговорни за какво.

  • - отвори масата, давайки й дебелината на рамките.
    - озаглавиха го.
    - отвори линията.
    - създаде клетка с дизайн на заглавка.
    - създаде втора заглавна клетка в реда. Параметърът colspan показва, че тази клетка трябва да обхваща две хоризонтално.
    - затвори линията. Останалите линии са създадени по същия начин.
    - добавен втори ред на таблицата с обикновени, а не заглавни клетки. Следващите редове и клетки бяха вмъкнати по подобен начин.

    Инструменти за създаване на уебсайтове

    Предназначение	Инструмент
  Маркиране	HTML	XHTML

    - затвори масата.

  Популярни в категорията:

  План за действие за настройка на терминал от Sberbank - zolnirt -...

  Прочети

  Софтуер за работа с ккм stroke-m

  Прочети

  Инсталиране на Microsoft Office на компютър с Windows

  Прочети

  Какво е DVDRip, CAMRip, TS, TC, DVDSrc и др.

  Прочети

  

  Последни статии

  Ава в контакт: какво е това? Какво е awk? как...

  Прочети

  Пазарен капацитет: какво е и как е...

  Прочети

  Дългоочаквани награди за играчи от стария свят...

  Прочети

  Wifi Analyzer е приложение за анализ на WiFi...

  Прочети

  Пет причини да не изхвърляте стария си твърд диск

  Прочети

  VirusTotal: Онлайн сканиране за вируси...

  Прочети

  Как да забраня платените абонаменти от операторите...

  Прочети

  Начини за депозиране на пари в Skype Допълване...

  Прочети

  vsevolozk.ru
  Изучаваме компютри - Windows, вируси, програми, ремонти, възстановяване на данни

  • Издание на проекта
  • Реклама в сайта

  • Контакти
  • Карта на сайта

  © 2023 Изучаване на компютър - Windows, вируси, програми, ремонт, възстановяване на данни

  Връх

  - таг, който създава заглавна клетка на таблица. Външно съдържанието му се различава от съдържанието в другите клетки - обикновено текстът вътре	Браузърът го подчертава с удебелен шрифт и го поставя в центъра.	- контейнер, с който се създава проста клетка. Колко такива етикета ще съдържа един ред (tag