HTML з нуля: Як зробити таблицю в HTML. Урок №14

Коли ми говоримо про таблиці в HTML, у багатьох одразу згадуються шкільні уроки інформатики — сірі клітинки, купа тегів і думка, що це щось складне й нудне. Насправді все набагато простіше. Таблиця в HTML — це просто зручний спосіб охайно розкласти інформацію по рядках і стовпцях.

Уяви собі звичайну таблицю в зошиті: зверху — назви колонок, збоку — рядки з даними. В HTML усе так само. Все починається з одного тегу, який каже браузеру: “Гей, тут буде таблиця!”.

І цей тег — <table>.

Всередині нього ми створюємо рядки (<tr> — table row) і комірки. Комірки бувають двох типів:

• <th> — заголовок стовпця (зазвичай жирним шрифтом і по центру),

• <td> — звичайна комірка з даними.

Наприклад, якщо ти хочеш зробити таблицю з розкладом уроків, вона буде виглядати приблизно так:

<table>
  <tr>
    <th>Урок</th>
    <th>Предмет</th>
    <th>Час</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Математика</td>
    <td>08:30</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Історія</td>
    <td>09:20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Українська мова</td>
    <td>10:10</td>
  </tr>
</table>

Кожен рядок (<tr>) — це горизонтальна лінія в таблиці. А <td> — окрема клітинка.

Розбираємо по частинах

1. <table> — початок таблиці.

2. <tr> — створює рядок.

3. <th> — заголовок колонки.

4. <td> — клітинка з даними.

І все! Всього чотири теги, і таблиця готова.

Додаємо межі

Якщо написати таблицю без оформлення, її не буде видно — жодних ліній, просто текст. Щоб таблиця виглядала звично, можна додати атрибут border.

<table border="1">
  <tr>
    <th>Урок</th>
    <th>Предмет</th>
    <th>Час</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Математика</td>
    <td>08:30</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Історія</td>
    <td>09:20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Українська мова</td>
    <td>10:10</td>
  </tr>
</table>

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

Корисні атрибути таблиць

Щоб таблиця виглядала зручніше, можна використовувати кілька простих атрибутів:

• border — додає рамку таблиці.
  <table border="1">

• cellpadding — відступ усередині комірок (щоб текст не притискався до краю).
  <table border="1" cellpadding="5">

• cellspacing — відстань між комірками.
  <table border="1" cellspacing="5">

• width — ширина таблиці або колонки.
  <table width="100%"> — таблиця на всю ширину сторінки.

• align — вирівнювання таблиці (зліва, справа або по центру).
  <table align="center">

• bgcolor — колір фону таблиці або клітинки.
  <table bgcolor="#f2f2f2"> або <td bgcolor="lightyellow">

• colspan і rowspan — об’єднують комірки по горизонталі чи вертикалі.

<td colspan="2">Текст</td>

Колись таблиці навіть використовували для створення цілих сайтів (так, серйозно!). Зараз так не роблять — таблиці потрібні лише для табличних даних: прайс-листів, розкладів, звітів тощо.

Якщо хочеш, щоб таблиця виглядала гарніше, можна додати стилі, але це вже тема для наступного уроку.