Таблицы HTML

Откройте для себя основы работы с HTML-таблицами

В первые дни веб-таблицы были очень важной частью компоновки зданий.

Позже они были заменены CSS и его возможностями компоновки, и сегодня у нас есть мощные инструменты, такие как CSS Flexbox и CSS Grid для создания макетов. Таблицы теперь используются только, угадайте, для построения таблиц!

В`table`тег

Вы определяете таблицу, используяtableтег:

<table>
</table>

Внутри таблицы мы определим данные. Мы рассуждаем в терминах строк, что означает, что мы добавляем в таблицу строки (а не столбцы). Мы определим столбцы внутри строки.

Рядов

Строка добавляется с помощьюtrтег, и это единственное, что мы можем добавить вtableэлемент:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Это таблица с 3 строками.

Первый рядможетвзять на себя роль заголовка.

Заголовки столбцов

Заголовок таблицы содержит имя столбца, обычно выделенное жирным шрифтом.

Подумайте о документе Excel / Google Sheets. ВершинаA-B-C-D...заголовок.

Column headers

Мы определяем заголовок, используяthтег:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

Содержание таблицы

Содержание таблицы определяется с помощьюtdтеги, внутри другогоtrэлементы:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

Вот как браузеры отображают это, если вы не добавляете никаких стилей CSS:

No styling

Добавление этого CSS:

th, td {
  padding: 10px;
  border: 1px solid #333;
}

делает таблицу более похожей на настоящую:

A proper table

Составные столбцы и строки

Строка может занимать 2 или более столбцов, используя параметрcolspanатрибут:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

A colspan example

Или он может охватывать 2 или более строк, используяrowspanатрибут:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

A rowspan example

Заголовки строк

Раньше я объяснил, как можно создавать заголовки столбцов, используяthтег внутри первогоtrтег таблицы.

Вы можете добавитьthтег как первый элемент внутриtrэто не первыйtrтаблицы, чтобы иметь заголовки строк:

<table>
  <tr>
    <th></th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <th>Row 1</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Row headings

Дополнительные теги для организации таблицы

Вы можете добавить еще 3 тега в таблицу, чтобы сделать ее более организованной.

Это лучше всего при использовании больших таблиц. А также правильно определить верхний и нижний колонтитулы.

Эти теги

thead
tbody
tfoot

Они заворачиваютtrтеги, чтобы четко определить различия разделов таблицы. Вот пример использования:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

thead and tfoot

Заголовок таблицы

Стол должен иметьcaptionтег, описывающий его содержимое. Этот тег следует ставить сразу после открытияtableтег:

<table>
  <caption>Dogs age</caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Скачать мою бесплатнуюСправочник по HTML