Меню сайту


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


Форма входу


Статистика

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


Пошук


Вітаю Вас, Гість · RSS 24.10.2017, 00:47
На головну » Підручники » Підручник HTML » Урок 10: Таблиці - Підручник HTML
Урок 10: Таблиці

Таблиці використовуються, коли вам необхідно показати "табличні дані" , наприклад, інформацію, логічно впорядковану у стовпці і ряди.

Це важко?

Побудова таблиць в HTML може здатися складним на перший погляд, але, якщо ви не будете смикатися, це виявиться суворо логічним - як і все в HTML.

Приклад 1:

   <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
   </table>

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

Cell 1 Cell 2
Cell 3 Cell 4

Яка різниця між <tr> і <td> ?

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

Для вставки таблиць використовуються 3 базових тега:
  • <table> - початок і кінець таблиці. Логічно.
  • <tr> - " T Able R OW / ряд таблиці ", починає і закінчує горизонтальний ряд клітинок. Теж логічно.
  • <td> - скорочення від " T Able D ATA / табличні дані ". Цей тег розпочинає і закінчує кожну клітинку ряду таблиці. Все просто і логічно.
Ось що відбувається в Прикладі 1: таблиця починається з <table> , потім йде <tr> , який вказує на початок нового ряду. У ряді вставлені дві клітинки: <td> Cell 1 </td> і <td> Cell 2 </td> . Ряд закривається </tr> , і відразу починається новий ряд <tr> . У новому ряду також дві клітинки. Таблиця закривається </table> .

Щоб було ще зрозуміліше: ряди це горизонтальні рядки клітинок, а стовпці - вертикальні стовпчики клітинок:

Cell 1 Cell 2
Cell 3 Cell 4

Cell 1 і Cell 2 утворюють ряд. Cell 1 і Cell 3 утворюють стовпець.

У наведеному вище прикладі в таблиці є два ряди і два стовпці. Але в таблиці може бути необмежена кількість рядів і стовпців.

Приклад 2:

   <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 5</td>
        <td>Cell 6</td>
        <td>Cell 7</td>
        <td>Cell 8</td>
      </tr>
        <td>Cell 9</td>
        <td>Cell 10</td>
        <td>Cell 11</td>
        <td>Cell 12</td>
      </tr>
   </table>

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

Cell 1 Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7 Cell 8
Cell 9 Cell 10 Cell 11 Cell 12

Є ще якісь атрибути?

Зрозуміло. Наприклад, атрибут border використовується для специфицирования товщини рамки навколо таблиці:

Приклад 3:

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

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

Cell 1 Cell 2
Cell 3 Cell 4

Товщина рамки специфікується в пікселях ( Див. Урок 9 )

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

Приклад 4:

<table border="1" width="30%">

Цей приклад буде відображено у браузері як таблиця шириною в 30% екрану. Перевірте самі.

Ще атрибути?

У таблиць є багато атрибутів. Ось ще два:
  • align: специфікує вирівнювання вмісту всієї таблиці по горизонталі, у ряду або в окремій клітинці. Наприклад, left, center або right.
  • valign: специфікує вирівнювання по вертикалі в клітинці. Наприклад, top, middle або bottom.
Приклад 5:

<td align="right" valign="top">Cell 1</td>

Що можна вставляти в таблиці?

Теоретично - все: текст, посилання та зображення ... АЛЕ таблиці призначаються для виведення табличних даних (тобто даних, які спочатку представляються у вигляді стовпців і рядів), тому уникайте вставки даних у таблиці тільки тому, що ви хочете розмістити їх поруч один з одним.

У добрі старі часи - тобто кілька років тому - таблиці часто використовувалися для розподілу вмісту на сторінці. Однак сьогодні для цього є більш крутий спосіб - CSS. Але про це пізніше.

Тепер застосуйте ваші знання на практиці і створіть декілька таблиць різних розмірів, з різними атрибутами і вмістом. Це займе у вас кілька годин.
<< Урок 9: Зображення
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]