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

1. Простая таблица — <table>, <tr>, <td>

• <table> — контейнер таблицы
• <tr> — table row, строка таблицы
• <td> — table data, ячейка с данными

<table border="1">
    <tr>
        <td>Имя</td>
        <td>Возраст</td>
    </tr>
    <tr>
        <td>Анна</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Иван</td>
        <td>30</td>
    </tr>
</table>

Как это выглядит в браузере:

2. Заголовки ячеек — <th>

Тег <th> (table header) делает текст жирным и центрирует по умолчанию. Используется для заголовков строк или столбцов.

<table border="1">
    <tr>
        <th>Имя</th>
        <th>Возраст</th>
        <th>Город</th>
    </tr>
    <tr>
        <td>Анна</td>
        <td>25</td>
        <td>Москва</td>
    </tr>
    <tr>
        <td>Иван</td>
        <td>30</td>
        <td>СПб</td>
    </tr>
</table>

Как это выглядит в браузере:

3. Объединение ячеек — colspan и rowspan

Атрибут colspan объединяет ячейки по горизонтали (несколько столбцов).
Атрибут rowspan объединяет ячейки по вертикали (несколько строк).

<table border="1">
    <tr>
        <th>Имя</th>
        <th colspan="2">Контакты</th>
    </tr>
    <tr>
        <td>Анна</td>
        <td>email@mail.ru</td>
        <td>+7 123 456</td>
    </tr>
    <tr>
        <td rowspan="2">Иван</td>
        <td>ivan@mail.ru</td>
        <td>+7 987 654</td>
    </tr>
    <tr>
        <td>>i.ivanov@work.ru</td>
        <td>+7 555 555</td>
    </tr>
</table>

Как это выглядит в браузере:

4. Группировка строк — <thead>, <tbody>, <tfoot>

Для больших таблиц можно разделить строки на группы: заголовок (<thead>), тело (<tbody>), подвал (<tfoot>). Это помогает при стилизации и работе со скриптами.

<table border="1">
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ноутбук</td>
            <td>50000</td>
        </tr>
        <tr>
            <td>Мышь</td>
            <td>1000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Итого</td>
            <td>51000</td>
        </tr>
    </tfoot>
</table>

Как это выглядит в браузере:

5. Что нельзя делать с таблицами

• Использовать таблицы для вёрстки страницы (расположения блоков, меню). Это устаревший подход, который мешает адаптивности.
• Пропускать ячейки — каждая строка должна иметь одинаковое количество ячеек (если нет объединения).
• Вкладывать таблицы друг в друга без необходимости.