Простые таблицы

Представляй данные в строках и столбцах с помощью тегов table, tr, th и td.

6 мин · 3 вопросов

Расписание, прайс-лист, спортивная таблица: некоторая информация естественно читается по строкам и столбцам. Именно для этого нужны таблицы в HTML. Чтобы начать, достаточно трёх тегов: <table> оборачивает всю таблицу, <tr> (table row, строка таблицы) создаёт строку, а <td> (table data, данные таблицы) создаёт ячейку внутри строки.

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

Чтобы дать каждому столбцу название, замени <td> на <th> (table header, заголовок таблицы) в первой строке. Браузер показывает такие ячейки-заголовки жирным шрифтом и по центру, что отличает их от данных.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

Браузер строит таблицу строка за строкой: первая ячейка каждого <tr> попадает в первый столбец, вторая ячейка - во второй столбец, и так далее. По умолчанию таблица отображается без видимых границ: это нормально - за внешний вид (линии, цвета, отступы) позже будет отвечать CSS.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Расставь эти строки по порядку, чтобы получилась корректная таблица из одной строки и одной ячейки.

   <table>
   <tr>
   <td>1</td>
   </tr>
   </table>

2. В чём разница между <td> и <th>?
   • <th> создаёт ячейку-заголовок, <td> - ячейку с данными
   • <th> создаёт всю таблицу, <td> - строку
   • Разницы нет, они взаимозаменяемы
3. Для чего должна использоваться HTML-таблица?
   • Для вёрстки всего сайта
   • Для представления данных в строках и столбцах
   • Для замены маркированных списков