Теги HTML - Вивчіть приклади тегів HTML таблиць із синтаксисом

• Вступ про теги таблиці Html

Вступ про теги таблиці Html

Таблиця HTML надає спосіб отримати або визначити такі дані, як текст, зображення, посилання тощо у вигляді рядків та стовпців комірок. Таблиці HTML можна створити за допомогою

тег. За замовчуванням дані таблиці залишаються вирівняними. У цій темі ми дізнаємось про теги HTML таблиць.

Таблицю можна створити за допомогою

теги.

• The

Тег визначає рядки таблиці, які використовуються для створення рядка.

Дані таблиці можна структурувати в межах

,	, і
Тег визначає заголовок таблиці. The	Тег визначає комірки даних таблиці, які використовуються для створення стовпця. The

зміст таблиці з численними елементами таблиці.

Синтаксис

Заголовок таблиці 1	Заголовок таблиці 2
Комірка даних 1	Комірка даних 2
Комірка даних 3	Комірка даних 4

Приклади тегів HTML таблиць

Ось приклади тегів HTML таблиці, наведені нижче

1. Основне використання таблиці



HTML Table Tag Usage



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Збережіть код із розширенням .html та відкрийте його у браузері. Він покаже наступний вихід:

2. Заголовок таблиці

Заголовок таблиці можна вказати за допомогою тегу < caption > .

Приклад



HTML Table Tag Usage



Це таблиця

Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Наведений вище код відобразить нижченаведений вихід:

3. Таблиця міжклітинних таблиць

Простір комірок таблиці може бути визначений за допомогою атрибута простору клітинок. Атрибут "cellpacing" визначає простір між клітинками таблиці.

Приклад



HTML Table Tag Usage



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Вищевказаний код відобразить наступний вихід:

4. Набивання стільникових стільників

Прокладка комірок таблиці може бути визначена за допомогою атрибута cellpadding. Відстань атрибута стільникового зв'язку між межами осередку таблиці та даними.

Приклад



HTML Table Tag Usage



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Наведений вище код відобразить нижченаведений вихід:

5. Атрибути стовпчика та рядка

Два або більше рядків таблиці можна об'єднати в один рядок за допомогою атрибута rowspan, а стовпці таблиці можна об'єднати в один стовпець за допомогою атрибута colspan.

Приклад



HTML Table Tag Usage



Колона перша	Колонка друга	Колонка третя
Ряд перший	Ряд другий	Ряд третій
	Ряд четвертий	Ряд п'ятий
Ряд шостий

Код відображатиме такий вихід:

6. Передумови для табл

Фон таблиці можна створити за допомогою атрибута bgcolor. Межу комірки таблиці можна вказати за допомогою атрибута color border.

Приклад



HTML Table Tag Usage



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Виконайте вищевказаний код, і він відобразить нижченаведений вихід:

7. Висота та ширина столу

Висоту та ширину таблиці можна встановити за допомогою атрибутів ширини та висоти.

Приклад



HTML Table Tag Usage



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Вищевказаний код відобразить наступний вихід:

8. Стилізація стільникових клітин

Приклад



HTML Table Tag Usage

table, th, td (
border: 1px solid red;
border-collapse: collapse;
)
th, td (
padding: 15px;
)
table#mytable tr:nth-child(even) (
background-color: #FAD7A0;
)
table#mytable tr:nth-child(odd) (
background-color: #E67E22;
)
table#mytable th (
color: white;
background-color: teal;
)



Ім'я	Країна
Дхоні	Індія
Девід Міллер	Південна Африка
Джо Корінь	Англія

Виконавши наведений вище код, ви отримаєте наступний вихід:

8. Вкладені таблиці

Можна використовувати одну таблицю всередині іншої таблиці, називається вкладеною таблицею.

Розглянемо нижченаведений приклад для вкладеної таблиці:

Приклад



HTML Table Tag Usage



Ім'я Країна Дхоні Індія Девід Міллер Південна Африка Джо Корінь Англія

Вищевказаний код відобразить наступний вихід:

Атрибути таблиці

• align: Цей атрибут забезпечує вирівнювання вмісту всередині елемента.
• bgcolor: Цей атрибут визначає колір фону для таблиці.
• межа: Цей атрибут визначає межу для комірок таблиці.
• cellpadding: Цей атрибут відображає прокладку між клітинками таблиці та вмістом таблиці.
• простір клітин: Цей атрибут відображає простір між клітинками таблиці.
• кадр: Вказує, які частини зовнішніх кордонів видно.
• правила: тут визначено, які частини внутрішніх меж видно.
• sortable: Цей атрибут повідомляє, що таблиця може бути сортована.
• Короткий зміст: Він містить тип вмісту таблиці.
• width: Цей атрибут вказує ширину таблиці.
• висота: Цей атрибут визначає висоту таблиці.

Висновок

Поки ми вивчали різні типи таблиць у HTML. На прикладах показано використання стилів таблиці, розміщення однієї таблиці в іншій таблиці, встановлення висоти та ширини таблиці, додавання інтервалу та прокладки для комірок таблиці, застосування кольору фону для таблиці та багато іншого.

Рекомендовані статті

Це посібник з тегів HTML таблиць. Тут ми обговорюємо приклади тегів HTML таблиць із синтаксисом та атрибутами таблиці. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Елементи форми HTML
2. Створіть таблиці в HTML
3. Теги зображень HTML
4. Що таке HTML
5. HTML Frames
6. HTML-блоки
7. Встановіть Колір фону в HTML із прикладом