HTML – це мова розмітки, яка дозволяє створювати веб-сторінки та структурувати їх. Одним із найважливіших елементів HTML є таблиця. Таблиця – це спосіб організації інформації у вигляді сітки з осередків, що дозволяє подати дані в структурованому вигляді.
Щоб створити таблицю за допомогою HTML, вам знадобиться тег "table". Всередині цього тегу можна використовувати інші теги для створення рядків та стовпців таблиці: "tr" для рядків і "td" для осередків. Ви також можете використовувати теги "th" для створення заголовків.
Приклад створення простої таблиці:
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
</table>Таблиця – це потужний інструмент організації інформації на веб-сторінці. Вона дозволяє створювати структуровані та впорядковані дані, що значно полегшує сприйняття користувачем. Використовуючи теги "table", "tr", "td" та "th", ви зможете створювати різні таблиці та адаптувати їх під свої потреби.
| Заголовок 1 | Заголовок 2 |
|---|---|
| Осередок 1 | Осередок 2 |
| Осередок 3 | Осередок 4 |
| Осередок 5 | Осередок 6 |
Як у HTML зробити таблицю?
Для додавання таблиці до веб-сторінки використовується тег <table>. Цей елемент є контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків та осередків, які задаються відповідно за допомогою тегів <tr> та <td>. Таблиця повинна містити хоча б один осередок (приклад 1).
Як зробити таблицю з різними осередками HTML?
Для об'єднання осередків таблиці HTML використовується атрибут rowspan або colspan . Атрибут rowspan дозволяє об'єднувати осередки по вертикалі, тобто об'єднати кілька осередків в один осередок, який займатиме кілька рядків таблиці.
Як зробити межі таблиці у HTML?
Щоб оформити межі осередків таблиці, достатньо застосувати CSS властивість border. На малюнку вище видно, що межа "задвоїлася", тому що css властивість border застосовується до кожного елемента таблиці – і до table, і до кожного th/td. Для того, щоб "схлопнути" такі межі, достатньо застосувати властивість border-collapse.