Презентация для урока информатики по теме "Создание таблиц в HTML"

Создание таблиц в HTML

Создание таблицы в HTML

• содержание

Границы

• Для выделения границ таблицы используется атрибут border:

АТРИБУТЫ ТЕГА TABLE

align

left — таблица влево; center – табл. по центру; right — табл. вправо

width

400 50%

bоrdеr

ширина

bordercolor

сеllspacing

цвета рамки

ширина грани рамки

cellpadding

внутреннее расстояние до рамки

bgсоlоr

Цвет #rrggbb

bасkground

файл (фон таблицы)

Ячейки - заголовки

• Для ячеек-заголовка таблицы используется тег  th  вместо td. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Тег заголовка

• Тег  caption  служит для создания заголовка таблицы

АТРИБУТЫ ТЕГА TR — СТРОКИ

align

left, center, right

valign

выравнивание по горизонтали

top, middle, bottom, baseline

bgcolor

выравнивание по вертикали

цвет

bordercolor

задний фон

цвет

цвет границы

Объединение ячеек в таблице

В происходит при помощи двух атрибутов тега td: 

• COLSPAN — объединение ячеек по горизонтали, 
• ROWSPAN  — объединение ячеек по вертикали.

tr td rowspan="2" td td td tr tr td td tr table " width="640"

Объединение ячеек в таблице

• table border="1" width="50%" tr td rowspan="2" td td td tr tr td td tr table

Пример

• создать таблицу по образцу на картинке. Использовать слияние ячеек

caption таблица с объединенными ячейками caption tr th rowspan="2" th th colspan="2"3аголовок 1th tr tr th заголовок 1.1th th заголовок 1.2th tr tr th заголовок 2th td ячейка 1td td ячейка 2td tr tr th заголовок 3th td ячейка 3td td ячейка 4td tr table " width="640"

table border="1"

caption таблица с объединенными ячейками caption

tr th rowspan="2" th

th colspan="2"3аголовок 1th tr

tr th заголовок 1.1th

th заголовок 1.2th tr

tr th заголовок 2th td ячейка 1td td ячейка 2td tr

tr th заголовок 3th td ячейка 3td td ячейка 4td tr table

Вложенные таблицы

Таблица 1

Таблица 2

Ячейка 2-2

Ячейка 3-2

Ячейка 4-2

Ячейка 3-1

Ячейка 4-1

tr td bgcolor="yellow"Таблица 1td td bgcolor="yellow" TABLE border=2 bgcolor="#FFFFFF" tr td Таблица 2td td Ячейка 2-2td tr tr td Ячейка 3-2td td Ячейка 4-2td tr TABLE td tr td bgcolor="yellow"Ячейка 3-1td td bgcolor="yellow"Ячeйкa 4-1td tr TABLE " width="640"

Вложенные таблицы

TABLE border="4"

tr td bgcolor="yellow"Таблица 1td

td bgcolor="yellow"

TABLE border=2 bgcolor="#FFFFFF" tr td Таблица 2td

td Ячейка 2-2td tr tr td Ячейка 3-2td

td Ячейка 4-2td tr TABLE td

tr td bgcolor="yellow"Ячейка 3-1td

td bgcolor="yellow"Ячeйкa 4-1td tr TABLE

Структура страницы

• Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
• Вставьте в левую нижнюю ячейку вложенную таблицу
• Фон ячеек вложенной таблицы сделайте серым