Тег таблиці 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> 

Вихід:

скільки там фруктів

У наведеній вище html-таблиці є 5 рядків і 3 стовпці = 5 * 3 = 15 значень.

Таблиця HTML з рамкою

Існує два способи вказати межі для таблиць HTML.

1. За атрибутом border таблиці в HTML
2. За властивістю border у 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. Це згорне межу в одну.

яка колекція в java

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

Вихід:

Таблиця HTML із заповненням клітинок

Ви можете вказати відступ для заголовка таблиці та даних таблиці двома способами:

1. За атрибутом cellpadding таблиці в HTML
2. За допомогою властивості padding у 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> 

Вихід:

do while java

Таблиця 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	Опера	Сафарі
	Так	Так	Так	Так	Так