Тема 11 Таблиці. Частина 2.

Таблиці. Частина 2.

Пояснення:

Створення складної таблиці

За допомогою атрибуту colspan та rowspan можна розтягнути комірки. Вони записуються в тегах <td> та <th>.
Нижче на прикладі ми вкажемо властивість colspan="", вона об'єднює клітинки по стовпчиках.

Нижче на прикладі ми вкажемо властивість rowspan="", вона об'єднює клітинки по рядках.

Використання атрибутів colspan та rowspan в одній таблиці

Розлянемо приклад використання цих двох властивостей в одній таблиці, використавши їх.

Властивість text-align для різних елементів на сторінці

За допомогою властивості text-align: в стилізації розміщуємо таблицю,клітинки та клітинки-заголовки по центрі.

Використання атрибутів зовнішнього та внутрішнього відступів у таблиці

За допомогою атрибутів cellpadding та cellspacing збільшимо відступи між елементами таблиці.

Таблиця:

№	Тема	Приклад коду	Підсумок
1	colspan	`<body> <table> <tr> <td colspan="2">Об’єднана клітинка</td> </tr> </table> </body>`	colspan дозволяє одній клітинці охоплювати кілька колонок таблиці.
2	rowspan	`<body> <table> <tr> <td rowspan="2">Об’єднана клітинка</td> </tr> </table> </body>`	rowspan дозволяє одній клітинці охоплювати кілька рядків таблиці.
3	rowspan і colspan одночасно	`<body> <table> <tr> <td rowspan="2" colspan="3">Об’єднана клітинка</td> </tr> </table> </body>`	Клітинка може одночасно об’єднувати декілька рядків і колонок.
4	cellspacing	`<body> <table cellspacing="10">...</table> </body>`	Відстань між клітинками таблиці.
5	cellpadding	`<body> <table cellpadding="10">...</table> </body>`	Відстань між вмістом клітинки і її рамкою.
6	border-collapse: collapse	`<style> table {border-collapse: collapse;} </style>`	Робить суміжні рамки клітинок спільними, без проміжків між ними.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC