HTML таг за таблица се използва за показване на данни в табличен вид (ред * колона). Може да има много колони в един ред.

Можем да създадем таблица за показване на данни в таблична форма, като използваме

Във всяка таблица редът на таблицата се определя отетикет, заглавката на таблицата се определя от, а данните от таблицата се определят отетикети.

HTML таблиците се използват за управление на оформлението на страницата, напр. заглавна секция, лента за навигация, основно съдържание, секция за долен колонтитул и т.н. Но е препоръчително да използвате етикет div над таблицата, за да управлявате оформлението на страницата.

HTML таблични етикети

Пример за HTML таблица

Нека да видим примера за таг на HTML таблица. Изходът е показан по-горе.

 <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> 

Изход:

низ java indexof

В горната html таблица има 5 реда и 3 колони = 5 * 3 = 15 стойности.

HTML таблица с рамка

Има два начина за указване на рамка за HTML таблици.

1. Чрез атрибут на граница на таблица в HTML
2. Чрез свойство на границата в CSS

1) Атрибут HTML Border

Можете да използвате атрибута border на тага на таблицата в HTML, за да укажете граница. Но сега не се препоръчва.

 <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) Свойство CSS Border

Сега се препоръчва да се използва свойство border на CSS, за да се посочи граница в таблицата.

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

Можете да свиете всички граници в една граница чрез свойството border-collapse. Ще свие границата в една.

символ към низ

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

Изход:

HTML таблица с подпълване на клетки

Можете да зададете подпълване за заглавката на таблицата и данните от таблицата по два начина:

1. Чрез атрибут cellpadding на таблица в HTML
2. Чрез свойство за подпълване в CSS

Атрибутът cellpadding на тага на HTML таблица вече е остарял. Препоръчително е да използвате CSS. Така че нека видим кода на CSS.

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

Изход:

Ширина на HTML таблицата:

Можем да посочим ширината на HTML таблицата с помощта на CSS ширина Имот. Може да се посочи в пиксели или проценти.

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

 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> 

Изход:

HTML таблица с colspan

Ако искате клетката да обхваща повече от една колона, можете да използвате атрибута colspan.

Той ще раздели една клетка/ред на множество колони, а броят на колоните зависи от стойността на атрибута colspan.

Нека видим примера, който обхваща две колони.

CSS код:

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

HTML код:

 <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> 

Изход:

HTML таблица с размах на редове

Ако искате клетката да обхваща повече от един ред, можете да използвате атрибута rowspan.

регистър прехвърляне логика

Той ще раздели клетка на множество редове. Броят на разделените редове ще зависи от стойностите на rowspan.

Нека видим примера, който обхваща два реда.

CSS код:

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

HTML код:

 <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> 

Изход:

HTML таблица с надпис

HTML надписът се показва над таблицата. Трябва да се използва само след етикета на таблицата.

 <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> 

Оформяне на HTML таблица с четни и нечетни клетки

CSS код:

 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; } 

Изход:

ЗАБЕЛЕЖКА: Можете също така да създавате различни типове таблици, като използвате различни CSS свойства във вашата таблица.

Поддържащи браузъри

елемент	Chrome	IE	Firefox	Опера	Safari
	да	да	да	да	да