Main menu

  2. Головна
  3. Уроки HTML
  4. Урок "складні html-таблиці"

Мітки

Базовий html-код

Кольори html

Цвета HTML https://colorscheme.ru/html-colors.html 

Google Fonts

Урок "складні html-таблиці"

Post on 17 березня 2018
by Super User
in Уроки HTML

Про складні таблиці - у продовженні теми "html-таблиці"...

Тег <td> має атрибути (властивості), які дають можливість створити складну таблицю:
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>
Результат:

Рядок 1
Рядок 2 Стовбчик 1 Рядок 2 Стовбчик 2


Об'єднання рядків
<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 Стовбчик 1 Рядок 1 Стовбчик 2
Рядок 2 Стовбчик 1

 

 Завдання 1
1. Створити основу html-сторінки.
2. Вказати назву сторінки "Складні таблиці" (<title>Складні таблиці</title>). 
3. Між тегами <body></body> вставити текст:

<table align="center" width="50%" border="10">
<tr><td colspan="2">Кольори</td></tr>
<tr>
<td>1
</td>
<td width="50%">Синій
</td>
</tr>
<tr>
<td>2
</td>
<td>Жовтий
</td>
</tr>
</table>

4. Результат:

Кольори
1 Синій
2 Жовтий


Завдання 2.

1. Створити основу html-сторінки.
2. Вказати назву сторінки "Складні таблиці 2" (<title>Складні таблиці 2</title>). 
3. Між тегами <body></body> вставити текст:

<table align="center" width="50%" border="10">
<tr>
<td rowspan="2">Кольори
</td>
<td width="50%">Синій
</td>
</tr>
<tr>
<td>Жовтий
</td>
</tr>
</table>

4. Результат:

Кольори Синій
Жовтий


Завдання 3.
1. Виконати завдання 1.
2. Заповнити комірки таблиці такими даними: Синій, Жовтий, Червоний, Зелений.
3. Вказати фон для комірок таблиці: для комірки "Синій" фон Blue, для комірки "Жовтий' фон Yellow, для комірки "Червоний" фон Red, для комірки "Зелений" фон Green.

Завдання 4.
Створити таблицю за зразком:


Завдання 5.
1. Перед виконанням завдання у робочій папці створити папку images (якщо її ще немає).
2. У папку images скачати ЧОТИРИ файли: http://it-shkola.in.ua/images/html_lessons/18-03-18-table3/1.gif , http://it-shkola.in.ua/images/html_lessons/18-03-18-table3/ivasik.jpg , http://it-shkola.in.ua/images/html_lessons/18-03-18-table3/4.jpg , http://it-shkola.in.ua/images/html_lessons/18-03-18-table3/darinka.jpg 
3. Вказати фон сторінки DarkGreen.
4. Заголовок РОБОТИ MBOTS - заголовок першого рівня (найважливіший).
5. Колір фону таблиці - білий White, вирівнювання таблиці - по центру, ширина таблиці - 50%, товщина рамки - 10, ширина стовбчиків - по 50%, висота рядків - 100px, ширина малюнків у таблиці - по 100px.
6. Створити сторінку за зразком:


Бонусний рівень:
На сторінці, створеній у завданні 5, можна створити просту html-анімацію за допомогою парного тегу <marquee></marquee>
1. Для анімації заголовка напишіть перед ним тег з такими налаштуваннями:
<marquee bgcolor="LimeGreen" behavior="alternate" direction="left" scrollamount="6">
Після заголовка не забудьте написати закриваючий тег </marquee>
2. Для анімації робота, напишіть перед ним тег з такими налаштуваннями:
<marquee behavior="alternate" direction="right" scrollamount="50">
Після тега зображення не забудьте написати закриваючий тег </marquee>
3. Для анімації таблиці, напишіть перед ним тег з такими налаштуваннями:
<marquee behavior="slide" direction="left" scrollamount="10">
Після таблиці не забудьте написати закриваючий тег </marquee>
Результат - див. посилання http://it-shkola.in.ua/images/html_lessons/18-03-18-table3/index-robot2.html 

Більше про цей тег - за посиланням http://htmlbook.ru/html/marquee  

Свіже