HTML таблици Структура на таблица - SELFHTML-Wiki

Информация за този текст

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

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

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

Съдържание

строителство

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

въвежда таблица (маса = Таблица). въвежда нов ред на таблицата (tr = ред на таблицата = Табличен ред). След това се дефинират клетките (колоните) на съответния ред. В края на ред на таблицата има последен ден Написано.

Заглавни клетки и клетки с данни

Ред на таблица може да съдържа заглавни клетки или обикновени клетки с данни.

Следващата графика показва ефекта на HTML елементите, които създават таблица:

таблици

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

Клетките на таблицата също могат да бъдат празни. Ако не искате да въвеждате данни в ред за колона, запишете проста. Моля, имайте предвид обаче, че в този случай уеб браузърът ще покаже клетката като „недостъпна“, тъй като това поведение съответства на настройката по подразбиране на свойството CSS empty-клетки.

Маси с глава, тяло и крак

Трябва обаче да разделите и самата таблица на няколко раздела,

в най-много една заглавка на таблицата thead, най-много един долен колонтитул на таблицата и поне едно тяло на тялото на таблицата .

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

Ако таблицата на разпечатката е по-голяма от страница, частите thead и tfoot се повтарят на всяка страница при отпечатване.

Къща А Къща Б Жилищно пространство Градинска площ цялата зона
100 150
50 100
150 250
Цялата информация в квадратни метри.

Използването на colspan е обяснено в главата Сливане на клетки.

таблици

В HTML4 долният колонтитул на таблицата tfoot трябваше да бъде отбелязан веднага след thead преди tbody, противно на представянето, тъй като tfoot също съдържа информация, която се отнася за всички колони. В HTML5 обаче tfoot трябва да бъде поставен след tbody в края на таблицата.

Дизайн от CSS

В миналото таблиците бяха форматирани с различни HTML атрибути. С CSS обаче можете да постигнете по-добро и по-адаптивно форматиране.

Можете да намерите повече информация в Глава 4 HTML/Таблици/Дизайн с CSS