Znaiemo informatyku
Перейти до вправи:
Вибір
Перейти до теми:
HTML: таблиці та списки
Розгорнути на весь екран
Практикуйтеся без обмежень

Ваша кількість відповідей на день обмежена. Для збільшення ліміту або отримати доступ до аккаунту з ліцензією, будь ласка, увійдіть в систему.

Увійти в систему
Переглянути підсумовування теми
MGX
Поділитися
Показати налаштування вправи

QR-код

QR-код можна відсканувати, наприклад, за допомогою мобільного телефону, щоб перейти безпосередньо до цієї вправи або набору прикладів.

Код / коротка адреса

Трисимвольний код можна ввести в рядок пошуку, він також є частиною скороченої адреси.

Скопіюйте, клацнувши.

MGX

Налаштування вправи

Зверніть увагу, що налаштування дійсні лише для цієї вправи та предмету.

HTML: таблиці та списки

Списки

Невпорядковані списки створюються за допомогою тега пари <ul> (unordered list (невпорядкований список)). Ми позначаємо окремі елементи списку тегом <li> (list item (елемент списку)):

<ul>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ul>
  • вовк
  • лось
  • олень

Впорядковані списки створюються за допомогою тега пари <ol> (ordered list (упорядкований список)). Ми знову позначаємо окремі елементи тегом <li>:

<ol>

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>
  1. вовк
  2. лось
  3. олень

Тип маркера та нумерацію можна змінити за допомогою атрибута type:

<ol type="A">

<li>вовк</li>

<li>лось</li>

<li>олень</li>

</ol>
  1. вовк
  2. лось
  3. олень

Таблиці

Ми створюємо таблицю за допомогою тега <table>, її рядки за допомогою <tr> (table row (рядок таблиці)), клітинки за допомогою <td> (table data (дані таблиці)):

<table>

<tr><td>пес</td><td>вовк</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>
пес вовк
лось олень

Щоб виділити текст у заголовку, ми використовуємо <th> замість <td>:

<table>

<tr><th>Тварина</th><th>Зріст</th></tr>

<tr><td>лось</td><td>180 cм</td></tr>

<tr><td>олень</td><td>120 cм</td></tr>

</table>
Тварина Зріст
лось 180 cм
олень 120 cм

Типовий вигляд вихідних таблиць є зазвичай без ліній, що розділяють окремі клітинки. Зовнішній вигляд таблиці можна змінити за допомогою каскадних стилів (CSS).

Об’єднання клітинок

Клітинки можна об’єднати за допомогою атрибутів rowspan і colspan. Значення атрибута вказує, скільки рядків або стовпців ми об’єднуємо.

<table>

<tr><td rowspan=2>вовк</td><td colspan=2>пес</td></tr>

<tr><td>лось</td><td>олень</td></tr>

</table>
вовк пес
лось олень
Закрити

HTML: таблиці та списки (легке)

Вирішено:

ЗВ’ЯЖІТЬСЯ З НАМИ

Дякуємо за ваше повідомлення, його було успішно відправлено.

Напишіть нам

Вам потрібна допомога?

Будь ласка, спочатку ознайомтеся з поширеними запитаннями:

Про що йдеться у повідомленні?

Повідомлення Зміст Управління Вхід до системи Ліцензія