Робота з таблицями в HTML

Робота з таблицями в HTML

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

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

Основні теги таблиці

Головний тег таблиці — table. Всередині нього розміщуються рядки tr, а всередині рядків знаходяться комірки td.

Структура HTML таблиці

<table border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>

  <tr>
    <td>cell 4</td>
    <td>cell 5</td>
    <td>cell 6</td>
  </tr>

  <tr>
    <td>cell 7</td>
    <td>cell 8</td>
    <td>cell 9</td>
  </tr>
</table>

Атрибут border додає рамки таблиці та її коміркам. У сучасній верстці рамки зазвичай задають через CSS.

Як створюється таблиця

• Спочатку створюється тег table.
• Всередині table додаються рядки за допомогою tr.
• Всередині кожного tr додаються комірки td.
• Кожна комірка містить свій текст або інший HTML-код.

<table border="1">
  <tr>
    <td>Ім'я</td>
    <td>Вік</td>
  </tr>

  <tr>
    <td>Андрій</td>
    <td>25</td>
  </tr>
</table>

Приклад:

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>

  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>