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

Таблиця складається з рядків і стовпців вічок, які можуть містити текст і малюнки. Таблиці використовуються для впорядкування і представлення даних.

Для додавання таблиці на веб-сторінку використовується тег <table>.
Таблица повинна містити хоч би один рядок і колонку.

Задати ширину таблиці можна в пікселах і відсотках.

Значення, задане в пікселах, є фіксованим значенням.
В цьому прикладі ширина завжди займатиме 250 пікселів у вікні браузеру.

<table width="250"> </table>

Приклад найпростішої таблиці, що має всього один рядок і одну колонку:

Привіт:-)  

Ця табличка у вигляді коду виглядає так:

<table border=1 width="250">
<tr>
<td>
Привіт:-)
</td>
</tr>
</table>

Для додавання рядків використовуються теги <tr> і </tr>.
Щоб розділити рядки на колонки застосовуються теги <td> і </td>.

Таблиця з двома колонками (використовуваний теги <td> і </td>):

Привіт:-)

Пока!

Вона має наступний код:

<table border=1>
<tr>
<td> Привіт:-)</td>
<td> Поки! </td>
</tr>
</table>

Для додавання рядків використовуються теги <tr> і </tr>
Дана таблиця має два рядки і два стовпці:

Весна	Літо
Зима	Осень

Код таблиці виглядатиме таким чином:

<table>
<tr>
<td>Весна</td>
<td>Лето</td>
</tr>
<tr>
<td>Зима</td>
<td>Осень</td>
</tr>
</table>

Параметри таблиці

Для зміни вигляду і властивостей таблиці використовується безліч параметрів, які додаються в тегу <table>

<table параметр1=... параметр2=...>

Параметр	Значення	Опис	Приклад	Дивитеся
align=	left right center	Вирівнювання таблиці	align=center
width=	n n%	Мінімальна ширина таблицы, можна задавати в пикселах або відсотках	width=50%
height=	n n%	Мінімальна висота таблицы, можна задавати в пикселах або відсотках	height=50%
background=	URL	Фоновий малюнок	background=pic.gif
bgcolor=	#rrggbb	Колір фону таблиці	bgcolor=#FF9900 bgcolor=yellow
border=	n	Товщина рамки в пікселах	border=8
bordercolor=	#rrggbb	Колір рамки	bordercolor=#FE0202
cellpadding=	n	Відстань між вічком и її вмістом	cellpadding=7
cellspacing=	n	Дистанція між вічками	cellspacing=15
frame=	void above below lhs rhs hsides vsides box	Завдання типа рамки таблиці	frame=hsides

Параметри комірок

За допомогою параметрів комірок можна змінювати вигляд і оформлення таблиць.

Параметри, які можуть бути додані до тегам <tr> і <td>.

Параметр	Значення	Опис	Приклад	Дивитеся
align=	left right center	Вирівнювання вмісту вічка	align=center
background=	URL	Встановлює фоновий рисунок у вічку	background=pic.gif
bgcolor=	#rrggbb	Колір фону вічка	bgcolor=#FF9900
valign=	top bottom	Вирівнювання вмісту ячейки по висоті	valign=top
width=	n n%	Мінімальна ширина ячейки, можно задавати в пікселах или відсотках	width=30%
height=	n n%	Мінімальна висота вічка можно задавати в пікселах или відсотках	height=30%

Параметри, які можуть бути додані лише до тегу <td>.

Параметр	Значення	Опис	Приклад	Дивитеся
colspan=	n	Встановлює розмір вічка относительно нижче розташованих колонок; colspan=2 означає, що ширина ячейки відповідатиме ширині двох колонок.	colspan=2
rowspan=	n	Розмір вічок по вертикалі відносно рядків. rowspan=2 устанавливает, что висота вічка відповідає высоте двох рядків	rowspan=2

Приклад таблиці.

Пори року	Весна	Літо
Осінь	Зима

Розглянемо її код:

<table border=5 bordercolor=#FAD0D0 cellpadding=7 width=40%>
<tr>
<td rowspan=2 align=center><b>Времена года</b></td>
<td width=20%>Весна</td>
<td width=20%>Лето</td>
</tr>
<tr>
<td>Осень</td>
<td>Зима</td>
</tr>
</table>

В даному випадку було задано для всієї таблиці:

· border=5 - толщина рамки таблиці в 5 пікселів;

· bordercolor=#FAD0D0 - колір рамки таблиці розовий;

· cellpadding=7 – відстань між комірками і їх змістом;

· width=40% - ширина таблиці в процентах від всього вікна браузера;

Для комірок

· width=20% - ширина комірки від всієї ширини таблиці. Ширина комірки "Весна" будет равною шириніе комірки "Осень".

· align=center - размещение текста по центру. По умолчанию текст в ячейке будет расположен слева.

· rowspan=2 - задание высоты ячейки "Времена года" в две строки.

Вправа

Створіть по образу скриншота таблицю з дотриманням всіх правил оформлення таблиці.

Викладете файл, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

Дата добавления: 2015-10-02