ТАБЛИЦІ HTML

відео

Для того щоб створити таблицю слід застосувати тег

<tadle> </table>

В середині цього тегу слід розмістити наступні теги:

<tr></tr> - рядок таблиці

<td></td> - стовпчик таблиці.

Створимо таблицю за поданим зразком:

У нашій майбутній таблиці поки є два рядки та три стовпці:

<tadle>

<tr>

<td> </td>

</tr>

<tr>

<td> </td>

</tr>

</table>

Код №1 СТВОРЕННЯ ТАБЛИЦІ ЗА ЗРАЗКОМ:

<table>

<tr>

<td> ПЕРШИЙ СТОВПЧИК <br> ПЕРШИЙ РЯДОК </td>

<td> ДРУГИЙ СТОВПЧИК<br> ПЕРШИЙ РЯДОК </td>

<td> ТРЕТІЙ СТОВПЧИК<br> ПЕРШИЙ РЯДОК </td>

</tr>

<tr>

<td> ПЕРШИЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

<td> ДРУГИЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

<td> ТРЕТІЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

</tr>

</table>

Коли ви відкриєте даний документ у браузері то не побачите таблиці як на малюнку!

По - перше – відсутній колір клітинок.

По – друге відсутні межі клітинок.

Нам вже знайомий атрибут bgcolor тому ми ним скористаємось.

Додамо даний атрибут до тегу <td> та пропишимо його значення

Нам відомо, що bgcolor можна задавати до різних тегів.

Давайте спробуємо додати наш тег до всієї таблиці.

Код № 2

<table bgcolor="#7CFC00">

<tr bgcolor="#FF1493">

<td bgcolor = "#336699"> ПЕРШИЙ СТОВПЧИК <br> ПЕРШИЙ РЯДОК </td>

<td bgcolor = "#FFCC33"> ДРУГИЙ СТОВПЧИК<br> ПЕРШИЙ РЯДОК </td>

<td bgcolor = "#336699"> ТРЕТІЙ СТОВПЧИК<br> ПЕРШИЙ РЯДОК </td>

</tr>

<tr>

<td bgcolor = "#FFCC33"> ПЕРШИЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

<td bgcolor = "#336699"> ДРУГИЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

<td bgcolor = "#FFCC33"> ТРЕТІЙ СТОВПЧИК<br> ДРУГИЙ РЯДОК </td>

</tr>

<tr bgcolor="#FF1493">

<td> </td>

</tr>

</table>

Вирівнювання клітинок таблиці.

Задаємо висоту та ширину таблиці.

Щоб задати висоту таблиці, слід застосувати атрибут height .

Щоб задати ширину таблиці, слід застосувати атрибут width .

Справа в тому, що ви можете задавати значення цих атрибутів двома способами:

Перший спосіб - це задавання у пікселях.

Другий у відсотках. У такий спосіб ваша таблиця буде масштабуватись автоматично відповідно до роздільної здатності будь - якого монітору.

Центрування тексту.

<center> </center>

Центрування тексту слід використовувати для кожної клітинки окремо.

Але можна застосувати атрибут

align=”center” – задає горизонтальне вирівнювання клітинки.

valign – задає вертикальне вирівнювання клітинки.

Атрибут valign має три значення:

valign = «middle» вирівнювання посередині клітинки

valign = «top» вирівнювання зверху клітинки

valign = «bottom» вирівнювання знизу клітинки.

Атрибути colspan і rowspan.

colspan – визначає кількість стовпців на які подовжується дана клітинка.

rowspan - – визначає кількість рядків на які подовжується дана клітинка.

Атрибут cellspacing

cellspacing – визначає межі між клітинками