 Меню сайту |
|
| Підручники |
|
| Форма входу |
|
| Статистика |
Онлайн всього: 1 Гостей: 1 Користувачів: 0 |
| Пошук |
|
|
| Вітаю Вас, Гість · RSS |
03.12.2024, 19:05 |
|
На головну » Підручники » Підручник HTML » Урок 10: Таблиці - Підручник HTML
|
|
|
Таблиці використовуються, коли вам необхідно показати "табличні дані" , наприклад, інформацію, логічно впорядковану у стовпці і ряди.
Це важко?
Побудова таблиць в 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: Зображення
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
