НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

HTML Розмір таблиці


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


     
     
     
     
     
     
     
     

Використовуйте атрибут style з властивостями width або height для визначення розміру таблиці, рядка або стовпця.


HTML Ширина таблиці

Щоб встановити ширину таблиці, додайте атрибут style до елементу <table>:

Приклад

Встановіть ширину таблиці на 100%:

<table style="width:100%">
  <tr>
    <th>Ім'я</th>
    <th>Прізвище</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Спробуйте самі »

Примітка: Використання процента в якості одиниці виміру ширини означає, наскільки широким буде цей елемент порівняно з його батьківським елементом, яким в такому випадку є елемент <body>.


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

     
     
     

Щоб встановити розмір визначеного стовпця, додайте атрибут style до елементів <th> або <td>:

Приклад

Встановіть ширину першого стовпця на 70%:

<table style="width:100%">
  <tr>
    <th style="width:70%">Ім'я</th>
    <th>Прізвище</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Спробуйте самі »

HTML Висота рядка таблиці

     
     
     

Щоб встановити висоту визначеного рядка, додайте атрибут style до елемента рядка таблиці:

Приклад

Встановіть висоту другого рядка на 200 пікселів:

<table style="width:100%">
  <tr>
    <th>Ім'я</th>
    <th>Прізвище</th>
    <th>Вік</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Спробуйте самі »

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте CSS стилі, щоб зробити таблицю завширшки 300 пикселів.

<table >
  <tr>
    <th>Ім'я</th>
    <th>Прізвище</th>
    <th>Бали</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>



Коментарі