HTML5 Таблицы: Урок для начинающих (+ почему их лучше не использовать)

Таблицы в HTML — устаревший способ создания сайтов. Современные веб-разработчики редко используют их для построения структуры веб-страниц, предпочитая более гибкие теги <div> и <span>. Однако, понимание принципов работы таблиц полезно для работы со старыми проектами и изучения истории веб-разработки. Этот урок объясняет основы создания таблиц в HTML и объясняет, почему их использование не рекомендуется для современных веб-сайтов.

Структура HTML таблицы

Таблица в HTML — блок для размещения текста, картинок, изображений, видео и других элементов. Простейшая структура:

<table>
  <tr>
    <th>Название столбца 1</th>
    <th>Название столбца 2</th>
    <th>Название столбца 3</th>
    <th>Название столбца 4</th>
  </tr>
  <tr>
    <td>Значение 1</td>
    <td>Значение 2</td>
    <td>Значение 3</td>
    <td>Значение 4</td>
  </tr>
  <tr>
    <td>Значение 5</td>
    <td>Значение 6</td>
    <td>Значение 7</td>
    <td>Значение 8</td>
  </tr>
</table>

<table>: Открывающий тег таблицы.
<tr>: Открывающий тег строки таблицы. Каждый <tr> — один ряд.
<th>: Тег ячейки заголовка (header). Используется для заголовков столбцов. Текст обычно отображается жирным шрифтом.
<td>: Тег ячейки данных (data). Используется для данных в таблице.
</table>: Закрывающий тег таблицы.

Удаление <table> удаляет обводку таблицы. Добавление тега возвращает обводку. Таблица имеет начало (<table>) и конец (</table>). Атрибут border управляет толщиной границы.

Атрибуты таблицы и ячеек

Пример таблицы с атрибутами:

<table>
  <tr border="1" cellpadding="10" cellspacing="0">
    <td colspan="2">Ячейка, занимающая 2 столбца</td>
    <td>Ячейка</td>
  </tr>
  <tr bgcolor="#ff0000">
    <td align="center" valign="top">Текст по центру</td>
    <td width="96%">Широкая ячейка</td>
    <td width="2%">Узкая ячейка</td>
  </tr>
</table>

border: Толщина границы.
cellpadding: Отступ между содержимым ячейки и её границей.
cellspacing: Расстояние между ячейками.
colspan: Позволяет ячейке занимать несколько столбцов.
bgcolor: Цвет фона ячейки.
align: Горизонтальное выравнивание текста (left, center, right).
valign: Вертикальное выравнивание текста (top, middle, bottom).
width: Ширина ячейки (в пикселях или процентах).

align и valign работают только с таблицами.

Использование таблиц для построения структуры веб-страниц устарело. Они удобны для табличных данных, но современные инструменты позволяют создавать более гибкие макеты с помощью <div> и <span> и CSS. Однако, знание таблиц в HTML остаётся полезным.