Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Справочник HTML & CSS

<table>

Таблица из строк `<tr>` и ячеек.

Синтаксис

<table>
  <tr><th>Heading</th></tr>
  <tr><td>Cell</td></tr>
</table>

Примеры

Таблица с заголовками столбцов:

<table>
  <tr><th>Drink</th><th>Price</th></tr>
  <tr><td>Tea</td><td>$2.50</td></tr>
  <tr><td>Coffee</td><td>$4.00</td></tr>
</table>

Рамки добавляют в CSS:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid silver; padding: 6px 12px; }
</style>
 
<table>
  <tr><th>Drink</th><th>Price</th></tr>
  <tr><td>Tea</td><td>$2.50</td></tr>
</table>

Примечания

Таблицы нужны для данных. Расставлять с их помощью блоки страницы не стоит — для этого есть flexbox и grid. Без border-collapse: collapse у соседних ячеек получаются двойные рамки.

См. также

  • <td>, <th> — Ячейки таблицы: `<td>` — с данными, `<th>` — заголовочная.
  • <thead>, <tbody>, <tfoot> — Группы строк таблицы: шапка, тело и итоговая часть.
  • <caption> — Название таблицы.
  • <colgroup>, <col> — Описывает столбцы таблицы, чтобы задать им ширину или фон.

Вопросы и ответы по теме

В учебнике

  • Таблицы — Таблицы в HTML — строки и ячейки, заголовки столбцов, thead, tbody, tfoot и caption, объединение ячеек.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.