Таблици в HTML5 - част 2

Вече видяхме как да създадем основна таблица само с текст без стилове в част 1 на този урок, въпреки че на ниво код това е добре, на визуално ниво не ни показва организационната сила, която една таблица може да осигури на нашите данни, В нашите сайтове много пъти трябва да класифицираме данни, елементи, информация като цяло, за това можем да използваме добре изградена и представителна таблица.
Th елемент
Елементът th ни позволява да създаваме заглавки към нашата таблица, за да визуално идентифицираме нашите колони, както и td е син на tr. Нейните атрибути са: colspan, rowpan, обхват, заглавки, оттеглените атрибути в тази спецификация на HTML5 са както следва: abbr, ос, подравняване, ширина, char, charoff, valign, bgcolor, височина и nowrap, обхват, ако разгледаме подробно този елемент работи много подобно на td, неговата CSS конвенция е следната:

 th {дисплей: таблица-клетка; вертикално подравняване: наследяване; тегло на шрифта: удебелен; подравняване на текст: център; } 

Сега нека видим как да го използваме за изграждане на таблица с малко повече форматиране, отколкото бяхме правили преди:

 Пример 
 
 
Ранг
Ям
 
Цвят
Размер
 

 
 
Любими:
 
Ябълки
Зелено
Средно
 

 
 
2 -ри фаворит:
 
Портокали
Оранжево
Голям
 

 
 
3 -ти любим:
 
Нар
Един вид зелено-червено
 
Варира от среден до голям
 

 

 

Както видяхме в този пример, можем да поставим елемента th в рамките на tr, неговата функция е подобна на td, само че това се използва за генериране на заглавки, показаният код ни дава следната таблица в резултат:

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

Имаме две условия за th, и двамата започват, като ни казват, че са деца на trВъпреки това, първото, което поставяме, че подравняването му ще бъде вляво, ще има бели букви и фонът му ще бъде сив, във второто посочваме, че когато има само едно th за всеки tr, ще го подравним вдясно , ще поставим по -светъл сив фон и буквите ще бъдат по -тъмно сиви.
Нека видим получения код:

 Пример [b] [/ b] 
 
 
Ранг
Ям
Цвят
Размер
 

 
 
Любими:
Ябълки
Зелено
Средно
 

 
 
2 -ри фаворит:
Портокали
Оранжево
Голям
 

 
 
3 -ти любим:
Нар
Един вид зелено-червено
 
Варира от среден до голям
 

 

 

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

Както виждаме, този пример ни дава визия за това каква трябва да бъде една маса, но тя все още е далеч от перфектна. Какво би станало например, ако добавим други th, в информационния ред? Ще загубим формата, което ще ни накара да работим всеки път, когато таблицата промени структурата си.
За да се избегне това, има 3 елемента, които логически разделят таблицата, така да се каже, това са: thead, tbody, tfoot. С това, което видяхме, можем да разберем без много теоретични обяснения, така че нека преминем към практически пример за това.

 Пример 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Ранг
Ям
Цвят
Размер
 

 
 
Ранг
Ям
Цвят
Размер
 
 
Любими:
Ябълки
Зелено
Средно
 

 
 
2 -ри фаворит:
Портокали
Оранжево
Голям
 

 
 
3 -ти любим:
Нар
 
Един вид зелено-червено
Варира от среден до голям
 

 

 

 

Сега да видим резултата от това:

Както виждаме, това е по същество първото нещо, което направихме, сега в долната част на таблицата виждаме, че имаме заглавката еднакво, но в кода видяхме как те са две различни структури, както и съдържанието.
С това завършваме нашия урок за HTML5 таблици, трябва само да направим няколко упражнения и да практикуваме наученото.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка