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

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

Для додавання таблиці на веб-сторінку використовується тег-контейнер <TABLE>. Таблиця повинна містити хоча б один рядок і колонку (приклад 1).

Приклад 1. Створення таблиці

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Таблиця </ title>
</ Head>
<Body>

<Table>
<Tr>
<Td> Вміст таблиці </ td>
</ Tr>
</ Table>

</ Body>
</ Html>

Для додавання рядків використовується тег <TR>. Щоб розділити рядки на колонки застосовуються теги <TD> і <TH> (приклад 2). Різниця між цими тегами наступна. Тег <TH> призначений для створення заголовків, вміст такого осередку позначається жирним шрифтом і вирівнюється по центру (приклад 2). В іншому, діють ці теги однаково.

Приклад 2. Стовпчики таблиці

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Таблиця </ title>
</ Head>
<Body>

<Table border = "1">
<Tr>
<Th> Осередок 1 </ th>
<Td> Осередок 2 </ td>
</ Tr>
<Tr>
<Th> Осередок 3 </ th>
<Td> Осередок 4 </ td>
</ Tr>
</ Table>

</ Body>
</ Html>

Нижче показано розташування елементів таблиці.

Мал. 1

Мал. 1. Вид таблиці

особливості таблиць

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

  • Одну таблицю допускається поміщати всередину осередку іншої таблиці. Це потрібно для представлення складних даних або в тому випадку, коли одна таблиця виступає в ролі модульної сітки, а друга, всередині неї, вже як звичайна таблиця.
  • Розміри таблиці спочатку не встановлені і обчислюються на основі вмісту комірок. Наприклад, загальна ширина визначається автоматично виходячи з сумарної ширини вмісту осередків плюс ширина кордонів між осередками, поля навколо вмісту, що встановлюються через параметр cellpadding і відстань між осередками, які визначаються значенням cellspacing.
  • Якщо для таблиці задана її ширина у відсотках або пікселах, то вміст таблиці підстроюється під вказані розміри. Так, браузер автоматично додає переноси рядків у текст, щоб він повністю помістився в осередок, і при цьому ширина таблиці залишилася без змін. Буває, що ширину вмісту комірки неможливо змінити, як це, наприклад, відбувається при додаванні малюнків в осередок. У цьому випадку ширина таблиці збільшується, незважаючи на зазначені розміри.
  • Рамка таблиці, в разі додавання параметра border до тегу <TABLE>, спочатку відображається як тривимірна. Приєднання параметра bordercolor перетворює рамку в однотонну, ліквідуючи тим самим ефект тривимірності.
  • Поки таблиця не може завантажиться повністю, її вміст не почне відображатися. Справа в тому, що браузер, перш ніж показати вміст таблиці, повинен обчислити необхідні розміри осередків, їх ширину і висоту. А для цього необхідно знати, що в цих осередках знаходиться. Тому браузер і чекає, поки завантажиться все, що знаходиться в осередках, і тільки потім відображає таблицю.

Copyright що кредитують © www.htmlbook.ru