HTML табеле

Објави Душко

Сви подаци на веб страници треба да буду представљени јасно и прегледно. Постоје различити начини како то можемо учинити. Већ смо помињали неки од ових начина, као што су ознаке <p> и <h1>. Али понекад то неће бити довољно, можда ће нам требати бољи начин да прикажемо податке тачније и сређеније.

У ову сврху користимо табеле, и оне се сматрају једним од најбољих начини представљања података. Некада су се табеле користиле за израду структуре веб страница. Сада то чини CSS.

Табеле распоређују податке у редове (rows) и колоне (columns). У HTML-у, ознака <table> се користи за креирање табеле. Постоји такође неколико других ознака и атрибута који су неопходни за креирање одговарајућих табела у HTML-у. У овоме у поглављу ћемо разговарати о томе како направити једноставну табелу у HTML-у.

Где је што
  1. table таг
  2. tr и td тагови
  3. Оквир или ивица табеле
  4. Colspan – распон колона и rowspan – распон редова атрибути
  5. th таг
  6. thead и tbody
  7. Закључак

table таг

<table> таг сам по себи не приказује ништа.

HTML табеле - <table> таг.

<table> таг само дефинише табелу. Морамо да направимо редове и колоне ручно.

HTML има ознаку <tr> (table row)  и ознаку <td> (table data) за креирање реда и колоне, тим редом.

tr и td тагови

Као што је поменуто, ознака <tr> креира ред. Постављена је унутар <table> тага.

HTML табеле - <tr> и <td> тагови.

Горња табела има само један ред. Хајде да додамо две колоне у овај ред користећи ознаку <td>.

HTML табеле - <tr> и <td> тагови.

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

HTML табеле - <tr> и <td> тагови.
HTML табеле - <tr> и <td> тагови.

Ово не личи на табелу. У ствари, не личи ни на шта, зар не? То је зато јер подразумевано табела у HTML-у нема никакву границу, оквир или border. Овде морамо позвати у помоћ CSS јер је он неопходан за додавање ивице или оквира табели.

Оквир или ивица табеле

Још увек нисмо разговарали о CSS-у али ћемо и поред тога додати неке ивице у табели коришћењем мало CSS-а.

HTML табеле - Оквир или ивица табеле.

Шта смо овде урадили? У ознаку <head> смо додали <style> таг и у њему зачинили наш код са нешто CSS-а. Занемарите овај део за сада. О томе ћемо разговарати касније у одељку о CSS-у. За сада се фокусирајте на то како табела изгледа у претраживачу.

HTML табеле - Оквир или ивица табеле.

Сада већ на нешто личи и изгледа као табела. Додат је и други ред, као што се види.

Colspan – распон колона и rowspan – распон редова атрибути

Табеле много зависе од CSS-а. Са CSS-ом табеле изгледају атрактивније и боље, али HTML такође пружа неке лепе атрибуте који се могу користити са табелама. Један од ових атрибута је colspan атрибут. Colspan атрибут повећава распон ћелије према наведеној вредности.

HTML табеле - colspan и rowspan атрибути.

Прва ћелија првог реда има colspan или распон од 2.

HTML табеле - colspan и rowspan атрибути.

Можете видети да ћелија сада покрива површину од две колоне. Атрибут colspan може имати било коју вредност, али га треба користити пажљиво или резултат може бити катастрофалан. Слично овоме, rowspan или распон редова користи се за повећање распона реда.

th таг

Ознака <th> се користи за креирање заглавља. Понаша се као <td> са том разликом што је садржај подебљан.

HTML табеле - <th> таг.

Сада видимо да први ред има заглавља уместо нормалних ћелија.

HTML табеле - <th> таг.

Видите, текст је подебљан у заглављима.

thead и tbody

Ознаке <thead> и <tbody> се користе за груписање head и body дела табеле.

Креирана табела има три реда – први ред има заглавља, а друга два имају колоне. Дакле, први се може написати унутар <thead> тага а други се уписују унутар ознаке <tbody>.

HTML табеле - <thead> и <tbody>.

Ове ознаке неће утицати на табелу, али је добра пракса да групишете редове табеле у HTML-у.

Закључак

● Табеле се користе за распоређивање података у редове и колоне.

● HTML користи <table> таг за креирање табела.

● <tr> таг креира ред док <td> тагом правимо ћелију или колону.

● <th> таг можемо такође користии уместо <td> тага. Он дефинише наслов колоне без болдовања елемента.

● colspan и rowspan атрибути се користе да повећају распон ћелије или реда, према назначеним вредностима.

● <thead> и <tbody> ознаке групишу редове у заглављу и телу табеле.

Где је што
  1. table таг
  2. tr и td тагови
  3. Оквир или ивица табеле
  4. Colspan – распон колона и rowspan – распон редова атрибути
  5. th таг
  6. thead и tbody
  7. Закључак

Претходно:

HTML слике

Категорије: HTMLWeb дизајн

0 коментара

Оставите одговор

Avatar placeholder

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

Повезани чланци

HTML форме
HTML

HTML форме

HTML форме или обрасци су један од најважнијих делова веб странице јер се користе за интеракцију корисника. Гледано очима програмера, форме омогућавају дијалог са корисницима и посетиоцима веб локације. Користимо их за избор различитих врста Прочитај више…

HTML

HTML листе

У прошлом одељку смо рекли да су табеле један од најчешћих начина за приказивање података. Постоје и други начини. Данас и овде ћемо говорити о још једном начину за представљања података – о листама. HTML Прочитај више…

HTML

HTML слике

У давна времена, на самим својим почецима, интернет је био само суви текст, и као такав, био је поприлично незанимљив и досадан за данашње укусе. На сву срећу, појављују се недуго затим слике и други Прочитај више…

.copyright.pull-right { display: none; }