ЯК ЗРОБИТИ ТАБЛИЦЮ В HTML?

Заголовок і таблиці є невід’ємною частиною багатьох веб-сторінок. Вони допомагають впорядкувати та представити дані зрозуміло і структуровано. Одним з найпоширеніших методів створення таблиць на веб-сторінках є використання мови розмітки HTML.

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

Щоб створити таблицю в HTML, використовуються теги <table>, <tr> та <td>.

Ось приклад HTML-коду для створення простої таблиці з одним рядком і одним стовпцем:

<table>
  <tr>
    <td>Дані</td>
  </tr>
</table>

У цьому прикладі <table> – це головний тег таблиці, <tr> – тег рядка таблиці, а <td> – тег комірки таблиці.

Для створення декількох рядків та стовпців, з’єднайте їх, розміщуючи відповідні теги <tr> та <td> всередині :

<table>
  <tr>
    <td>Дані 1</td>
    <td>Дані 2</td>
  </tr>
  <tr>
    <td>Дані 3</td>
    <td>Дані 4</td>
  </tr>
</table>

В цьому прикладі створено таблицю з двома рядками і двома стовпцями. У першому рядку є дві комірки: “Дані 1” і “Дані 2”, а в другому рядку також дві комірки: “Дані 3” і “Дані 4”.

Додавання заголовків до таблиці

Заголовки таблиці допомагають зрозуміти, що саме представлено в кожному стовпці таблиці. Для додавання заголовків використовується тег <th>. Ось приклад:

<table>
  <tr>
    <th>Назва</th>
    <th>Ціна</th>
    <th>Кількість</th>
  </tr>
  <tr>
    <td>Продукт 1</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Продукт 2</td>
    <td>15</td>
    <td>3</td>
  </tr>
</table>

Тепер перший рядок таблиці використовує тег <th> замість <td>, щоб позначити заголовки стовпців. У цьому прикладі ми маємо заголовки “Назва”, “Ціна” та “Кількість”.

Додавання форматування до таблиці

HTML дозволяє додавати форматування до таблиць за допомогою CSS. Ви можете застосувати різні стилі до заголовків, комірок і навіть всієї таблиці.

Ось приклад CSS-коду для надання таблиці кольорів, виравнювання і рамок:

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th {
  background-color: lightgray;
  text-align: center;
}

td {
  text-align: left;
}

Цей CSS-код встановлює рамки для всієї таблиці, заголовків та комірок, використовує кольори фону для заголовків та задає вирівнювання тексту. Ви також можете додати будь-яке інше форматування, яке ви бажаєте до вашої таблиці.

Висновок

Створення таблиць в HTML – це потужний спосіб організації та представлення даних на веб-сторінках. Ви можете створити прості таблиці або складні таблиці зі стилізацією, використовуючи мову розмітки HTML та CSS. Такі таблиці роблять ваш контент більш організованим та доступним для користувачів.

Питання, які часто задаються:

1. Як можна розмістити таблицю в HTML по центру сторінки?
2. Чи можна додавати зв’язки або посилання в таблицю?
3. Як змінити розмір комірок в таблиці?
4. Як можна стилізувати заголовки таблиці відмінним від решти комірок?
5. Як можна додавати зміст з декількома рядками або стовпцями в таблицю?

Залишити коментар

Опубліковано Максим на 27 01 2024. Поданий під Відповідь. Ви можете слідкувати за будь-якими відповідями через RSS 2.0. Ви можете подивитись до кінця і залишити відповідь.