1. Опанувати веб конспект
  2. Виконати інтерактивну вправу № 1
  3. Виконати практичне завдання № 1
  4. Виконати практичне завдання № 2

Малюємо таблиці

Тег <table> задає початок і кінець таблиці, будь-яка таблиця, як відомо, складається з рядків і стовпців, для малювання яких використовують ще два тега:

<tr> - рядок таблиці

<td> - стовбець таблиці

Приклад запису маленької таблиці, яка містить один рядок, який містить один стовпчик - клітинку

<html> <head> <title>Таблиця</title> </head> <body> <table border="1"> <tr> <td>клітинка</td> </tr> </table> </body></html>

Приклад запису таблиці, яка містить три рядка і три стовпця. Атрибут border (рамка) "малює" границю таблиці

<html> <head> <title>Таблиця</title> </head> <body> <table border="1"> <tr> <td>рядок1 клітинкка1</td> <td>рядок1 клітинкка2</td> <td>рядок1 клітинкка3</td> </tr> <tr> <td>рядок2 клітинкка1</td> <td>рядок2 клітинкка2</td> <td>рядок2 клітинкка3</td> </tr> <tr> <td>рядок3 клітинкка1</td> <td>рядок3 клітинкка2</td> <td>рядок3 клітинкка3</td> </tr> </table> </body></html>

colspan - об'єднання стовбчиків

rowspan - об'єднання рядків

Наприклад: Об'єднання стовбчиків

<table border="10" width="300px"> <tr> <td colspan="2">Рядок 1</td> </tr> <tr> <td width="50%">Рядок 2 Стовбчик 1</td> <td>Рядок 2 Стовбчик 2</td> </tr></table>

Результат

Наприклад: Об'єднання рядків

<table border="10" width="300px"> <tr> <td width="50%">Рядок 1 Стовбчик 1</td> <td rowspan="2">Рядок 1 Стовбчик 2</td> </tr> <tr> <td>Рядок 2 Стовбчик 1</td> /tr></table>

Результат

Виконати інтерактивну вправу № 1 "Атрибути для запису таблиці у HTML"

Pr_t2_y13-1.pdf
Pr_t2_y13-2.pdf