Табеле¶

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

Табеле представљају податке организоване у облику редова и колона.

Први ред у табели садржи називе колона и назива се заглавље (енгл. heading) табеле. Испод овог реда се налазе редови који садрже податке у својим ћелијама (енгл. cells).

Табела је сложени HTML елемент, који садржи више других елемената различитих врста. HTML елементи садржани у табели представљају различите делове табеле (заглавље, остали редови, ћелије).

Цела табела је окружена тагом <table>. Унутар сваке табеле се налази заглавље (елемент <thead>) и тело (елемент <tbody>). Унутар заглавља и тела се налазе редови.

 <table>
     <thead>
         ...
     </thead>
     <tbody>
         ...
     </tbody>
 </table>

Ред се описује елементом <tr> и у њему се налазе ћелије колона табеле.

Унутар заглавља табеле, ћелије табеле су окружене елементом <th> и биће приказане подебљаним текстом.

 <thead>
     <tr>
         <th>Назив</th>
         <th>Земља</th>
         <th>Година</th>
     <tr>
 </thead>

Унутар тела табеле (<tbody>), ћелије табеле су окружене елементом <td>.

 <tbody>
     …
     <tr>
         <td>Орден Светог Саве</td>
         <td>Србија</td>
         <td>1892</td>
     </tr>
     …
 </tbody>

Опционо се може додати и подножје користећи елемент <tfoot> и поднаслов табеле (енгл. caption), користећи елемент <caption>.

Табела која приказује ордење које је добио Никола Тесла и која има три колоне и три реда је приказана у следећем примеру:

Атрибут border са вредношћу solid 1px описује да ивице табеле и ћелија треба да буду једнобојне (енгл. solid) величине једног пиксела.