- Опанувати веб конспект
- Виконати інтерактивну вправу № 1
- Виконати практичне завдання № 1
- Виконати практичне завдання № 2
Малюємо таблиці
Малюємо таблиці
Тег <table> задає початок і кінець таблиці, будь-яка таблиця, як відомо, складається з рядків і стовпців, для малювання яких використовують ще два тега:
<tr> - рядок таблиці
<td> - стовбець таблиці
Приклад запису маленької таблиці, яка містить один рядок, який містить один стовпчик - клітинку
Приклад запису маленької таблиці, яка містить один рядок, який містить один стовпчик - клітинку
<html> <head> <title>Таблиця</title> </head> <body> <table border="1"> <tr> <td>клітинка</td> </tr> </table> </body></html>
Приклад запису таблиці, яка містить три рядка і три стовпця. Атрибут border (рамка) "малює" границю таблиці
Приклад запису таблиці, яка містить три рядка і три стовпця. Атрибут 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"
Виконати інтерактивну вправу № 1 "Атрибути для запису таблиці у HTML"
Pr_t2_y13-1.pdf
Pr_t2_y13-2.pdf