- •Лабораторная работа №1. «Основные понятия html»
- •Основные понятия html Что такое Интернет?
- •Зачем нужен язык разметки?
- •Об истории html
- •Браузеры
- •Html-файлы
- •Редакторы html-файлов
- •Коротко о главном
- •Лабораторная работа №2. «Общая структура html-документа»
- •Общая структура html-документа
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Коротко о главном
- •Лабораторная работа №3. «Оформление текста в html-документе»
- •Формирование абзацев и заголовков, работа со шрифтами Абзацы
- •Заголовки
- •Горизонтальные линии
- •Бегущая строка
- •Работа со шрифтами
- •Создание списков
- •Коротко о главном
- •Лабораторная работа №4. «Структура html-приложения. Гиперссылки»
- •Структура html-приложения. Гиперссылки Структура html-приложения
- •Создание гиперссылок
- •Коротко о главном
- •Лабораторная работа №5. «Графика и мультимедиа в html-документе»
- •Вставка графики и мультимедиа Вставка изображений
- •Вставка звука и видео
- •Коротко о главном
- •Лабораторная работа №6. «Таблицы в html-документе»
- •Создание таблиц
- •Пример создания простой таблицы
- •Пример создания таблицы с названиями столбцов
- •Создание сложных таблиц
- •Пример фрагмента html-документа для создания таблицы с различной шириной строк и столбцов
- •Оформление таблиц
- •Коротко о главном
- •Лабораторная работа №7. «Формы в html-документе»
- •Формы в html-документе Создание форм
- •Коротко о главном
- •Лабораторная работа №8. «Фреймы в html-документе»
- •Фреймы в html-документе Создание фреймов
- •Создание «плавающих» фреймов
- •Создание гиперссылок с учетом фреймов
- •Коротко о главном
- •Практическая работа. «Основы веб-конструирования»
Создание сложных таблиц
Часто встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соседних столбцах или строках. Для объединения ячеек используют атрибуты тега <TD>:
colspan – сообщает программе просмотра, что нужно объединить несколько ячеек в строке таблицы. Например, если нужно объединить ячейки двух столбцов, то следует использовать colspan=2;
rowspan – сообщает программе просмотра, что нужно объединить несколько ячеек в столбце таблицы на несколько строк. Например, rowspan=2 объединяет две ячейки в столбце.
Пример фрагмента html-документа для создания таблицы с различной шириной строк и столбцов
<Н1 align="center">Сложная таблица</Н1>
<table border="10" width="100%">
<tr>
<td rowspan="2">большая ячейка a</td>
<тd>маленькая ячейка 1</td>
<тd>маленькая ячейка 2</td>
</tr>
<tr>
<td colspan="2">большая ячейка b</td>
</tr>
</table>
Примечание. Атрибут border тега <table> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10.
Ширина рамки таблицы, равная нулю, обозначает ее отсутствие.
Оформление таблиц
Атрибут border тега <table> определяет ширину внешней рамки таблицы. Для задания параметров внешних и внутренних границ используются атрибуты frame и rules.
Атрибут frame тега <table> задает отображение внешней рамки и может принимать следующие значения:
box – все линии внешней рамки;
void – внешняя рамка не отображается;
hsides – только верхняя и нижняя линии рамки;
vsides – только левая и правая линии рамки;
lhs – только левая линия рамки;
rhs – только правая линия рамки.
Атрибут rules тега <table> задает отображение внутренней рамки и может принимать следующие значения:
none – все линии внутренней рамки не отображаются;
rows – отображаются только горизонтальные линии между строками;
cols – отображаются только вертикальные линии между столбцами;
all – отображаются все внутренние рамки.
Атрибут cellspacing тега <table> определяет расстояние между границами соседних ячеек.
Атрибут bordercolor тега <table> задаст цвет внешней рамки.
Атрибут bordercolor тегов <tr>, <th> и <td> задает цвет внутренних рамок/
Задание 6.2. Запишите определения основных понятий в тетрадь.
Коротко о главном
Таблица – это структурированная информация, представленная в виде столбцов и строк.
<TABLE> … </TABLE>– создание таблицы в HTML-документе
<CAPTION>… </CAPTION>– название таблицы
<TR> … </TR> – строка таблицы
<TD> … </TD> – столбец таблицы
<ТН> … </ТН> – заголовок столбца
Задание 6.3.
Создайте HTML-документ, содержащий таблицу из 2 строк и 5 столбцов. Таблица должна занимать все окно браузера. В ячейки таблицы занесите цифры от 0 до 9 и разместите их в центре ячеек.
<HTML> <HEAD> <TITLE>Taблица</TITLE> </HEAD> <BODY> <TABLE border="4" width="100%"> <TR align="center" valing="center"> <TD>0</TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR>
|
<TR align="center" valing="center"> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML>
|
Сохраните HTML-документ под именем tablica.html.
Просмотрите с помощью браузера, что получилось.
Задание 6.4.
Дополните HTML-документы «Школьного кафе» таблицами самостоятельно.