Създаване на таблица в HTML

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

Създаване на първата таблица

Отваряйте текстовия редактор както обикновено, създайте празен HTML файл и поставете следния код между маркерите:

  1 
  2 
  3 
  4 
  5 
  6 

Запазете документа. Отворете файла. Ако навсякъде няма грешки, браузърът ще даде следния резултат:

Нека сортираме описания код:

1. тагове обяви на браузъра, че е необходимо да се създаде таблица.
2. Атрибутът border определя границите на таблицата, а параметър 1 - тяхната дебелина в пиксели.
3. С помощта на задайте редовете на таблицата.
4. Брой маркери определя броя на колоните.
5. Числа между маркерите са съдържанието на клетките.

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

Съдържанието на клетките може да бъде абсолютно всеки елемент на HTML: числа, текст, изображения, самите таблици и дори цели страници. Основното тук е не само да се знае как да се направи таблица в HTML, но и да се наблюдава вмъкването на тагове.

Задайте размер

Горният пример даде малка маса, неудобна за визуално възприятие. Можете да регулирате размера на таблицата до необходимите параметри, като използвате два атрибута:

1. width - задава ширината.
2. height - определя височината.

Стойностите на тези атрибути могат да бъдат пиксели или проценти. Някои браузъри не работят правилно с проценти по отношение на атрибута на височината. Затова трябва да тествате кода си в няколко от най-често срещаните:

• IE.
• Mozilla Firefox.
• Opera.
• Konqueror.
• Safari.

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

Използвайки атрибутите за ширина и височина, нека зададем размерите: ширината на HTML таблицата е 300, а височината е 200 пиксела:

  1 
  2 
  3 
  4 
  5 
  6 

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

позициониране

Смисълът на това действие е да се намери съдържанието на клетките и местоположението на самата таблица в уеб страница. Въпреки това, HTML технологията в таблици, разположени на уеб страница, е ограничена до тяхното местоположение вляво (по подразбиране), в центъра и вдясно, използвайки атрибута align и необходимите за него стойности:

Синтаксисът е:

  ... 

В бъдеще, когато изучавате CSS технология, ще научите как да позиционирате елементи на уеб документи вертикално.

За да зададете местоположението на съдържанието на клетката, към него се прилагат същите атрибути със същите стойности. :

  ...   ... 
  съдържанието на клетките 

Поставете масата надясно и подравнете съдържанието на нейните клетки в центъра:

  1 
  2 
  3 
  4 
  5 
  6 

Резултатът трябва да бъде:

Струпване на струни

За да направите няколко клетки от ред в една клетка, се използва атрибутът colspan със стойност, равна на броя клетки, които ще бъдат обединени. Следните маркери се премахват в кода. заедно със съдържанието им. Брой маркери за изтриване равно на стойността на атрибута colspan минус един.

Разгледайте това правило чрез пример. Да предположим, че трябва да създадете таблица в центъра на страницата с произволни числа с размер 4 колони и 3 реда. След това слейте клетки 2 и 3 хоризонтално във втория ред, така че браузърът да произведе следния резултат:

Следният код ще приложи тази таблица в уеб документ:

  11 
  20 
  4 
  14 
  58 
  36 
  80 
  19 
  10 
  15 
  29 

Обърнете внимание на HTML кода в таблицата, където двете клетки са комбинирани:

  58   36   80 

Тъй като стойността на параметъра colspan е 2, един маркер е изтрит. след него (2 - 1 = 1) с цялото му съдържание. Ако е необходимо да се комбинират три клетки, тогава 2 маркера ще бъдат премахнати. ,

Присъединете се към колони

Вертикалните клетки се комбинират с атрибута rowspan. Числовата му стойност определя броя на клетките, които трябва да се режат вертикално. Тази тема представлява най-големи трудности за учениците.

Следният метод е най-лесен за разбиране: създайте таблица и пребройте клетките с различни номера. Например:

Кодът на таблицата ще бъде както следва:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
  10 
  11 
  12 

Да се ​​отървем от двуцифрените числа като комбинираме колоните с цифрите 6 и 10, 7 и 11, 8 и 12. Оставете числата във вертикално комбинираните клетки: 6, 7 и 8.

Комбинирайте 6 и 10. В етикета съдържащ номер 6, предпишете: и структурата 10 изтриване изобщо. По същия начин трябва да направите за останалите двойки числа. В резултат на това кодът ще се преобразува както следва:

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 

Браузърът трябва да създаде необходимата ни таблица:

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

Съдържание на клетка

Както бе споменато по-горе, елементите на клетките могат да бъдат всякакви HTML елементи. В таблицата, например, прилагането на проста таблица с плодове и цветята им ще бъде удобно:

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

Особено е необходимо да се определи запълването на клетки с цвят: тъй като те са празни, не съдържат никакви данни, трябва да регистрирате празно място: , В този случай, ширината на клетката може да не съответства на изискваната. И почти винаги се случва. В този случай към този маркер Атрибутът width се прилага с необходимата стойност: ,

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

Заглавия на таблиците

Често има нужда от заглавие на таблицата. Това се прави с помощта на специален маркер за двойка. , Той се поставя непосредствено след етикета.

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

В допълнение към имената на таблиците, използвайте имената на колони или редове с помощта на маркер. , Текстът в HTML таблицата, затворен между тези маркери, ще бъде показан в получер шрифт. Към този етикет прилагаме атрибута за сливане на хоризонтални клетки. Нека трансформираме горната таблица като пример, като правим промени в кода:

  Таблица с цифри 
  дори 
  нечетен 
  2 
  1 
  4 
  3 
  6 
  5 

В резултат на това браузърът ще покаже заглавка със заглавие на колона:

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

Уеб документ за оформление на таблицата

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

• уеб дизайнерът изготвя оформление на сайта;
• използвайки графични редактори или друг софтуер, отделните елементи на оформлението (бутони, изображения) се отрязват и стават независими;
• уеб програмистът създава таблица на елементите на сайта, както е предвидено от дизайнера, оставяйки клетките празни;
• уеб програмистът пресъздава картина на сайта от изрязаните елементи, използвайки езици за програмиране и уеб програмиране, следейки за функционалността и оперативността на всеки от тях.

Оформлението на таблицата на сайта Ви позволява да създадете красиво и логично съдържанието (съдържанието), за да предоставите на посетителя, който го е посетил. Той обаче има две минуси:

1. Изисква голямо количество код.
2. Това прави площадката по-тежка и намалява скоростта на натоварването му.

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