• Гідрологія і Гідрометрія
• Господарське право
• Економіка будівництва
• Економіка природокористування
• Економічна теорія
• Земельне право
• Історія України
• Кримінально виконавче право
• Медична радіологія
• Методи аналізу
• Міжнародне приватне право
• Міжнародний маркетинг
• Основи екології
• Предмет Політологія
• Соціальне страхування
• Технічні засоби організації дорожнього руху
• Товарознавство продовольчих товарів

Cellspacing

Border

Width

Align

Scope

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

У Web-дизайні таблиці є способом організації даних.

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

Теги HTML, що використовуються при створенні таблиць:

<table></table>

Елемент table потрібен, щоб вказати браузеру, що контент необхідно організувати в табличному вигляді.

<tr></tr>

Елемент tr визначає рядок таблиці. Це дозволяє браузеру організувати вміст між тегами <tr> і </tr> у горизонтальному вигляді, або все в рядку.

<td></td>

Елемент td визначає осередок таблиці чи кожний окремий простір для контенту в рядку. Використовуйте тільки стільки комірок таблиці td, скільки потрібно для реальних даних. Не використовуйте порожні комірки td для прогалин чи заповнення.

Базові елементи повинні бути вкладені один в одного наступним чином:

<table>

<tr>

<td> комірка 1 </td>

<td> комірка 2 </td>

<td> комірка 3 </td>

</tr>

</table>

Додаткові елементи:

<caption></caption>

Елемент caption дозволяє створити заголовок для даних таблиці. Більшість браузерів будуть вирівнювати заголовок у центрі і робити його такої ж ширини, як і таблиця, якщо тільки для іншого вирівнювання тексту не використовується CSS.

<th></th>

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

Розглянемо приклад таблиці.

<table>

<caption> Основні виверження вулканів </caption >

<tr>

<th> Назва вулкана </th >

<th> Розташування </th >

<th> Останнє велике виверження </th >

<th> Тип виверження </th >

</tr>

<tr>

<td>Гора Лассен </td>

<td> Каліфорнія </td>

<td> 1914-17 </td>

<td> Вибухове виверження </td>

</tr>

<tr>

<td> Гора Худ </td>

<td> Орегон </td>

<td> 1790 </td>

<td> Пірокластичні і сельові потоки </td>

</tr>

<tr>

<td> Гора Сент-Хеленс </td>

<td> Вашингтон </td>

<td> 1980 </td>

<td> Вибухове виверження </td>

</tr>

</table>

Додамо ще декілька структурних елементів.

thead, tbodyі tfoot

Ці елементи визначають верхній колонтитул, тіло і нижній колонтитул таблиці відповідно.

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

У тегах th можна також помітити атрибути scope, а також те, що назви вулканів були визначені як заголовки всередині рядків даних!

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

colspanіrowspan

Атрибут colspan створює комірку таблиці, яка буде охоплювати більше одного стовпця.

Атрибут rowspan дозволить комірці таблиці охоплювати кілька рядків, наприклад, <td rowspan="3">.

Допустимі атрибути для тегу <table>

Допустимі значення: LEFT, CENTER і RIGHT. Визначає положення таблиці відносно до полів документа. За умовчанням встановлено вирівнювання по лівому краю, але це можна змінити шляхом включення в документ елемента DIV або CENTER.

При відсутності цього атрибуту ширина таблиці визначається автоматично залежно від вмісту. Атрибут WIDTH можна використовувати для установки фіксованої ширини у пікселях (наприклад, WIDTH = 212) або у відсотках від простору між лівим і правим полем (наприклад, WIDTH = "80%").

Використовується для вказівки ширини зовнішньої окантовки таблиці у пікселях (наприклад, BORDER = 4). Значення можна встановити рівним нулю, в результаті чого окантовка не буде видно. У відсутність цього атрибуту окантовка також не повинна показуватися на екрані. Зверніть увагу: деякі браузери сприймають мітку <TABLE BORDER> точно так само, як BORDER = 1.

У традиційному видавничому програмному забезпеченні розташовані поруч елементи таблиці мають загальну окантовку. У HTML це не так. Кожна комірка має власну окантовку. Ширина окантовки осередку в пікселях встановлюється атрибутом CELLSPACING (наприклад, CELLSPACING = 10). Цей атрибут також встановлює відстань між окантовкою таблиці і окантовками крайніх клітин таблиці.

Переглядів: 693