Назад Вперед Зміст

ПРАКТИЧНА РОБОТА № 10

Приклад складної таблиці на тему IT-технологій

Зразок таблиці з об'єднанням рядків і стовпців. Тема — порівняння мов програмування за різними критеріями.

Порівняння мов програмування
Мова Характеристики мови Основне застосування
Типізація Парадигма
Python Динамічна ООП, функціональна Data Science, AI
Інтерпретована Процедурна Веб-розробка
Java Статична ООП Enterprise, Android
JavaScript Динамічна Функціональна, ООП Frontend, Backend
C++ Статична ООП, процедурна Системне програмування
Показати HTML-код 
<table style="border: outset 8px #333; font-family: Arial; font-size: 12pt; text-align: center;">
  <!-- Заголовок таблиці -->
  <tr>
    <th colspan="4" style="border: outset 5px #333; background: #4CAF50; color: white; padding:15px;">Порівняння мов програмування</th>
  </tr>
  <!-- Дворівневий заголовок стовпців -->
  <tr>
    <th rowspan="2" style="border: outset 5px #333; background: #f2f2f2; font-weight: bold;">Мова</th>
    <th colspan="2" style="border: outset 5px #333; background: #f2f2f2; font-weight: bold;">Характеристики мови</th>
    <th rowspan="2" style="border: outset 5px #333; background: #f2f2f2; font-weight: bold;">Основне застосування</th>
  </tr>
  <tr>
    <th style="border: outset 5px #333; background: #f2f2f2; font-weight: bold;">Типізація</th>
    <th style="border: outset 5px #333; background: #f2f2f2; font-weight: bold;">Парадигма</th>
  </tr>
  <!-- Рядок Python: об'єднання двох рядків для мови -->
  <tr>
    <td rowspan="2" style="border: outset 5px #333; background: #e6f3ff;">Python</td>
    <td style="border: outset 5px #333;">Динамічна</td>
    <td style="border: outset 5px #333;">ООП, функціональна</td>
    <td style="border: outset 5px #333;">Data Science, AI</td>
  </tr>
  <tr>
    <td style="border: outset 5px #333;">Інтерпретована</td>
    <td style="border: outset 5px #333;">Процедурна</td>
    <td style="border: outset 5px #333;">Веб-розробка</td>
  </tr>
  <!-- Інші мови -->
  <tr>
    <td style="border: outset 5px #333; background: #e6f3ff;">Java</td>
    <td style="border: outset 5px #333;">Статична</td>
    <td style="border: outset 5px #333;">ООП</td>
    <td style="border: outset 5px #333;">Enterprise, Android</td>
  </tr>
  <tr>
    <td style="border: outset 5px #333; background: #e6f3ff;">JavaScript</td>
    <td style="border: outset 5px #333;">Динамічна</td>
    <td style="border: outset 5px #333;">Функціональна, ООП</td>
    <td style="border: outset 5px #333;">Frontend, Backend</td>
  </tr>
  <tr>
    <td style="border: outset 5px #333; background: #e6f3ff;">C++</td>
    <td style="border: outset 5px #333;">Статична</td>
    <td style="border: outset 5px #333;">ООП, процедурна</td>
    <td style="border: outset 5px #333;">Системне програмування</td>
  </tr>
</table>

Варіант 1

Тематика таблиці: Розклад уроків на тиждень.
Об'єднання ячеек: Верхній рядок — заголовок на всі колонки (colspan), дні тижня можуть мати rowspan для об'єднання однакових предметів.
  1. Таблиця – рамка – outset, товщина 10 пікселів, колір F0E68C;
  2. Клітинки – рамка outset, товщиною 5 пікселів, колір F0E68C;
  3. Вирівнювання – по центру, вертикальне – по середині, шрифт жирний.
  4. Перший рядок – зелений фон, білий текст;
  5. Другий рядок – білий фон, синій текст;
  6. Третій рядок – бірюзовий фон, білий текст;
  7. Четвертий рядок – білий фон, синій текст;
  8. Картинка 1.gif. Розміри 200px на 200px
  9. Відступи в клітинках 15 пікселів
  10. Фон у клітинці з картинкою F0E68C
Розклад уроків (понеділок - четвер)
Час Понеділок Вівторок Середа
8:00-9:30 Математика Фізика Хімія
Інформатика Біологія Географія
10:00-11:30
Фото класу
 Англійська Фізкультура
Показати HTML-код 
<table style="border: outset 10px #F0E68C;">
  <tr>
    <td colspan="4" style="border: outset 5px #F0E68C; background: green; color: white;">Розклад уроків (понеділок - четвер)</td>
  </tr>
  <tr>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Час</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Понеділок</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Вівторок</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Середа</td>
  </tr>
  <tr>
    <td rowspan="2" style="border: outset 5px #F0E68C; background: turquoise; color: white;">8:00-9:30</td>
    <td style="border: outset 5px #F0E68C; background: turquoise; color: white;">Математика</td>
    <td style="border: outset 5px #F0E68C; background: turquoise; color: white;">Фізика</td>
    <td style="border: outset 5px #F0E68C; background: turquoise; color: white;">Хімія</td>
  </tr>
  <tr>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Інформатика</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Біологія</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Географія</td>
  </tr>
  <tr>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">10:00-11:30</td>
    <td style="border: outset 5px #F0E68C; background: #F0E68C;">
      <div style="width:200px; height:200px; background:#eee;">Фото класу</div>
    </td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Англійська</td>
    <td style="border: outset 5px #F0E68C; background: white; color: blue;">Фізкультура</td>
  </tr>
</table>

Варіант 2

Тематика таблиці: Меню кафе.
Об'єднання ячеек: Ліва колонка — категорії страв (rowspan), також можна використати colspan для заголовка.
  1. Таблиця – рамка – outset, товщина 10 пікселів, колір 000080;
  2. Клітинки – рамка outset, товщиною 5 пікселів, колір 00FFFF;
  3. Вирівнювання – по центру, вертикальне – по середині, шрифт жирний.
  4. Перший рядок – синій фон, білий текст;
  5. Другий рядок – білий фон, синій текст;
  6. Третій рядок – бірюзовий фон, синій текст;
  7. Четвертий рядок – білий фон, синій текст;
  8. Картинка 2.jpeg. Розміри 200px на 200px
  9. Відступи в клітинках 15 пікселів
Меню кафе
Категорія Страва Ціна
Салати Олів'є 45 грн
Цезар 55 грн
Грецький 50 грн
Основні Борщ 35 грн
Котлета 40 грн
Показати HTML-код 
<table style="border: outset 10px #000080;">
  <tr>
    <td colspan="3" style="border: outset 5px #00FFFF; background: blue; color: white;">Меню кафе</td>
  </tr>
  <tr>
    <td style="border: outset 5px #00FFFF; background: blue; color: white;">Категорія</td>
    <td style="border: outset 5px #00FFFF; background: blue; color: white;">Страва</td>
    <td style="border: outset 5px #00FFFF; background: blue; color: white;">Ціна</td>
  </tr>
  <tr>
    <td rowspan="3" style="border: outset 5px #00FFFF; background: white; color: blue;">Салати</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">Олів'є</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">45 грн</td>
  </tr>
  <tr>
    <td style="border: outset 5px #00FFFF; background: turquoise; color: blue;">Цезар</td>
    <td style="border: outset 5px #00FFFF; background: turquoise; color: blue;">55 грн</td>
  </tr>
  <tr>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">Грецький</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">50 грн</td>
  </tr>
  <tr>
    <td rowspan="2" style="border: outset 5px #00FFFF; background: white; color: blue;">Основні</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">Борщ</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">35 грн</td>
  </tr>
  <tr>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">Котлета</td>
    <td style="border: outset 5px #00FFFF; background: white; color: blue;">40 грн</td>
  </tr>
</table>

Варіант 3

Тематика таблиці: Інформація про книги у бібліотеці.
Об'єднання ячеек: Перший рядок — заголовок (colspan), ліва колонка — rowspan для авторів, є додаткові об'єднання.
  1. Шрифт у всій таблиці arial, жирний. Розмір шрифту 14пт. У клітинці «Книги у бібліотеці» розмір шрифту 26пт, курсив.
  2. Вирівнювання – по центру.
  3. Рамка для всієї таблиці і клітинок: тип outset, колір 696969. Товщина 10 пікселів для всієї таблиці і 5 пікселів для клітинок.
  4. Відступи в клітинках 15 пікселів.
  5. Картинки школа.jpg і друзі.jpg. Розміри 275px на 200px. Рамки навколо картинок такі ж, як для клітинок.
  6. Колір тексту і колір фону:
Книги у бібліотеці
Автор Назва Рік Жанр
Джоан Роулінг Гаррі Поттер і філософський камінь 2001 Фентезі
Гаррі Поттер і таємна кімната 2002 Фентезі
Гаррі Поттер і в'язень Азкабану 2004 Фентезі
Тарас Шевченко Кобзар 1840 Поезія
Показати HTML-код 
<table style="border: outset 10px #696969; font-family: Arial; font-weight: bold; font-size: 14pt; text-align: center;">
  <tr>
    <td colspan="4" style="border: outset 5px #696969; background: #DDA0DD; color: #8A2BE2; padding:15px; font-size:26pt; font-style:italic;">Книги у бібліотеці</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Автор</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Назва</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Рік</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Жанр</td>
  </tr>
  <tr>
    <td rowspan="3" style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Джоан Роулінг</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Гаррі Поттер і філософський камінь</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">2001</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Фентезі</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Гаррі Поттер і таємна кімната</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">2002</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Фентезі</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Гаррі Поттер і в'язень Азкабану</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">2004</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Фентезі</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #DDA0DD; color: #8A2BE2; padding:15px;">Тарас Шевченко</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Кобзар</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">1840</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Поезія</td>
  </tr>
</table>

Варіант 4

Тематика таблиці: Структура комп'ютера (апаратне забезпечення).
Об'єднання ячеек: Верхній рядок — заголовок (colspan), ліва колонка — rowspan для категорій, є додаткові об'єднання в рядках.
  1. Шрифт у всій таблиці arial, жирний. Розмір шрифту 14пт. У клітинці «Структура комп'ютера» розмір шрифту 30пт, курсив.
  2. Вирівнювання – по центру.
  3. Рамка для всієї таблиці і клітинок: тип outset, колір 696969. Товщина 10 пікселів для всієї таблиці і 5 пікселів для клітинок.
  4. Відступи в клітинках 15 пікселів.
  5. Картинки Грифіндор.jpg, Когтевран.jpg, Пуффендуй.jpeg, Слизерин.jpg. Розміри 150px на 100px. Рамки навколо картинок такі ж, як для клітинок.
  6. Колір тексту і колір фону згідно з варіантом.
Структура комп'ютера
Категорія Компонент Призначення Зображення
Процесор Intel Core i7 Обробка даних [Фото]
AMD Ryzen Обробка даних [Фото]
Apple M1 Обробка даних [Фото]
Пам'ять RAM Тимчасове зберігання [Фото]
SSD Постійне зберігання [Фото]
Показати HTML-код 
<table style="border: outset 10px #696969; font-family: Arial; font-weight: bold; font-size: 14pt; text-align: center;">
  <tr>
    <td colspan="4" style="border: outset 5px #696969; background: #008000; color: #FFFF00; padding:15px; font-size:30pt; font-style:italic;">Структура комп'ютера</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: #FF4500; padding:15px;">Категорія</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: #FF4500; padding:15px;">Компонент</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: #FF4500; padding:15px;">Призначення</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: #FF4500; padding:15px;">Зображення</td>
  </tr>
  <tr>
    <td rowspan="3" style="border: outset 5px #696969; background: #F08080; color: #A52A2A; padding:15px;">Процесор</td>
    <td style="border: outset 5px #696969; background: #FFD700; color: #FF0000; padding:15px;">Intel Core i7</td>
    <td style="border: outset 5px #696969; background: #000080; color: silver; padding:15px;">Обробка даних</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #FFD700; color: #FF0000; padding:15px;">AMD Ryzen</td>
    <td style="border: outset 5px #696969; background: #000080; color: silver; padding:15px;">Обробка даних</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #FFD700; color: #FF0000; padding:15px;">Apple M1</td>
    <td style="border: outset 5px #696969; background: #000080; color: silver; padding:15px;">Обробка даних</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td rowspan="2" style="border: outset 5px #696969; background: #F08080; color: #A52A2A; padding:15px;">Пам'ять</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">RAM</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Тимчасове зберігання</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">SSD</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Постійне зберігання</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
</table>

Варіант 5

Тематика таблиці: Картини відомих художників.
Об'єднання ячеек: Верхній рядок — заголовок на всі колонки (colspan), ліва колонка — rowspan для художника, є додаткові об'єднання.
  1. Шрифт у всій таблиці arial, жирний. Розмір шрифту 14пт. У клітинці «Василь Тропінін» розмір шрифту 30пт, курсив.
  2. Вирівнювання – по центру.
  3. Рамка для всієї таблиці і клітинок: тип outset, колір 696969. Товщина 10 пікселів для всієї таблиці і 5 пікселів для клітинок.
  4. Відступи в клітинках 15 пікселів.
  5. Картинки Тропінін.jpg, Кружевниця.jpg, Гітарист.jpg, Жінка_у_вікні.jpg. Розміри 150px на 150px. Рамки навколо картинок такі ж, як для клітинок.
  6. Колір тексту і колір фону згідно з варіантом.
Василь Тропінін
Картина Рік створення Техніка Зображення
Картини Кружевниця 1823 [Фото]
Гітарист 1823 [Фото]
Жінка у вікні 1841 [Фото]
Автопортрет 1846 Олія [Фото]
Показати HTML-код 
<table style="border: outset 10px #696969; font-family: Arial; font-weight: bold; font-size: 14pt; text-align: center;">
  <tr>
    <td colspan="4" style="border: outset 5px #696969; background: #EEE8AA; color: #FF4500; padding:15px; font-size:30pt; font-style:italic;">Василь Тропінін</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: silver; color: #000080; padding:15px;">Картина</td>
    <td style="border: outset 5px #696969; background: silver; color: #000080; padding:15px;">Рік створення</td>
    <td style="border: outset 5px #696969; background: silver; color: #000080; padding:15px;">Техніка</td>
    <td style="border: outset 5px #696969; background: silver; color: #000080; padding:15px;">Зображення</td>
  </tr>
  <tr>
    <td rowspan="3" style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Картини</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Кружевниця</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">1823</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Гітарист</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">1823</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">Жінка у вікні</td>
    <td style="border: outset 5px #696969; background: #EEE8AA; color: black; padding:15px;">1841</td>
    <td style="border: outset 5px #696969; background: silver; color: #008000; padding:15px;">[Фото]</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #FF4500; color: #EEE8AA; padding:15px;">Автопортрет</td>
    <td style="border: outset 5px #696969; background: #FF4500; color: #EEE8AA; padding:15px;">1846</td>
    <td style="border: outset 5px #696969; background: #FF4500; color: #EEE8AA; padding:15px;">Олія</td>
    <td style="border: outset 5px #696969; background: #FF4500; color: #EEE8AA; padding:15px;">[Фото]</td>
  </tr>
</table>

Варіант 6

Тематика таблиці: Хімічні елементи та їх властивості.
Об'єднання ячеек: Верхній рядок — заголовок (colspan), перша колонка — rowspan для груп елементів, можливі додаткові об'єднання.
  1. Шрифт у всій таблиці arial, жирний. Розмір шрифту 14пт.
  2. Вирівнювання – по центру.
  3. Рамка для всієї таблиці і клітинок: тип outset, колір 696969. Товщина 10 пікселів для всієї таблиці і 5 пікселів для клітинок.
  4. Відступи в клітинках 15 пікселів.
  5. Картинки Брюллов.jpg, Останній день Помпеї.jpg і Вершниця.jpg. Розміри 210px на 195px. Рамки навколо картинок такі ж, як для клітинок.
  6. Колір тексту і колір фону згідно з варіантом.
Періодична таблиця (фрагмент)
Група Елемент Символ Атомний номер
Лужні метали Літій Li 3
Натрій Na 11
Калій K 19
Галогени Фтор F 9
Хлор Cl 17
Показати HTML-код 
<table style="border: outset 10px #696969; font-family: Arial; font-weight: bold; font-size: 14pt; text-align: center;">
  <tr>
    <td colspan="4" style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Періодична таблиця (фрагмент)</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Група</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Елемент</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Символ</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Атомний номер</td>
  </tr>
  <tr>
    <td rowspan="3" style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Лужні метали</td>
    <td style="border: outset 5px #696969; background: #DDA0DD; color: #8A2BE2; padding:15px;">Літій</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Li</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">3</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #DDA0DD; color: #8A2BE2; padding:15px;">Натрій</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">Na</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">11</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #DDA0DD; color: #8A2BE2; padding:15px;">Калій</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">K</td>
    <td style="border: outset 5px #696969; background: #8A2BE2; color: white; padding:15px;">19</td>
  </tr>
  <tr>
    <td rowspan="2" style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Галогени</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Фтор</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">F</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">9</td>
  </tr>
  <tr>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Хлор</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">Cl</td>
    <td style="border: outset 5px #696969; background: #E6E6FA; color: #696969; padding:15px;">17</td>
  </tr>
</table>

Назад Вперед Зміст