Проблема новичков при работе с таблицами
Когда начинающие разработчики пытаются отобразить данные вроде прайс-листа или расписания занятий на веб-сайте, часто получается неаккуратный и неудобочитаемый текстовый блок без четкой структуры. Причина кроется в неправильном использовании элементов разметки.
Шаг 1: Создаем основу с помощью тегов <table>, <tr> и <td>
Тег <table> служит контейнером для всей таблицы, а элементы <tr> определяют строки внутри нее. Внутри каждой строки размещаются ячейки через тег <td>. Пример простой двухстрочной таблицы:
<table>
<tr><td>Базовый тариф</td><td>$5/мес.</td></tr>
<tr><td>Профессиональный тариф</td><td>$15/мес.</td></tr>
</table>
На данном этапе таблица выглядит некрасиво, но это нормально – сначала нужно построить структуру, затем заняться оформлением.
Шаг 2: Добавляем заголовки с помощью элемента <th>
Элемент <th> позволяет выделить первую строку таблицы как заголовочную. Браузер автоматически делает такие ячейки жирными и центрирует их содержимое. Это важно не только визуально, но и семантически: экранные дикторы понимают, что эти ячейки являются метками столбцов, а поисковые системы лучше индексируют информацию.
<table>
<tr><th>Название тарифа</th><th>Цена в месяц</th></tr>
<tr><td>Базовый</td><td>$5</td></tr>
<tr><td>Профессиональный</td><td>$15</td></tr>
</table>
