InformatikUrok

Урок 4. Таблицы в HTML.

На предыдущем занятии мы научились работать со списками, а на этом занятии мы рассмотрим создание таблиц в HTML, изменение ширины таблицы, создание заголовка, объединение ячеек.  
 

Таблица в HTML создается с помощью контейнера <table></table>, строки задаются тегом <tr></tr>, а столбцы тегом <td>текст ячейки</td>. Как это делается подробно разберем в видеоуроке:

Для форматирования таблицы можно использовать атрибуты для тега <table>, например:

• border="число" – для отображения рамки таблицы
• align="center"  - для центрирования таблицы
• width="80%" - чтобы таблица занимала 80 процентов ширины экрана.

Изменить атрибуты можно и для конкретных ячеек или строк. Например, код <td align=”center”>ячейка</td> разместит содержимое в ячейке по центру. Обратите внимание, что при работе с таблицей ширина подстраивается под содержимое ячейки. Но с помощью атрибута width="число" ширину можно изменять. Размер задается, как в абсолютных значениях, например, width="20px" или width="200", так и в относительных width="80%."

Практикум

Задание 1:  Создайте таблицу в HTML вида:   Задание 2: Создайте таблицу в HTML вида:

Повторим материал по теме "Таблицы в HTML":

• Как создать таблицу, например, 2х3? Запишите html-код.
• Как изменить ширину первой строки в таблице?
• Как изменить ширину всей таблицы?
• Как задать заголовок к таблице?
• Прокомментируйте <table width="50%" border="2" cellspacing="0" cellpadding="4">
• Прокомментируйте <th>&nbsp;</th><th>Чебурашка</th>
• Как объединить ячейки по вертикали?
• Как объединить ячейки по горизонтали?
• Можно ли вложить таблицы одна в другую?

Ответы на вопросы напишите в отчет по Практикуму, электронный вариант которого разместите на GD.
На предыдущем уроке изучали "Списки в HTML". По работе с таблицами рекомендую ознакомиться с материалом Алленовой Натальи - postroika.ru/html/21step2.html