Создание таблиц

6.1 Элементы <table> и <tr>

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

Тег <table>

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

Пример использования:

    
      <table>
        <!-- строки и ячейки таблицы будут добавлены здесь -->
      </table>
    
  

Тег <tr> (table row)

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

Пример использования:

    
      <table>
        <tr>
          <!-- ячейки строки будут добавлены здесь -->
        </tr>
      </table>
    
  

6.2 Элементы <td> и <th>

Тег <td> (table data)

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

Пример использования:

    
      <table>
        <tr>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
          <td>Ячейка 3</td>
        </tr>
      </table>
    
  

Тег <th> (table head)

Тег <th> используется для обозначения ячеек заголовков таблицы. Текст внутри <th> обычно отображается полужирным шрифтом и выравнивается по центру.

Пример использования:

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

Пример таблицы:

    
      <table>
        <tr>
          <th>Имя</th> <th>Возраст</th> <th>Город</th>
        </tr>
        <tr>
          <td>Иван</td> <td>30</td> <td>Торонто</td>
        </tr>
        <tr>
          <td>Мария</td> <td>25</td> <td>Франкфурт</td>
        </tr>
        <tr>
          <td>Нина</td> <td>35</td> <td>Париж</td>
        </tr>
      </table>
    
  

6.3 Стилизация таблиц

Таблицы обязательно нужно стилизовать с помощью CSS — это значительно повышает наглядность и читаемость данных.

Например, вы решили добавить рамку каждой ячейке: похвальное дело, но т. к. рамка есть буквально у каждой ячейки, теперь каждые две ячейки разделяет двойная рамка — по одной от каждой из ячеек.🤦‍♂️

Если вы хотите, чтобы рамка выглядела так, как вы хотите, вам нужно с помощью CSS объединить соседние рамки. Для этого есть специальное свойство — border-collapse.

Вот пример хорошей стилизации нашей таблицы:

    
      <table>
        <tr>
          <th>Имя</th> <th>Возраст</th> <th>Город</th>
        </tr>
        <tr>
          <td>Иван</td> <td>30</td> <td>Торонто</td>
        </tr>
        <tr>
          <td>Мария</td> <td>25</td> <td>Франкфурт</td>
        </tr>
        <tr>
          <td>Нина</td> <td>35</td> <td>Париж</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Устанавливает ширину таблицы */
        border-collapse: collapse; /* Убирает двойные границы между ячейками */
      }

      th, td {
        border: 1px solid black; /* Устанавливает границу для ячеек */
        padding: 8px; /* Добавляет отступы внутри ячеек */
        text-align: left; /* Выравнивает текст по левому краю */
      }

      th {
        background-color: #f2f2f2; /* Устанавливает цвет фона для заголовков */
      }
    
  

Тут мы видим, что:

• У каждой ячейки есть граница толщиной 1 пиксель черного цвета
• Двойные границы между ячейками убраны
• У каждой ячейки есть внутренние отступы, чтобы текст не примыкал к рамкам
• У ячеек заголовка есть отдельный цвет фона

Красота!

1

Задача

Модуль 1: Web Core, 3 уровень, 5 лекция

Недоступна

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

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

Открыть

1

Задача

Модуль 1: Web Core, 3 уровень, 5 лекция

Недоступна

Стилизация таблицы

Стилизация таблицы

Открыть