Печать

Основи HTML. Робота з таблицями

Актуалізація знань:

 Для створення таблиці в HTML використовується парний тег <table></table>:

Тег <table></table> 

Елемент <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і стовпців, які задаються за допомогою тегів <tr> і <td>.

Атрибути

  • align - визначає вирівнювання таблиці.
  • background - задає фоновий малюнок у таблиці.
  • bgcolor - колір фону таблиці.
  • border - товщина рамки в пікселях.
  • bordercolor- колір рамки.
  • cellpadding - відступ від рамки до вмісту осередку.
  • cellspacing - відстань між комірками.
  • cols - число колонок в таблиці.
  • frame - повідомляє браузеру, як відображати межі навколо таблиці.
  • height - висота таблиці.
  • rules - повідомляє браузеру, де відображати межі між комірками.
  • summary - короткий опис таблиці.
  • width - ширина таблиці.

Тег <tr></tr>

Тег <tr> служить контейнером для створення рядка таблиці. Кожна клітинка в межах такого рядка може задаватися за допомогою тега <th> або <td>.

Атрибути

  • align - визначає вирівнювання вмісту комірок по горизонталі.
  • bgcolor - колір фону комірок.
  • bordercolor - колір рамки.
  • char - вирівнювання вмісту комірок відносно заданого символу.
  • charoff - зсув вмісту осередків щодо зазначеного символу.
  • valign - вирівнювання вмісту комірок по вертикалі.

Тег <td></td>

Призначений для створення однієї комірки таблиці. Тег <td> повинен розміщуватися всередині контейнера <tr>, який в свою чергу розташовується всередині тега <table>.

Атрибути

  • abbr - короткий опис вмісту комірки.
  • align - визначає вирівнювання вмісту комірки по горизонталі.
  • axis - групує осередки пов'язані між собою схожою інформацією.
  • background - задає фоновий малюнок в комірці.
  • bgcolor - колір фону комірки.
  • bordercolor - колір рамки.
  • char - вирівнює вміст комірки по заданому символу.
  • charoff - зміщує вміст комірки відносно заданого символу.
  • colspan - об'єднує горизонтальні осередки.
  • headers - дозволяє зв'язати осередки з заголовком.
  • height - висота комірки.
  • nowrap - забороняє перенесення рядків.
  • rowspan - об'єднує вертикальні осередки.
  • scope - дозволяє зв'язати осередку простий таблиці з заголовками в мовних браузерах.
  • valign - вирівнювання вмісту осередку по вертикалі.
  • width - ширина комірки.

Тег <th></th>

Тег <th> призначений для створення однієї комірки таблиці, яка позначається як заголовна. Текст в такій клітинці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру. Тег <th> повинен розміщуватися всередині контейнера <tr>, який в свою чергу розташовується всередині тега <table>.

Атрибути

Такі ж як і для тега <tr>

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

 

Завдання:

1. Опрацювати статтю та законспектувати основні моменти.

2. Створити веб сторінку з розкладом ваших уроків, використовуючи теги для створення таблиць.

Хід виконання:

  • Створити сторінку з назвою timetable.html
  • У створеному документі створити структуру пустої веб сторінки.
  • Використовуючи теги таблиць, створити таблицю розміром 6х9 і заповнити її розкладом уроків для 9 класу.
  • Першу стрічку створити використовуючи теги <th>
  • Додати над таблицею відповідний заголовок. 
  • Зберегти створений документ та перевірити його працездатність. 

3. Створену веб сторінку переслати на перевірку використовуючи E-mail.