Создание и стилизация таблиц с помощью HTML и CSS

Всем привет! 👋

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

Основы HTML-таблиц

Начнем с создания простой таблицы с использованием HTML. Вот как это делается:

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Алексей</td>
      <td>25</td>
      <td>Москва</td>
    </tr>
    <tr>
      <td>Мария</td>
      <td>30</td>
      <td>Санкт-Петербург</td>
    </tr>
    <tr>
      <td>Иван</td>
      <td>22</td>
      <td>Казань</td>
    </tr>
  </tbody>
</table>

В этом примере мы создаем таблицу с тремя столбцами: «Имя», «Возраст» и «Город». Заголовки таблицы размещены в <thead>, а данные — в <tbody>.

---

<tr> — табличная строка. Тег <tr> обозначает строку в таблице. Он используется внутри тегов <table>, а также обычно включает теги <th> (заголовки) и <td> (ячейки данных).

Пример:

<table>
    <tr>
        <th>Имя</th>
        <th>Возраст</th>
    </tr>
    <tr>
        <td>Алексей</td>
        <td>25</td>
    </tr>
</table>

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

---

<th> — табличный заголовок. Тег <th> используется для определения ячеек заголовков в таблице. Эти ячейки обычно отображаются жирным шрифтом и выравниваются по центру. Они помогают пользователям понять, какие данные находятся в соответствующих столбцах.

Пример:

<tr>
    <th>Имя</th>
    <th>Возраст</th>
</tr>

Для тега <th> существует атрибут scope, который указывает, к каким ячейкам относится заголовок. Значения могут быть col (для столбца), row (для строки), colgroup (для группы столбцов), rowgroup (для группы строк).

Пример:

<th scope="col">Имя</th>

---

<td> — табличная ячейка данных. Тег <td> используется для определения ячеек, содержащих данные в таблице. Он представляет собой обычные ячейки таблицы, которые могут содержать текст, изображения, ссылки и другие элементы HTML.

Пример:

<tr>
    <td>Алексей</td>
    <td>25</td>
</tr>

Атрибуты:

• colspan: Указывает количество столбцов, которые должна занимать ячейка.
• rowspan: Указывает количество строк, которые должна занимать ячейка.

<td colspan="2">Имя и возраст</td>

---

Также существует тег <tfoot> — табличный подвал.

Тег <tfoot> предназначен для определения подвала таблицы. Он используется для размещения итоговой информации или метаданных, связанных с содержимым таблицы, таких как суммы, средние значения или другие выводы.

Пример:

<table>
    <thead>
        <tr>
            <th>Имя</th>
            <th>Возраст</th>
            <th>Город</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Алексей</td>
            <td>25</td>
            <td>Москва</td>
        </tr>
        <tr>
            <td>Мария</td>
            <td>30</td>
            <td>Санкт-Петербург</td>
        </tr>
        <tr>
            <td>Иван</td>
            <td>22</td>
            <td>Казань</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Итого:</td>
            <td>77</td>
        </tr>
    </tfoot>
</table>

Пример выполнения 🙂

Примечание: подвал таблицы должен быть использован только в сочетании с тегами <thead> (для заголовков) и <tbody> (для содержимого).

Тег <tfoot> — это важный элемент, который помогает структурировать данные в таблице и предоставляет место для итоговых значений или примечаний. Используйте его вместе с <thead> и <tbody>, чтобы создать хорошо организованные и доступные таблицы на вашем сайте. Если у вас есть еще вопросы, задавайте!

Сводка о тегах таблиц

Небольшая сводка о каждом из тегов, использующихся в таблицах:

• <tr>: определяет строку таблицы.
• <th>: определяет ячейку заголовка таблицы (жирный текст, по центру).
• <td>: определяет обычную ячейку с данными.

Стилизация таблиц с помощью CSS

Теперь давайте добавим стиль к нашей таблице с помощью CSS. Вот пример стилей, которые можно применить:

table {
  width: 100%;
  border-collapse: collapse; /* Убираем двойные границы */
}

th, td {
  border: 1px solid #ccc; /* Светло-серая граница */
  padding: 10px; /* Отступы внутри ячеек */
  text-align: left; /* Выравнивание текста по левому краю */
}

th {
  background-color: #f2f2f2; /* Светло-серый фон для заголовков */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* Цвет для четных строк */
}

tr:hover {
  background-color: #e0e0e0; /* Цвет при наведении на строку */
}

Общий пример таблицы

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Стилизация таблицы</title>
</head>
<body>

<table>
    <thead>
        <tr>
            <th>Имя</th>
            <th>Возраст</th>
            <th>Город</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Алексей</td>
            <td>25</td>
            <td>Москва</td>
        </tr>
        <tr>
            <td>Мария</td>
            <td>30</td>
            <td>Санкт-Петербург</td>
        </tr>
        <tr>
            <td>Иван</td>
            <td>22</td>
            <td>Казань</td>
        </tr>
    </tbody>
</table>

</body>
</html>

CSS:

        table {
            width: 100%;
            border-collapse: collapse; /* Убираем двойные границы */
        }

        th, td {
            border: 1px solid #ccc; /* Светло-серая граница */
            padding: 10px; /* Отступы внутри ячеек */
            text-align: left; /* Выравнивание текста по левому краю */
        }

        th {
            background-color: #f2f2f2; /* Светло-серый фон для заголовков */
        }

        tr:nth-child(even) {
            background-color: #f9f9f9; /* Цвет для четных строк */
        }

        tr:hover {
            background-color: #e0e0e0; /* Цвет при наведении на строку */
        }

Посмотреть результат выполнения этого кода можно, кликнув по кнопке ниже 🙂

Дополнительные материалы

MDN Web Docs: «HTML таблицы продвинутые возможности и доступность»

MDN Web Docs: «Стилизация таблиц»

HTML Academy: «Как сделать таблицу в HTML»

Подводим итоги 💣

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

Успехов в кодинге! 💻