Таблиці на вебсторінках
Таблиці на вебсторінках
Embedded Files
Перебіг уроку
Перебіг уроку
Опанувати веб конспект
Виконати інтерактивну вправу № 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 width="50%">Рядок 1 Стовбчик 1</td>
<td rowspan="2">Рядок 1 Стовбчик 2</td>
</tr>
<tr>
<td>Рядок 2 Стовбчик 1</td>
/tr>
</table>
Практичні завдання уроку. Тема.Таблиці у HTML.
Практичні завдання уроку. Тема.Таблиці у HTML.
Завдання 1.Створити таблицю засобами мови HTML
Хід онлайн практичного завдання
Хід онлайн практичного завдання
2) Відкрити сторінку з HTML текстом index5 або для тих хто виконує завдання за допомогою телефону https://docs.google.com/document/d/1zNAf8ZaKJyk_1kV3bC_e5ctHW8bx6n1aCoIGHw-z970/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
2) Відкрити сторінку з HTML текстом index5 або для тих хто виконує завдання за допомогою телефону https://docs.google.com/document/d/1zNAf8ZaKJyk_1kV3bC_e5ctHW8bx6n1aCoIGHw-z970/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
3) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
3) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
Заходимо по посиланню
Ввести скопійований HTML текст сторінки index 5
Натиснути RUN
Переглянути результат
Натиснути Save
Скопіювати згенероване посилання і надіслати викладачеві
Завдання 2.Створити таблицю засобами мови HTML
Хід онлайн практичного завдання
Хід онлайн практичного завдання
або
2) Відкрити сторінку з HTML текстом index 6 або для тих, хто виконує завдання за допомогою телефону https://docs.google.com/document/d/1rS6uDOhwj-JELkdbFypr0chgw1-wKjoFjHbh4U31mMI/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
2) Відкрити сторінку з HTML текстом index 6 або для тих, хто виконує завдання за допомогою телефону https://docs.google.com/document/d/1rS6uDOhwj-JELkdbFypr0chgw1-wKjoFjHbh4U31mMI/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
3)У рядку пошуку ввести назви тварин з таблиці, обрати Зображення, ПКМ скопіювати адресу зображення і вставити у атрибут src="адреса зображення"
6) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
6) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
Результат
Завдання 3.Створити таблицю засобами мови HTML
Хід онлайн практичного завдання
Хід онлайн практичного завдання
або
2) Відкрити сторінку з HTML текстом index 7 або для тих хто виконує завдання за допомогою https://docs.google.com/document/d/1I1blPOaYXFUT9oAFnA7iYPKFNFWiPvr9ge0zTXWUz8g/edit?usp=sharing
2) Відкрити сторінку з HTML текстом index 7 або для тих хто виконує завдання за допомогою https://docs.google.com/document/d/1I1blPOaYXFUT9oAFnA7iYPKFNFWiPvr9ge0zTXWUz8g/edit?usp=sharing
телефону скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
телефону скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
3)У адресному рядку ввести адреси вебсторінок з роботами з таблиці, ПКМ скопіювати адресу зображення і вставити у атрибут src="адреса зображення"
3) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
3) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
результат
Page updated
Google Sites
Report abuse