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

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

Приклад:

<table border="1">
   <tr>
      <th colspan="2">Терміни</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Перед початком зауважте про використання елементу th тут. За допомогою цього елемента визначаються заголовкові клітинки. Браузери зазвичай показують ці клітинки жирним та в центрі. А ось і результат у браузері:

В межах початкового th встановлюється атрибут colspan. Значенням є кількість стовпців, які має простягнутися поточна клітина. В кожному випадку слід звертати увагу на те, що кількість вказаних стовпців правильно відповідала, оскільки в іншому випадку можуть виникнути неприємні результати. У цьому прикладі заголовок, вказаний за допомогою th, має простягнутися через два стовпці. В межах двох інших рядків знову міститься по дві клітинки.

Ще одне зауваження стосовно з'єднання рядків. Під час розробки надайте таблицям рамку (border). Так ви завжди зможете одразу побачити, чи вдалося з'єднати так, як було задумано.

З'єднання клітинок у стовпці по рядках

Через атрибут rowspan можна з'єднати кілька клітинок в одному стовпці. Відповідна клітина затягується в межах стовпця на кілька рядків. Тут також приклад:

<table border="1">
   <tr>
      <th rowspan="2">Колір</th>
      <td>Синій</td>
   </tr>
   <tr>
      <td>Зелений</td>
   </tr>
   <tr>
      <th rowspan="2">Розмір</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

У браузері це виглядає наступним чином:





Атрибуту rowspan призначається числове значення. Воно визначає, скільки рядків у стовпці має затягнутися клітина. Тут також важливо, щоб вказана кількість рядків була правильною.

З'єднання клітинок одночасно за рядками та стовпцями

Два атрибути rowspan і colspan можна також комбінувати. Так можна визначити клітинки, які простягаються одночасно через кілька рядків і стовпців. Це також краще показати на прикладі.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Квартира</th>
      <td>5 кімнат</td>
   </tr>
   <tr>
      <td>154 м²</td>
   </tr>
   <tr>
      <td>Шарлоттенбург</td>
      <td>Місце для стоянки</td>
      <td>Підлогове опалення</td>
   </tr>
</table>

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





При комбінації цих двох атрибутів також слід бути уважним, щоб на кінці кінців кількість клітинок відповідала задуманому.

Позначення таблиць

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

Ось типове застосування для caption:





Вище таблиці показується заголовок. За замовчуванням заголовок виводиться по центру вище таблиці і його можна настроїти за допомогою CSS.

Елемент caption визначається безпосередньо після початкового <table>.

Ось повний синтаксис попереднього прикладу:

<table border="1">
   <caption>Медіа-дані</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Тема</th>
         <th>Перегляди</th>
         <th>Тенденція</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Стан на червень 2014 року</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12 245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12 123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11 546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Створення таблиць

Для оформлення таблиць існувало безліч атрибутів у попередніх версіях HTML. Ось кілька прикладів того, що можна було регулювати за допомогою атрибутів. (Звичайно, браузери досі підтримують ці атрибути. Проте в HTML5 їх все ж не рекомендується використовувати).

• Зовнішня рамка

• Внутрішня рамка таблиць

• Ширина і висота

• Лінії сітки

• Вирівнювання вмісту комірок

• Кольори

• Фонові зображення

Ви бачите, що насправді все можна контролювати за допомогою відповідних HTML-атрибутів. Наступний приклад показує таблицю, у якій ці можливості були широко використані:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Один</td>
      <td width="200" bgcolor="#00ffff">Два</td>
      <td width="200">Три</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Чотири<





Перегляд результату демонструє бажаний результат.







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







У попередні часи HTML і CSS треба було виконувати деякі заплутані маніпуляції з кодом для отримання такого результату. Якщо тепер використовувати беззаперечно можливості, які забезпечує CSS, таке стає дуже просто виконати.



tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}





Як вже було описано раніше, я детально розгляну CSS в рамках цього циклу.