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

Представляй данные в строках и столбцах с помощью тегов 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. Какой тег создаёт строку таблицы?
   • <td>
   • <tr>
   • <table>
   • <row>
2. В чём разница между <td> и <th>?
   • <th> создаёт ячейку-заголовок, <td> - ячейку с данными
   • <th> создаёт всю таблицу, <td> - строку
   • Разницы нет, они взаимозаменяемы
3. Для чего должна использоваться HTML-таблица?
   • Для вёрстки всего сайта
   • Для представления данных в строках и столбцах
   • Для замены маркированных списков