1 of 11

Таблиці та списки на �веб-сторінках

2 of 11

Таблиці

<html>

<head><title>Вправа 5</title></head>

<body>

<h2>Результати шкільних олімпіад</h2>

<table border=2>

<tr><th>Учасник</th><th>Предмет</th><th> Бали</th></tr>

<tr><td>9-А клас</td><td >Математика</td> <td> 114</td></tr>

<tr><td>9-А клас</td><td>Фізика </td><td>81 </td></tr>

<tr><td>9-А клас</td><td colspan=2>Загальна кількість балів: 195</td></tr>

</table>

</body>

</html>

3 of 11

<table> - тег контейнерний парний містить таблицю

Атрибут

Значення

summary

Коротка інформація про призначення і структуру таблиці для браузерів, що виконують невізуальне подання документа.

Align

Вирівнювання таблиці відносно документа. Значення: left, center, right

width

Визначає ширину таблиці, якщо її не вказано то вибір іде автоматично, ширину можна вказувати у відсотках ширини вікна браузера.

4 of 11

атрибут

Значення

align

top – заголовок зверху (за умовчанням)

bottom – заголовок знизу

left – заголовок зліва

right – заголовок справа

Тег <caption> розташовується відразу після <table> містить назву таблиці

​

5 of 11

Елементи TR, TH, TD

TR – не має характерних атрибутів і є контейнером для клітинок таблиці, що містять один рядок (тег парний) {table row}

Клітинки задаються елементами TH (заголовки), TD (дані).

Атрибут

Значення

headers

Список заголовків клітинок. Значення атрибута розділений проміжками список заголовків клітинок

scope

Визначає набір клітинок даних, яких задається заголовок�row – в клітинці заголовок для останніх клітинок рядка

col - в клітинці заголовок для останніх клітинок стовпця�rowgroup - в клітинці заголовок для останніх рядків групи в якій є дана клітинка

colgroup – заголовок для останніх стовпців групи в якій є дана клітинка

rowspan

Визначає кількість рядків, які займає клітинка. За умовчанням – 1. 0 – означає , що клітинка займає всі рядки таблиці від даного до кінця.

colspan

Визначає кількість стовпців, які займає клітинка. За умовчанням – 1. 0 – означає , що клітинка займає всі стовпці таблиці від даного до кінця.

6 of 11

Групування клітинок

Елементи thead, tfoot, tbody

7 of 11

<html>

<head>

<title>таблиця з заголовками і тілом</title>

</head>

<body>

<table border="1" rules="groups">

<caption><em>приклад використання верхніх та нижніх заголовків та тіла таблиці</em></caption>

<thed>

<tr> <td>верхній заголовок 1

<td>верхній заголовок 2

<td>верхній заголовок 3</tr>

</thead>

<tfoot>

<tr> <td>нижній заголовок 1

<td>нижній заголовок 2

<td>нижній заголовок 3 </tr>

</tfoot>

<tbody>

<tr> <th colspan="3">the 1st row of the box 1</tr>

<tr> <th colspan="3">the 2nd row of the box 1</tr>

</tbody>

<tbody>

<tr> <th colspan="3">the 1st row of the box 2</tr>

<tr> <th colspan="3">the 2nd row of the box 2</tr>

<tr> <th colspan="3">the 3rd row of the box 2</tr>

</tbody>

</table>

</body>

</html>

8 of 11

<html>

<head>

<title>

Таблиця з групою стовпців

</title>

</head>

<body>

<table border=2>

<caption>

<em>Приклад групування за допомогою елемента

<h4>colgroup</h4></em>

</caption>

<colgroup span="3" width="100">

<colgroup span="2" width="0*">

<tr><td>101<td>20<td>30<td>41245<td>534</tr>

</table>

</body>

</html>

9 of 11

Списки

<HTML>

<HEAD>

<TITLE>НЕВПОРЯДКОВАНИЙ СПИСОК</TITLE>

</HEAD>

<BODY>

<H3>Шкільні предмети</H3>

<UL TYPE=disc>

<lh>Природничо-математичний цикл

<LI>Математика

<LI>Фізика

<li>Хімія

<li>Біологія

<li>Географія

</UL>

<UL TYPE=square>

<LH>Гуманітарний цикл

<LI>Право

<LI>Історія

<li>Мова

<LI>Література

</UL>

</BODY>

</HTML>

10 of 11

Елементи OL і UL. Теги контейнерні парні.

OL– впорядкований список

UL – невпорядкований список

Для форматування заголовка списку використовується тег <LH> контейнерний непарний; кожен пункт починається тегом <LI>

Атрибут

Значення

compact

Вказівка браузеру показати список у більш компактному вигляді (залежить від налагодження браузера)

type

Установка стилю списку�1 – маркер у вигляді арабських цифр

І – маркер у вигляді великих римських цифр�і – маркер у вигляді малих римських цифр

А – маркер у вигляді прописних букв�а – маркер у вигляді рядкових букв

start

Установка початкового маркера у поточному списку

<OL> - Тег контейнерний парний.

11 of 11

<UL> - тег контейнерний парний. Атрибути крім type відповідають тегу <OL>.

Атрибут

Значення

type

disc – маркер круг;

circle – маркер коло;

square – маркер квадрат.

Списки можна комбінувати!