HTML & CSS для початківців (Частина 07): Таблиці (01)

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

<table>
…
</table>

У межах цього елементу відбувається власне визначення таблиці. Крім того, під час виконання таблиці в HTML рекомендується надати рамку. Це дозволяє краще розуміти, як саме прокладаються рядки та стовпці. Для цього додайте початковому елементу <table> комбінацію атрибуту і значення border="1". (Зверніть увагу, що атрибут border не повинен використовуватись в HTML. Замість цього слід користуватися відповідними властивостями CSS. Про це буде докладно розповідатися пізніше).

<table border="1">
…
</table>

Далі йдеться про визначення рядків таблиці. Це відбувається через елемент tr.

<table border="1">
   <tr></tr>
</table>

Проте це ще не приведе до очікуваного результату. Наступним кроком потрібно визначити стовпці. Це здійснюється через елемент td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Тепер ви можете визначити перший вміст таблиці. Ви це робите між <td> та </td>.

<table border="1">
   <tr>
      <td>Вміст 1</td>
   </tr>
</table>

Тільки зараз варто подивитися на результат у браузері.

Зазначимо, що це ще не дуже вражає, адже таблиця на даний момент складається лише з одної комірки таблиці. Тепер ви можете додати ще один стовпець. Для цього знову використовується елемент td. Важливо, щоб ви визначали його всередині елементу tr.

<table border="1">
   <tr>
      <td>Вміст 1</td>
      <td>Вміст 2</td>
   </tr>
</table>

Також слід подивитися на результат.

Для додавання додаткових рядків у таблицю просто створіть ще один елемент tr, в якому потім визначте потрібні елементи td.

Тут також приведено приклад:

<table border="1">
   <tr>
      <td>Вміст 1</td>
      <td>Вміст 2</td>
   </tr>
   <tr>
      <td>Вміст 3</td>
      <td>Вміст 4</td>
   </tr>
</table>

Погляд на результат у браузері показує наступне:





Таким чином, ви можете створювати розгалужені таблиці.

Визначення заголовку, тіла та підвалу

Таблиці можна розділити на логічні частини. Це може бути заголовок, одне або кілька тіл даних та підвал. Наступний приклад показує, як це може виглядати:

<table border="1">
  <thead>
    <tr>
      <th>Відправлення</th>
      <th>Прибуття</th>
      <th>Платформа</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Берлін</td>
      <td>Стральзунд</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Берлін</td>
      <td>Гамбург</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Мюнхен</td>
      <td>Берлін</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

А ось і результат у браузері:





Розподіл на зазначені області очевидно не надає жодного візуального ефекту. Звісно, виникає питання: чому варто турбуватися про визначення цих областей? Є дві добрі причини:

• За допомогою CSS можна відформатувати ці області за бажанням.

• При друку великих таблиць браузери можуть повторювати заголовок та підвал таблиці на кожній сторінці.

Заголовок таблиці відкривається за допомогою thead. Далі йдуть рядки таблиці, які належать до області заголовка. Не забудьте закрити область заголовка </thead>.

Якщо таблиця має отримати підвал, він обов'язково повинен бути визначений перед тілом таблиці. Початок підвалу позначається через <tfoot>. Далі може йти один або декілька рядків, які відносяться до області підвалу. Після цього варто закрити підвал таблиці за допомогою </tfoot>.

Справжнє тіло таблиці визначається всередині елементу tbody. Цей tbody може зустрічатися декілька разів. Тіло таблиці завжди закривається за допомогою </tbody>.

Чому, наприклад, треба використовувати кілька елементів tbody в таблиці? Чудовим прикладом для цього може бути таблиця Бундесліги. В такій таблиці зазвичай є декілька областей.

• Чемпіон

• Учасники Ліги Чемпіонів

• Кваліфікація до Ліги Чемпіонів

• Учасники Ліги Європи

• Сіре середнє поле

• Переходи

• Вибування

Кожен з цих розділів можна запакувати в окремий елемент tbody, і потім змінити їх форматування за допомогою CSS.

Попередньо визначені стовпці

Як таблиця відображається в браузерах, залежить, звичайно, у першу чергу від кількості наявних рядків і стовпців. Процес відображення таблиці для браузера, однак, не є дуже простим. Фактично, браузер завжди повинен спочатку повністю прочитати таблицю, перш ніж може її показати. Особливо при дуже об'ємних таблицях це може забрати певний час. Цю проблему можна уникнути, повідомивши безпосередньо браузеру, скільки стовпців насправді містить таблиця.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Назва</th>
     <th>Ціна</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Коротка історія майже всього</td>
     <td>29,95 євро</td>
   </tr>
 </table>

Через colgroup розпочинається попередня визначення встановлення стовпців. Зверніть увагу, що більшість атрибутів, доступних у раніших версіях HTML для colgroup, не є дозволеними в HTML5. У цей момент дозволений лише атрибут span. Цей атрибут очікує кількість стовпців у таблиці.

Елемент colgroup розташовується безпосередньо за вступним <table>. Стовпці визначаються за допомогою окремих елементів col.

При використанні colgroup загалом є два варіанти:

• З атрибутом span

• Без атрибуту span

Якщо ви не використовуєте атрибут span, всередині елементу colgroup для кожного стовпця, який повинен охоплювати цю групу стовпців, потрібно визначити окремий елемент col. Зверніть увагу, що col є самостійним елементом.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Назва</th>
     <th>Ціна</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Коротка історія майже всього</td>
     <td>29,95 євро</td>
   </tr>
 </table>

Між іншим, є ще гібридна форма.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Це завжди зручно, коли потрібно попередньо визначити один стовпець окремо, а інші об'єднати в групу.