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 — выравнивает таблицу по центру, слева или справа (в старом HTML).
  Пример: <table align="center">.

• bgcolor — задаёт цвет фона таблицы или ячейки.
  Пример: <table bgcolor="#f2f2f2"> или <td bgcolor="lightyellow">.

• colspan и rowspan — объединяют ячейки по горизонтали или вертикали.
  Например, если ты хочешь, чтобы одна ячейка занимала сразу две колонки:

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

В старые времена таблицы использовали даже для вёрстки целых сайтов (да, серьёзно!). Но сейчас это уже не делают. Таблицы — только для табличных данных: прайс-листы, расписания, отчёты и т.д.

Если хочешь, чтобы таблица выглядела аккуратно, можно добавить немного стиля, но про это поговорим потом — в отдельной статье.