Урок 21 із 239
9%
← Назад

Ширина і висота таблиці в HTML

Навчіться задавати розміри HTML-таблиці за допомогою атрибутів width і height.

Ширина і висота таблиці в HTML

У HTML можна задавати розміри таблиці за допомогою атрибутів width і height.

Атрибут width визначає ширину таблиці, а height — її висоту. Значення задається у пікселях числом без додавання px.

Атрибут width

За допомогою width можна змінити ширину всієї таблиці.

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

Атрибут height

Атрибут height задає висоту таблиці.

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

Width і height разом

Можна одночасно задати ширину і висоту таблиці.

<table border="1" width="300" height="200">
  <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>
АтрибутПризначення
widthВстановлює ширину таблиці
heightВстановлює висоту таблиці
borderДодає рамку таблиці

Сучасний підхід

У сучасній HTML-верстці розміри таблиць частіше задають через CSS, а не через HTML-атрибути.

.table {
  width: 400px;

  height: 300px;
}
❗ Важливо:

Атрибути width і height у таблицях існують для розуміння HTML, але в реальних проєктах краще використовувати CSS.

📌 Завдання:
  1. Візьміть таблицю з попереднього уроку.
  2. Додайте їй ширину 400 пікселів.
  3. Додайте їй висоту 300 пікселів.
  4. Перевірте результат у браузері.
💡 Показати підказку

У тег table додайте атрибути width="400" і height="300".

✅ Показати відповідь
Приклад:

<table 
  border="1"
  width="400"
  height="300"
>
  ...
</table>