ХТМЛ ознака табеле користи се за приказ података у табеларном облику (ред * колона). Може бити много колона у низу.

Можемо креирати табелу за приказ података у табеларном облику, користећи

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

ХТМЛ табеле се користе за управљање изгледом странице нпр. одељак заглавља, трака за навигацију, садржај тела, одељак подножја итд. Али препоручује се коришћење див ознаке преко табеле за управљање изгледом странице.

Ознаке ХТМЛ табеле

Пример ХТМЛ табеле

Погледајмо пример ознаке ХТМЛ табеле. Његов излаз је приказан изнад.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Излаз:

тестирање компатибилности

У горњој хтмл табели има 5 редова и 3 колоне = 5 * 3 = 15 вредности.

ХТМЛ табела са ивицом

Постоје два начина да одредите ивицу за ХТМЛ табеле.

1. По атрибуту границе табеле у ХТМЛ-у
2. По својству границе у ЦСС-у

1) Атрибут ХТМЛ Бордер

Можете користити атрибут границе ознаке табеле у ХТМЛ-у да бисте одредили ивицу. Али сада се то не препоручује.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Излаз:

2) ЦСС Бордер својство

Сада се препоручује да користите својство границе ЦСС-а да бисте навели границу у табели.

 table, th, td { border: 1px solid black; } 

Можете срушити све границе у једној ивици помоћу својства срушити границе. То ће срушити границу у једно.

мини трака са алаткама екцел

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Излаз:

ХТМЛ табела са попуњавањем ћелија

Заглавље табеле и податке табеле можете одредити на два начина:

1. По атрибуту целлпаддинг табеле у ХТМЛ-у
2. Додавањем својства у ЦСС-у

Атрибут целлпаддинг ознаке ХТМЛ табеле је сада застарео. Препоручљиво је користити ЦСС. Па да видимо код ЦСС-а.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Излаз:

Ширина ХТМЛ табеле:

Можемо одредити ширину ХТМЛ табеле користећи ЦСС ширина имовина. Може се одредити у пикселима или процентима.

Можемо да прилагодимо ширину наше табеле према нашим захтевима. Следи пример за приказ табеле са ширином.

 table{ width: 100%; } 

Пример:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Излаз:

ХТМЛ табела са колспаном

Ако желите да распон ћелије буде више од једне колоне, можете користити атрибут цолспан.

Поделиће једну ћелију/ред на више колона, а број колона зависи од вредности атрибута цолспан.

Хајде да видимо пример који обухвата две колоне.

ЦСС код:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

ХТМЛ код:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Излаз:

ХТМЛ табела са распоном редова

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

нпм кеш брисање

Поделиће ћелију у више редова. Број подељених редова зависиће од вредности распона редова.

Погледајмо пример који обухвата два реда.

ЦСС код:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

ХТМЛ код:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Излаз:

ХТМЛ табела са натписом

ХТМЛ наслов је приказан изнад табеле. Мора се користити само након ознаке табеле.

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Стилизовање ХТМЛ табеле парних и непарних ћелија

ЦСС код:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Излаз:

НАПОМЕНА: Такође можете креирати различите типове табела користећи различита ЦСС својства у вашој табели.

Подржава претраживаче

Елемент	Хром	ИЕ	Фирефок	Опера	Сафари
	да	да	да	да	да