Таблици в HTML

Какво са таблиците?

Таблиците са предназначени за записване на нашите данни в табличен вид, т.е. в редици и колони. 

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

Таблиците се състоят от един или повече редове, както и всеки ред се състои от една или повече колони.

Таблиците НЕ се използват за структуриране на нашите елементи. За тази цел има специален раздел, на който ще обърнем внимание и това е CSS.

Общ изглед на съставните елементи на таблиците

tables_view

Най-основно имаме отварящи и затварящи тагове <table>, последвани от <tr> – текущите редове, и <td> – текущите колони в таблицата.

Таблици в HTML5

В HTML5 имаме два типа клетки: „data cells (<td>)“, съдържащи данните на клетките и  „header cells (<th>)“, използвани за обозначение на имената на колоните или тези колони, които са с по-висок приоритет. Например: имаме три реда с изброени имена и един ред най-отгоре, който е заглавен ред. Той ще бъде обграден с тага <th>. Най-общо казано тези два тага се използват за разграничаване на нашите данни от заглавните части.

Таблиците в HTML5 се разделят на три семантични секции: <thead>, <tbody>, <tfoot>, както виждаме в следния пример;

tables_semantic

Особеност при семантичното подреждане е, че <tfoot> се слага преди <tbody>. Не се притеснявайте. Браузърът знае, че това е footer и ще подреди правилно вашата таблица ;)

Nested tables (Вложени таблици)

Вложените таблици са „таблици в таблици“, както виждаме в примера по-долу;

tables_nested

Атрибути на таблиците (Tables attributes)

tables_spacing

  • cellspacing – атрибут, който определя разстоянието между отделните клетки.
  • cellpadding – атрибут, който определя празното пространство около съдържанието на клетката (в случая текста).

tables_spacing2

  • rowspan – атрибут, който указва колко клетки да заемем по редове.
  • colspan – атрибут, който указва колко клетки да заемем по колони.

calc

 Напред към: Таблици – Проекти