Основні атрибути таблиці

Атрибут	Значення
border	Даний атрибут використовується в тегі <table>. Якщо даний атрибут присутній, межа таблиці промальовувалася для всіх осередків і для таблиці. border може набувати числового значення, що визначає ширину межі, наприклад border=2
align	Якщо атрибут align присутній всередині тегів <caption> і </caption>, то він визначає положення підпису для таблиці (зверху або знизу). За умовчанням align=top. Якщо атрибут align зустрічається усередині <tr>, <th> або <td>, він управляє положенням даних в осередках по горизонталі. Може набувати значень left (зліва), right (справа) або center (по центру)
valign	Даний атрибут зустрічається всередині тегов <tr>, <th> і <td>. Він визначає вертикальне розміщення даних в комірках. Може набувати значень top (вгорі), bottom (внизу), middle (по середині) і baseline (всі комірки рядка притиснуті догори)
nowrap	Даний атрибут говорить про те, що дані в комірці не можуть логічно розбиватися на декілька рядків і повинні бути представлені одним рядком
colspan	Указує, яка кількість осередків буде об'єднана по горизонталі для вказаного комірки. За умовчанням – 1
rowspan	Указує, яка кількість осередків буде об'єднана по вертикалі для вказаної осередку. За умовчанням – 1
colspec	Даний параметр дозволяє задавати фіксовану ширину колонок або в символах, або у відсотках, наприклад, colspec="20%"

Приклад простий таблиці на мові HTML

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Приклад простий таблиці мовою HTML</title>

</head>

<body>

<table border=1 align="center">

<caption>Проста таблиця</caption>

<tr>

<td>Рядок 1<br>Комірка 1</td>

<td>Рядок 1<br>Комірка 2</td>

<td>Рядок 1<br>Комірка 3</td>

</tr>

<tr>

<td>Рядок 2<br>Комірка 1</td>

<td>Рядок 2<br>Комірка 2</td>

<td>Рядок 2<br>Комірка 3</td>

</tr>

<tr>

<td>Рядок 3<br>Комірка 1</td>

<td>Рядок 3<br>Комірка 2</td>

<td>Рядок 3<br>Комірка 3</td>

</tr>

</table>

</body>

</html

Рис. 10.12. Результат відображення таблиці в браузері

Приклад складної таблиці з об'єднаними осередками і різним форматуванням

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Складна таблиця</title>

</head>

<body>

<table border="3" width="438" height="244">

<caption>Складна таблиця з об'днанням комірок</caption>

<tr>

<td align="center" rowspan="2" bgcolor="#00FFFF" bordercolor="#000000">

Рядок l,2<br>Комірка 1 <br /><b>rowspan="2"</b>

</td>

<td>Рядок 1<br>Комірка 2</td>

<td align="right" bgcolor="#FF00FF" bordercolor="#FFFF00"> Рядок 1 <br>

Комірка 3<br><b>align=right</b>

</td>

</tr>

<tr>

<td valign="top">Рядок 2<br>Комірка 2<br><b>valign=top</b></td>

<td valign="bottom">Рядок 2<br>

Комірка 3<br><b>valign="bottom"</b></td>

</tr>

<tr>

<td height="77">Рядок 3<br>Комірка 1</td>

<td align="center" colspan="2" bordercolor="#00FF00" height="77">

Рядок 3 Комірка 2,3<br><b>align=center</b><br /><b>colspan="2"</b>

</td>

</tr>

</table>

</body>

</html>

Рис. 10.13. Складна таблиця з об’єднанням комірок