#5 Таблиці

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

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



Для побудови таблиці необхідна наступнна послідовність:

  1. Спочатку додається тег <table> (початок таблиці).
  2. Потім додається тег <tr> (початок рядочку).
  3. Після цього в рядочок додається необхідна кількість клітинок <td>вміст клітинки </td>
  4. Після того, як рядок буде сформовано треба закрити рядок тегом </tr>
  5. Для додавання наступного рядочку треба повторити крок 2-4.
  6. Після створення необхідної кількості рядків необхідно закрити теблицю </table>

Наприклад: Таблиця Графік змагань 9-11 кл

<table border=1>
<tr>
<td>Понеділок </td><td>Вівторок</td><td>Середа </td>
</tr>
<tr>
<td>9-ті класи </td><td>10-ті класи</td><td>11-ті класи </td>
</tr>
</table>

Для візуалізації ліній таблиці в тег <table> необхідно вставити атрибут border=1 , який вказує на товщину ліній. <table border=1>

Вправа №1

Створити таблицю розкладу занять на 2 дня.

Ширина та висота клітинки width та height

За замовченням, ширина стовпчика встановлюється по довжині найбільшого тексту клітинки, а висота клітинки - відповідно по висоті найбільшої літери у тексті.
Для того щоб встановити фіксовану ширину клітинки, треба застосувати атрибут width="значення".
Для того щоб встановити фіксовану висоту клітинки, треба застосувати атрибут height="значення".

Приклад збільшення розміру клітинок атрибутами width i height:

<table border=1>
<tr>
<td>Понеділок </td><td width="160px">Вівторок</td><td>Середа </td>
</tr>
<tr>
<td height="50px">9-ті класи </td><td>10-ті класи</td><td>11-ті класи </td>
</tr>
</table>

Із приклада бачимо, що змінилась ширина другого стовпчика та висота другого рядочку.

Форматування тексту в клітинках. Атрибут align

Для форматування тексту в кожній клітинці <td>, або в рядочку <tr> застосовують атрибут align. Цей атрибут може мати значення:
left (текст ліворуч), або
right (текст праворуч), або
center (текст по центру).

Приклад форматування:

<table border=1>
<tr>
<td width="100px"> a </td><td width="100px" align="center"> b </td><td width="100px" align="right"> c </td>
</tr>
<tr align = "center">
<td> a </td><td> b </td><td> c </td>
</table>
Вправа №2

Побудуйте таблицю 3 Х 3. Ширина стовпчика=100px, висота стовпчика=100px.


Вправа №3 *
Побудуйте таблицю 3 Х 3. Використовуючи атрибути габаритів та форматування розташуйте символи як на зображенні: