Технології це просто

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

Основним тегом для позначення таблиці є <table>. Елемент TABLE являє собою тег – контейнер, в якому розміщується вміст таблиці. Побудова таблиці здійснюється по рядках, для позначення яких застосовується контейнер TR. Всередині контейнера рядків поміщаються контейнери для позначення осередків. Стандарт HTML визначає два типи контейнерів для позначення осередків <th> і <td>.

Перший призначений для позначення заголовків, а другий для даних в осередках. Відмінність цих двох елементів полягає лише в тому як їх вміст відображається браузером, заголовки більшість браузерів виділяють напівжирним шрифтом і центрують у своїх осередках. Осередок даних може містити текст, зображення, списки, параграфи, форми, горизонтальні лінійки, таблиці і т. д.
Розглянемо вищевикладене на прикладах різного виду таблиць.

<html>
<body>

<p>
Кожна таблиця починається з тега table.
Кожен рядок таблиці починається з тега tr.
Кожен елемент даних таблиці починається з тега td.
</p>

<h1> Це приклад найпростішої таблиці, яка містить один рядок і одну клітинку. </h1>
<table border="1">
<tr>
  <td> Один рядок і один осередок </td>
</tr>
</table>

<h1> Один рядок і три стовпці: </h1>
<table border="1">
<tr>
  <td> стовпець 1 </td>
  <td> стовпець 2 </td>
  <td> стовпець 3 </td>
</tr>
</table>

<h1> Два рядки і три стовпці: </h1>
<table border="1">
<tr>
  <td> 1.1 </td>
  <td> 1.2 </td>
  <td> 1.3 </td>
</tr>
<tr>
  <td> 2.1 </td>
  <td> 2.2 </td>
  <td> 2.3 </td>
</tr>
</table>

<h1> Рамка таблиці </h1>

<h1> Звичайна рамка: </h1>
<table border="1">
<tr>
  <td> Перша </td>
  <td> рядок </td>
</tr>
<tr>
  <td> Друга </td>
  <td> рядок </td>
</tr>
</table>

<h1> Товста рамка: </h1>
<table border="10">
<tr>
  <td> Перша </td>
  <td> рядок </td>
</tr>
<tr>
  <td> Друга </td>
  <td> рядок </td>
</tr>
</table>

<table border="1">
<tr>
<td> рядок 1, комірка 1 </td>
<td> рядок 1, осередок 2 </td>
</tr>
<tr>
<td> рядок 2, осередок 1 </td>
<td> рядок 2, осередок 2 </td>
</tr>
</table>
</body>
</html>

Приклад виконання даного HTML – коду

Для тега table визначені наступні атрибути.

align – визначає спосіб горизонтального вирівнювання таблиці на сторінці. Можливі значення: left, center, right. Значення за замовчуванням – left.
valign – повинен визначати спосіб вертикального вирівнювання для вмісту таблиці. Можливі значення: top, bottom, middle.
border – визначає ширину зовнішньої рамки таблиці ( в пікселях). При BORDER = ” 0 ” або за відсутності цього параметра рамка відображатися не буде.
cellpadding – визначає відстань (у пікселах ) між рамкою кожного осередку таблиці і вмісту в ній матеріалом.
cellspacing – визначає відстань (у пікселах ) між кордонами сусідніх комірок.
width – визначає ширину таблиці. Ширина задається або в пікселах, або у відсотковому відношенні до ширини вікна браузера. За умовчанням цей параметр визначається автоматично залежно від обсягу що міститься в таблиці матеріалу.
height – визначає висоту таблиці. Висота задається або в пікселах, або у відсотковому відношенні до висоті вікна браузера. За умовчанням цей параметр визначається автоматично залежно від обсягу що міститься в таблиці матеріалу.
bgcolor – визначає колір фону комірок таблиці. Задається або RGB – значенням в шістнадцятковій системі, або одним з 16 базових кольорів.
background – дозволяє заповнити фон таблиці малюнком. Як значення необхідно вказати URL малюнка.

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

Такі елементи як <thead>, <tbody> і <tfoot> використовуються рідко у зв’язку з тим, що не всі браузери їх підтримують.

Для тегів <td> і <th> дуже корисними є атрибути colspan і rowspan. Перший показує скільки осередків треба об’єднати по горизонталі, а другий по вертикалі. Слід зауважити, що якщо ми застосовуємо об’єднання осередків, то загальне число осередків з урахуванням об’єднаних має бути рівним. Продемонструємо на прикладі.

<h4> Правильне застосування colspan: </h4>
<table border=”1″>
<tr>
<td colspan=”2″> 100 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

<h4> Неправильне застосування colspan: </h4>
<table border=”1″>
<tr>
<td colspan=”2″> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

<h4> Правильне застосування rowspan: </h4>
<table border=”1″>
<tr>
<td rowspan=”2″> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

<h4> Неправильне застосування rowspan: </h4>
<table border=”1″>
<tr>
<td rowspan=”2″> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>
</body>
</html>

Таблиця без рамки

<h4> Ця таблиця не має рамки: </h4>
<table>
<tr>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

<h4> І ця таблиця не має рамки: </h4>
<table border=”0″>
<tr>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

</body>
</html>

Заголовки в таблиці

<h4> Заголовки таблиці: </h4>
<table border=”1″>
<tr>
<th> Ім’я </th>
<th> Телефон </th>
<th> Телефон </th>
</tr>
<tr>
<td> Калиткин </td>
<td> 202 55 55 </td>
<td> 456 77 84 </td>
</tr>
</table>

<h4> Вертикальні заголовки: </h4>
<table border=”1″>
<tr>
<th> Прізвище: </th>
<td> Калиткин </td>
</tr>
<tr>
<th> Телефон: </th>
<td> 202 55 55 </td>
</tr>
<tr>
<th> Телефон: </th>
<td> 456 77 84 </td>
</tr>
</table>

</body>
</html>

Порожні осередки

<table border=”1″>
<tr>
<td> Деякий текст </td>
<td> Деякий текст </td>
</tr>
<tr>
<td> </td>
<td> Деякий текст </td>
</tr>
</table>

<p>
Як можна бачити, один з осередків не має рамки.
Це тому, що вона порожня. Спробуйте вставити в клітинку прогалину.
Вона як і раніше не матиме рамки.
</p>

<p>
Хитрість полягає в тому, щоб вставити в клітинку нерозривний пробіл.
</p>

<p> Нерозривний пробіл є символьним об’єктом.
</p>

<p> Об’єкт нерозривного пробілу починається з амперсанда ( “&” ),
потім слідують букви “nbsp”, і в кінці стоїть крапка з комою ( “;” )
</p>

</body>
</html>

Назва таблиці

<h4>
Ця таблиця має назву і товсту рамку:
</h4>

<table border=”6″>
<caption> Назва </ caption >
<tr>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
<tr>
<td> 400 </td>
<td> 500 </td>
<td> 600 </td>
</tr>
</table>

</body>
</html>

Осередки таблиці, які охоплюють більше одного рядка / стовпця

<h4> Осередок, яка охоплює два стовпці: </h4>
<table border=”1″>
<tr>
<th> Організація </th>
<th colspan=”2″> Телефон </th>
</tr>
<tr>
<td> Інтернет- Університет Інформаційних Технологій </td>
<td> 253-9312 </td>
<td> 253-9313 </td>
</tr>
</table>

<h4> Осередок, яка охоплює два рядки: </h4>
<table border=”1″>
<tr>
<th> Організація: </th>
<td> Інтернет- Університет Інформаційних Технологій </td>
</tr>
<tr>
<th rowspan=”2″> Телефон: </th>
<td> 253-9312 </td>
</tr>
<tr>
<td> 253-9313 </td>
</tr>
</table>

</body>
</html>

Теги усередині таблиці

<html>
<body>
<table border=”1″>
<tr>
<td>
<p> Це параграф </p>
<p> Це інший параграф </p>
</td>
<td> Ця комірка містить таблицю:
<table border=”1″>
<tr>
<td> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
<td> D </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> Ця комірка містить список
<ul>
<li> елемент 1 </li>
<li> елемент 2 </li>
<li> елемент 3 </li>
</ ul >
</td>
<td> КІНЕЦЬ </td>
</tr>
</table>

</body>
</html>

Відступ від рамки до вмісту комірки

<h4> Без відступу: </h4>
<table border=”1″>
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

<h4> З відступом ( cellpadding ): </h4>
< table border = ” 1 “
cellpadding = ” 10 “>
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

</body>
</html>

Відстань між осередками

<h4> Відстань між осередками не задано: </h4>
<table border=”1″>
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

<h4> Відстань між осередками ( cellspacing ) задано: </h4>
< table border = ” 1 “
cellspacing = ” 10 ” >
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

</body>
</html>

Використання в таблиці фонового кольору або фонового зображення

<h4> Фоновий колір (bgcolor): </h4>
< table border = “1”
bgcolor = ” red”>
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

<h4> Фонове зображення ( background ): </h4>
< table border = “1”
background = “bg.jpg” >
<tr>
<td> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> Рядок </td>
</tr>
</table>

</body>
</html>

Фоновий колір або фонове зображення в комірці таблиці

<h4> Осередки з фоном: </h4>
<table border=”1″>
<tr>
<td bgcolor=”red”> Перша </td>
<td> Рядок </td>
</tr>
<tr>
<td background=”bg.jpg”> Друга </td>
<td> Рядок </td>
</tr>
</table>

</body>
</html>

Вирівнювання вмісту в осередках таблиці

<table width=”360″ border=”1″>
<tr>
<th align=”left”> Опубліковано матеріалів </th>
<th align=”center”> 2004 </th>
<th align=”center”> 2005 </th>
</tr>
<tr>
<td align=”left”> Порад < / td >
<td align=”center”> 2 </td>
<td align=”center”> 3 </td>
</tr>
<tr>
<td align=”left”> Описів </td>
<td align=”center”> 4 </td>
<td align=”center”> 5 </td>
</tr>
<tr>
<td align=”left”> Оглядів </td>
<td align=”right”> 2 </td>
<td align=”right”> 3 </td>
</tr>
<tr>
<th align=”left”> всього </th>
<th align=”right”> 8 </th>
<th align=”right”> 11 </th>
</tr>
</table>

</body>
</html>

Атрибут frame

<p>
Якщо жодні кордони кадру таблиці в цих прикладах не видні,
то використовуваний браузер занадто старий, або не підтримує їх.
</p>

<h4> frame = ” border “: </h4>
<table frame=”border”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” box “: </h4>
<table frame=”box”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” void “: </h4>
<table frame=”void”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” above “: </h4>
<table frame=”above”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” below “: </h4>
<table frame=”below”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” hsides “: </h4>
<table frame=”hsides”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” vsides “: </h4>
<table frame=”vsides”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” lhs “: </h4>
<table frame=”lhs”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

<h4> frame = ” rhs “: </h4>
<table frame=”rhs”>
<tr>
<td> Перша </td>
<td> рядок </td>
</tr>
<tr>
<td> Друга </td>
<td> рядок </td>
</tr>
</table>

</body>
</html>

Теги таблиць в HTML тег та його Опис
<table> Визначає таблицю
<th> Визначає заголовки в таблиці
<tr> Визначає рядок таблиці
<td> Визначає комірку таблиці
<caption> Визначає заголовок таблиці
<colgroup> Визначає групи стовпців таблиці
<col> Визначає значення атрибутів для одного або декількох стовпців таблиці
<thead> Визначає заголовок групи рядків таблиці
<tbody> Визначає тіло групи рядків таблиці
<tfoot> Визначає нижній заголовок групи рядків таблиці

Таблиці html

Коментарі

Написати коментар

Схожі записи

Вибір редакції:

Вам може сподобатись:

Цікаві відео: