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

En Es De

HTML Таблиці. Colspan & Rowspan


HTML таблиці можуть мати чарунки, які охоплюють декілька рядків і/або стовпців.


NAME  
     
     
     
     
APRIL    
   
   
     
     
2025
     
FIESTA  
 
     

HTML Таблиця - Colspan

Щоб створити чарунку, що охоплює кілька стовпців, використовуйте атрибут colspan:

Приклад

<table>
  <tr>
    <th colspan="2">Ім’я</th>
    <th>Вік</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>
Спробуйте самі »

Примітка: Значення атрибуту colspan визначає кількість стовпців, які необхідно охопити.


HTML Таблиця - Rowspan

Щоб чарунка охопила кілька рядків, використовуйте атрибут rowspan:

Приклад

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>
Спробуйте самі »

Примітка: Значення атрибута rowspan визначає кількість рядків для охоплення.


HTML Вправи

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

Вправа:

Використовуйте правильний атрибут HTML, щоб перший елемент TH займав два стовпці.

<table>
  <tr>
    <th >Name</th>
    <th>Age</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>



Коментарі