Розділ 1 · Завдання 12

Таблиці

Три рівні тегів — і виходить справжня таблиця з рамками.

Завдання

Додай нижче все, що вже є (перед </body>):

index.html

<p>Мій розклад на понеділок:</p>
<table border="1">
  <tr>
    <th>Урок</th>
    <th>Предмет</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Інформатика</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Малювання</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Фізкультура</td>
  </tr>
</table>

Як це працює

<table> — контейнер всієї таблиці. <tr> — один рядок (table row). <td> — комірка в рядку (table data). Скільки <td> в рядку — стільки колонок.

border="1" — товщина рамки. <th> замість <td> у першому рядку робить його жирним заголовком таблиці.

Продовження: об'єднання клітинок, фон, вирівнювання

colspan — об'єднує клітинки по горизонталі (скільки колонок займає). style="background-color: ..." — фон клітинки. style="text-align: center;" — вирівнювання вмісту (можна також left або right).

Додай новий рядок в кінець таблиці:

index.html

<tr>
  <td colspan="2" style="background-color: lightgreen; text-align: center;">Кінець уроків</td>
</tr>

Спробуй

Забери colspan="2" і подивись — клітинка знову стає звичайною, вузькою. Поверни назад.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща