Съдържание
В миналото HTML таблиците са били използвани за контрол на оформлението на сайтовете, за да се поддържат пропорциите на съдържанието, да се създават секции, да се разделя информацията и т.н. В момента това е лоша практика, всъщност с новите спецификации на артикула маса В HTML5 са положени всички усилия, така че това да се използва за истинската му цел, а именно показването на данни в двуизмерни масиви.Елемент на таблица
Елементът маса е страхотният контейнер и може да бъде вътре във всеки елемент, който е поток, като например div. Вътрешен елемент маса ще имаме елементите: надпис, colgroup, thead, tbody, tfoot, tr, th Y td, които са необходими, за да дадат конституцията на нашата таблица, освен това новият стандарт направи следните атрибути остарели в рамките на маса и трябва да се използват изключително от CSS: обобщение, подравняване, ширина, bgcolor, клетъчно добавяне, разпределение на клетките, рамка, правила. CSS конвенцията за този елемент ще бъде следната:
таблица {дисплей: таблица; срутване на границата: отделно; разстояние между границите: 2px; цвят на границата: сив; } Tr елемент
Както добре знаем, таблиците се състоят от два основни елемента, редове и колони, където редовете представляват всеки информационен запис, а колоните структурата и типа на информацията, нека видим елемента, използван за създаване на редовете, този елемент е tr. Това може да бъде дете от следните елементи: маса, thead, tfoot, tbodyКакто виждаме, тя може да бъде директно дете на таблица или дете на елементите, които са деца на таблицата и които определят нейната структура. Трябва да съдържа 1 или повече елементи td или th според случая, някои от неговите остарели атрибути също са поставени в новия стандарт HTML5, това са: align, char, charoff, valign, bgcolor. Които трябва да работят изключително от CSS, каза, че CSS има следната структура като конвенция:
tr {дисплей: табличен ред; вертикално подравняване: наследяване; border-color: наследяване;} Td елемент
Този елемент дефинира колоните в нашите редове в таблицата, което ни позволява да отделим информацията в рамките на запис и по този начин да можем да я класифицираме според нашите нужди, той е дете на елемента tr, валидните атрибути, които може да има, са: colspan, рядове, заглавки и остарелите атрибути, които сега трябва да се обработват в CSS, са: abbr, ос, подравняване, ширина, char, charoff, valign, bgcolor, височина, nowrap, обхват. Конвенцията за CSS за този елемент е следната:
td {дисплей: таблица-клетка; вертикално подравняване: наследяване; }Първата ни маса
Нека да приложим на практика това, което видяхме досега, вече знаем, че за нашата таблица се нуждаем от редове и колони в нашия контейнер или родителски елемент, нека видим как да го пренесем в HTML кода:
Пример
| Ябълки | Зелено | Средно |
| Портокали | Оранжево | Голям |
Този код ни дава структурата на таблица с 2 реда с 3 колони, тъй като виждаме, че е прост текст, което ни кара да видим този резултат:
