Створення таблиць

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 піксель чорного кольору
• Подвійні границі між клітинками прибрані
• У кожної клітинки є внутрішні відступи, щоб текст не прилягав до рамок
• У клітинок заголовка є окремий колір фону

Краса!