Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 20.04.2024, 09:09
На головну » Підручники » Підручник HTML » Урок 11: Ще про таблиці - Підручник HTML
Урок 11: Ще про таблиці

Назва "Ще про таблиці" може звучати трохи зухвало. Якщо ви вже можете створювати таблиці, то вже абсолютно ніщо в HTML не може збентежити вас.

Що ж ще?

При створенні таблиць використовуються два атрибути: colspan і rowspan.

Colspan - скорочення від "column span / охоплення стовпців". Colspan використовується в тезі <td> для специфікування того, скільки стовпців охоплює дана клітинка:

Приклад 1:

   <table border="1">
      <tr>
        <td colspan="3">Cell 1</td>
      </tr>
      <tr>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
   </table>

буде виглядати в браузері:

Cell 1
Cell 3 Cell 4 Cell 4

Установка colspan "3", змушує клітинку в першому ряду охоплювати три стовпці. Якщо встановимо colspan "2", осередок охопить тільки два стовпці, і знадобиться вставити додаткові клітинки в перший ряд, щоб клітинки рівно розподілилися на два ряди.

Приклад 2:

   <table border="1">
      <tr>
        <td colspan="2">Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
      </tr>
   </table>

буде виглядати в браузері:

Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

А як щодо rowspan?

Як ви вже могли здогадатися, rowspan специфікує, скільки рядів охоплює дана клітинка:

Приклад 3:

   <table border="1">
      <tr>
        <td rowspan="3">Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td>Cell 4</td>
      </tr>
   </table>

будет виглядати в браузері:

Cell 1 Cell 2
Cell 3
Cell 4

У цьому прикладі rowspan має значення "3" у клітинці Cell 1. Це вказує, що клітинка повинна охоплювати три ряди (свій власний ряд плюс ще два). Cell 1 і Cell 2 при цьому залишаються в одному ряду, а Cell 3 та Cell 4 утворюють окремі ряди.

Здивовані? Гаразд, це не так складно. Непогано буде намалювати таблицю на папері до початку роботи в HTML.

Не дивно? Тоді поверніться до початку і створіть пару таблиць з використанням colspan і rowspan.
<< Урок 10: Таблиці
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]