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

Post on 10 березня 2018

by Super User

in Уроки HTML

Таблиці - зручний спосіб відобразити на веб-сторінці якісь впорядковані об'єкти - зображення, цифри, текст. Як створюються html-таблиці, дивіться у статті...

Завдання до теми "html-таблиці" - натиснути, щоб перейти.

Таблиця складається з комірок, які утворюються внаслідок перетину рядків і стовбців (комірка - як клітинка зошита).

Теги для html-таблиць

Створення таблиці

<table></table>

Атрибути таблиці:

align - вирівнювання таблиці на сторінці (значення: left | center | right)

background - фоновий малюнок

bgcolor - колір фону таблиці

border - товщина рамка в пікселях

bordercolor - колір рамки

width - ширина таблиці

height - висота таблиці

cellpadding - відступ від рамка до вмісту комірки

cellspacing - відстань між комірками таблиці

cols - кількість колонок в таблиці

frame - спосіб відображення рамки навколо таблиці (значення: void - без рамки, border - рамка навколо таблиці "за замовчуванням", above - границі по верхньому краю таблиці, below - границі по нижньому граю, hsides - тільки горизонтальні границі зверху і знизу, vsides - тільки вертикальні границі зліва і справа від таблиці, rhs - границі тільки справа, lhs - границі тільки зліва)
rules - спосіб відображення рамок між комірками (значення: all - лінія навколо кожної комірки, groups - лінія між групами тегів <thead>, <tfoot>, <tbody>, <colgroup> або <col>, cols - лінія між колонками, none - без границь, rows - лінія між рядками, які створені через тег <tr>)
summary - короткий опис таблиці (не видно у броузері, застарілий, тому не використовується)

Створення рядків:

<tr></tr>

Створення стовбців:

<td></td>

Створення стовбця-заголовка:

<th></th>

Групи рядків:

<thead></thead> (щоб позначити "шапку" таблиці (назву стовбців)),

<tbody></tbody> (щоб позначити вміст таблиці),

<tfoot></tfoot> (щоб позначити підсумок даних, вказаних у таблиці)

Назва (заголовок, підпис) таблиці, він вказується після тегу <table>:

<caption></caption>

Форматування стовбців таблиці (зовнішній вигляд):

теги <colgroup></colgroup>, між ними

<col> з атрибутами span - кількість стовбців, для яких задається форматування, style - стиль форматування (наприклад, колір фону background-color, ширина width)

Приклад:

<colgroup>
   <col span="2" style="background-color:White;"> 
   <col style="width:100px;background-color:HotPink;"> 
   <col style="width:200px;background-color:DarkOrange;">
   <col style="background-color:Gold;">
</colgroup>

Завдання 1.
1. Створити основу html-сторінки:
набрати код:
<!DOCTYPE HTML>
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>
</body>
</html>
2. Замість тексту "Назва сторінки" вказати назву сторінки "Таблиця кращих комп'ютерних ігор".
3. Створити таблицю шириною 500px з 5 рядків, двох стовбчиків, назва таблиці "Топ 5 кращих комп'ютерних ігор"
Для цього після тегу <body> набрати код:

<table width="500px">
<caption>Топ 5 кращих комп'ютерних ігор</caption>
<tr>
<td>1</td>
<td>World of Warcraft</td>
</tr>
<tr>
<td>2</td>
<td>Black Desert</td>
</tr>
<tr>
<td>3</td>
<td>Leagua of Legends</td>
</tr>
<tr>
<td>4</td>
<td>Counter Strike</td>
</tr>
<tr>
<td>5</td>
<td>World of Tanks</td>
</tr>
</table>

Результат:

Завдання 2.
1. Створити основу html-файлу (як це зробити див. посилання http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html#1 )
2. Вказати назву сторінки "Таблиця ПОРИ РОКУ" (<title>Таблиця ПОРИ РОКУ</title> - пишеться у "голові" html-файлу)
3. Вказати заголовок першого рівня "Пори року" (<h1>Пори року</h1>)
4. Вказати, що створюється таблиця (<table></table>)
5. Вказати налаштування таблиці: ширина - 100%, ширина рамки - 1, відстань між комірками - 0px (змінити тег <table> ось так:<table width="100%" border="1" cellspacing="0px">)
6. Вказати заголовок таблиці "4 сезони" (<caption>4 сезони</caption>)
7. Створити у таблиці 4 рядки по 1 стовбчику, у комірках написати назви пір року (зима, весна, літо,осінь)
набрати код після тегу <table>:
<tr>
<td>Зима</td>
</tr>
<tr>
<td>Весна</td>
</tr>
<tr>
<td>Літо</td>
</tr>
<tr>
<td>Осінь</td>
</tr>
Результат:

Завдання 3.
1. Створити html-файл згідно завдання 2.
2. Вказати такі налаштуваня таблиці:
1) ширина таблиці 500px;
2) таблиця розміщена по центру сторінки;
3) ширина рамки 3px;
4) колір рамки #ADFF2F;
5) фон таблиці Green;
6) висота таблиці 300px;
7) слова у стовбчиках - по центру комірки.
3. Додаткове оформлення сторінки:
1) загальний шрифт сторінки Comic Sans MS;
2) заголовок першого рівня - по центру.
Результат:

Завдання 4.
1. Створити html-файл згідно завдання 3.
2. Переробити таблицю: замість 4 рядків зробити 2 рядка,у кожному рядку - по 2 стовбчики, пори року вказати у комірках.
3. Вказати такі налаштуваня таблиці:
1) ширина і висота таблиці 567px;
2) малюнок фону таблиці http://it-shkola.in.ua/images/html_lessons/11-03-18-table/4_seasons.jpg ;
3) витерти налаштування для рамки (товщина і колір), кольору фону таблиці, відстань між комірками.
4. Вказати розмір шрифта сторінки - 5.
Результат:

Завдання 5: створити сторінку з таблицею за зразком у вікні результату.

Результат:

Main menu

Мітки

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

Кольори html

Google Fonts

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

Свіже