Главная страница » HTML » Урок 11: Таблицы в HTML

Урок 11: Таблицы в HTML

Таблицы в HTML являются важным инструментом для представления табличных данных. Они позволяют организовать и структурировать информацию в виде строк и столбцов, делая ее более удобной для восприятия. В этом уроке мы рассмотрим основы создания таблиц, их форматирование, а также распространенные ошибки. В конце урока вас ждет тестовое задание.

Таблица в HTML создается с использованием тега <table>, внутри которого размещаются строки <tr>, столбцы <td>, а также заголовки столбцов <th>.

				
					<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Разделение таблицы на части

HTML также поддерживает разделение таблицы на заголовок (<thead>), тело (<tbody>) и подвал (<tfoot>).

				
					<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
    </tr>
    <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Итог 1</td>
      <td>Итог 2</td>
    </tr>
  </tfoot>
</table>

Объединение ячеек

Иногда требуется объединить несколько ячеек в одну. Для этого используются атрибуты rowspan и colspan.

				
					<table>
  <tr>
    <th rowspan="2">Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
  </tr>
  <tr>
    <td colspan="2">Ячейка 2</td>
  </tr>
</table>

Форматирование таблиц

Для улучшения внешнего вида таблиц можно использовать CSS. Например, добавим границы и отступы.

				
					<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
    </tr>
    <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
    </tr>
  </tbody>
</table>

Распространённые ошибки

Пропуск закрывающих тегов: Не забывайте закрывать теги <table>, <tr>, <th>, и <td>.

Неправильно:

				
					<table>
  <tr>
    <th>Заголовок 1<th>
  </tr>
</table>

Правильно:

				
					<table>
  <tr>
    <th>Заголовок 1</th>
  </tr>
</table>

2. Неправильное использование атрибутов colspan и rowspan: Убедитесь, что значения атрибутов корректны и соответствуют нужному количеству ячеек.

3. Отсутствие заголовков таблицы: Используйте теги <th> для заголовков столбцов, чтобы улучшить читаемость таблицы и ее доступность для людей с ограниченными возможностями.

Заключение

Таблицы являются важным инструментом для организации данных на веб-странице. Правильное использование таблиц помогает сделать информацию более структурированной и легко воспринимаемой. С помощью CSS можно улучшить внешний вид таблиц, делая их более привлекательными и удобными для чтения.

Тестовое задание

Создайте HTML-документ, который включает следующие элементы:

Таблицу с заголовками для трех столбцов и трех строк данных.
В первом столбце второй строки объедините ячейку на две строки.
Во втором столбце третьей строки объедините ячейку на два столбца.
Примените CSS для добавления границ и отступов, а также сделайте заголовки столбцов с фоновым цветом.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Таблицы</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">Ячейка 1.1</td>
        <td>Ячейка 1.2</td>
        <td>Ячейка 1.3</td>
      </tr>
      <tr>
        <td>Ячейка 2.2</td>
        <td>Ячейка 2.3</td>
      </tr>
      <tr>
        <td>Ячейка 3.1</td>
        <td colspan="2">Ячейка 3.2 и 3.3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.