Табеле у ХТМЛ5 - 2. део

Већ смо видели како да направимо основну табелу само са текстом без стилова у првом делу овог водича, иако је на нивоу кода то у реду, на визуелном нивоу не показује нам организациону моћ коју табела може пружити нашим дата, На нашим веб локацијама много пута морамо класификовати податке, елементе, информације уопште, за то можемо користити добро конструисану и репрезентативну табелу.
Тх елемент
Елемент тх омогућава нам да креирамо заглавља у нашој табели како бисмо визуелно идентификовали и наше колоне тд је син тр. Његови атрибути су: цолспан, распон редова, опсег, заглавља, застарели атрибути у овој ХТМЛ5 спецификацији су следећи: аббр, акис, алигн, видтх, цхар, цхарофф, валигн, бгцолор, хеигхт, анд новрап, сцопе, ако погледамо детаљно овај елемент функционише врло слично тд, његова ЦСС конвенција је следећа:

 тх {дисплаи: табле-целл; вертикално поравнати: наследити; фонт-веигхт: болд; поравнање текста: центар; } 

Хајде сада да видимо како да га употребимо за прављење табеле са нешто више форматирања него што смо то претходно радили:

 Пример 
 
 
Ранк
Иам
 
Боја
Величина
 

 
 
Омиљено:
 
Јабуке
Зелен
Средње
 

 
 
2. омиљена:
 
Наранџе
Оранге
Велики
 

 
 
3. омиљена:
 
Шипак
Нека врста зелено-црвене боје
 
Варира од средњих до великих
 

 

 

Као што смо могли видети у овом примеру, можемо поставити елемент тх у оквиру тр, његова функција је слична тд, само што се ово користи за генерисање заглавља, приказани код нам даје следећу табелу као резултат:

Наша табела почиње да изгледа много боље, међутим и даље је врло основна, а информације нису јасне колико би требало да буду, на пример заглавља и садржај не одговарају на добар начин, а визуелно је тешко разликовати који којој припада, јер ћемо користити ЦСС и видећемо како ћемо у великој мери решити ову ситуацију.
За ово ћемо користити следеће:

Имамо два услова за тх, обоје почињу говорећи нам да су њихова деца трМеђутим, први који стављамо тако да ће његово поравнање бити лево, имаће бела слова, а позадина ће бити сива, у другом означавамо да ћемо га, када постоји само један тх за сваки тр, поравнати десно , поставићемо светлију сиву позадину, а слова ће бити тамније сива.
Погледајмо резултирајући код:

 Пример [б] [/ б] 
 
 
Ранк
Иам
Боја
Величина
 

 
 
Омиљено:
Јабуке
Зелен
Средње
 

 
 
2. омиљена:
Наранџе
Оранге
Велики
 

 
 
3. омиљена:
Шипак
Нека врста зелено-црвене боје
 
Варира од средњих до великих
 

 

 

Погледајмо сада резултат овог кода и примијетићемо како је на овај начин наша табела много организованија и можемо разликовати којој колони припадају сваки податак.

Као што видимо, овај пример нам даје визију о томе какав би сто требао бити, међутим још увек је далеко од савршеног. На пример, шта би се догодило, ако додамо још нешто тх, у реду са информацијама? Изгубили бисмо формат, због чега бисмо радили сваки пут када табела промени своју структуру.
Да бисте то избегли, постоје 3 елемента која логички деле табелу, да тако кажем, то су: тхеад, тбоди, тфоот. Са оним што смо видели, можемо разумети без много теоријског објашњења, па пређимо на практичан пример овога.

 Пример 
 [б] 

 [/ б] 

 [б] [/ б] 

 [б] 

 [/ б] 
 
Ранк
Иам
Боја
Величина
 

 
 
Ранк
Иам
Боја
Величина
 
 
Омиљено:
Јабуке
Зелен
Средње
 

 
 
2. омиљена:
Наранџе
Оранге
Велики
 

 
 
3. омиљена:
Шипак
 
Нека врста зелено-црвене боје
Варира од средњих до великих
 

 

 

 

Погледајмо сада резултат овога:

Као што видимо, то је у суштини прва ствар коју смо урадили, сада при дну табеле видимо да имамо заглавље подједнако, међутим у коду смо видели како су то две различите структуре, као и садржај.
Овим завршавамо наше упутство за ХТМЛ5 табеле, морамо само да урадимо неколико вежби и увежбамо оно што смо научили.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен