LAB6 Мясникова О.А (Лабораторная работа 6)
Описание файла
Файл "LAB6 Мясникова О.А" внутри архива находится в папке "Лабораторная работа 6". Документ из архива "Лабораторная работа 6", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.
Онлайн просмотр документа "LAB6 Мясникова О.А"
Текст из документа "LAB6 Мясникова О.А"
НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ
МОСКОВСКИЙ ЭНЕРГЕТИЧЕСИЙ ИНСТИТУТ(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
Лабораторная работа №6 по дисциплине ВМСС
Разработка web-страниц, содержащих таблицы и списки
Выполнила
студентка группы
А-13-08
Мясникова Ольга
Преподаватель:
Куриленко И.Е.
Москва, 2012
Таблицы
Тег
Описание
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов
и
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table>
<tr>
<td>...td>
tr>
table>
Атрибуты
align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег
Описание
Элемент предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Допускается применять несколько тегов внутри контейнера . Доступны и другие виды группировок строк — и , ни один из них не должен перекрываться с элементом .
Синтаксис
<table>
<thead> .... thead>
<tfoot> ... tfoot>
<tbody>
<tr>
<td> ... td>
tr>
tbody>
table>
Атрибуты
align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера .
valign
Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег
Описание
Предназначен для создания одной ячейки таблицы. Тег
Синтаксис
<table>
<tr>
<td>...td>
tr>
table>
Атрибуты
abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег
Описание
Элемент предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в исходном коде сразу после тега .
Синтаксис
<table>
<thead>
<tr>
<td> ... td>
tr>
thead>
<tfoot> ... tfoot>
<tbody> ... tbody>
table>
Атрибуты
align
Определяет выравнивание текста в строке.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера .
valign
Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег
Описание
Элемент предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег в исходном коде должен быть определен до тега, браузеры отображают его в самом низу таблицы.
В пределах таблицы разрешается использовать только один элемент .
Синтаксис
<table>
<thead> ... thead>
<tfoot>
<tr>
<td> ... td>
tr>
tfoot>
<tbody> ... tbody>
table>
Атрибуты
align
Определяет выравнивание текста в строке.
bgcolor
Цвет фона ячеек, которые расположены внутри контейнера .
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег
Описание
Тег служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега
Синтаксис
<table>
<tr>
<td>...td>
tr>
table>
Атрибуты
align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Списки
Тег
Описание
Тег устанавливает маркированный список. Каждый элемент списка должен начинаться с тега . Если к тегу
применяется таблица стилей, то элементы наследуют эти свойства.
Синтаксис
<ul>
<li>элемент маркированного спискаli>
ul>
Атрибуты
type
Устанавливает вид маркера списка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег
Описание
Тег устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега . Если к тегу
применяется таблица стилей, то элементы наследуют эти свойства.
Синтаксис
<ol>
<li>элемент нумерованного спискаli>
<li>элемент нумерованного спискаli>
ol>
Атрибуты
type
Устанавливает вид маркера списка.
reversed
Нумерация в списке становится по убыванию (3,2,1).
start
Задаёт число, с которого будет начинаться нумерованный список.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег
Описание
Тег определяет отдельный элемент списка. Внешний тег или
устанавливает тип списка — маркированный или нумерованный.
Синтаксис
<ul>
<li>элемент маркированного спискаli>
ul>
<ol>
<li>элемент нумерованного спискаli>
ol>
Атрибуты
type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Выполнение
Добавить на одну из страниц разработанного ресурса таблицу из списка вариантов заданий.
Создать информационную таблицу с объединением ячеек, выделением ячеек цветом, границей.
Разработать страницу, содержащую несколько маркированных списков с различными типами маркеров.
Разработать страницу, содержащую несколько нумерованных списков с различными типами нумерации.
Разработать страницу, содержащую маркированный список нумерованных списков.
Исходный код страницы со списками и таблицами.
Таблица по варианту
Информативная таблица
| Объединенные ячейки с цветом | Пунктирная граница | Вертикально объединенные ячейки | |
| Четыре объединенные ячейки | А здесь есть отступы | ||
| Две объединенные ячейки | |||
Неупорядоченные списки
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
Упорядоченные списки
- Первый элемент
- Второй элемент
- Третий элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Первый
- Второй
- Третий
- Четвертый
- Пятый
- Шестой
- Седьмой
- Восьмой
- Девятый
Неупорядоченный список упорядоченных списков
Стили
#tbl6
{width:300px;
height:300px;
border-collapse:collapse;
margin:10px;
}
.b
{border:2px solid black;}
.d
{border:2px dashed black;}
#tblsm
{width:400px;
height:400px;
border-collapse:collapse;
border:2px solid red;}
.t1
{background-color:Aqua;
border:2px dotted green;
}
.t2
{background-color:Fuchsia;
border:4px dashed purple;
}
tr, td
{border:1px solid black;
height:25%;
width:25%;
}
.t3
{border:3px groove orange;
background-color:Teal;
}
.t4
{border:3px dotted orange;
background-color:Navy;
}
.t5
{border:3px dotted Silver;
background-color:Yellow;
padding:15px;
}
#l1
{list-style-type:circle;
float:left;
margin:30px;}
#l2
{list-style-type:square;
margin:30px;}
#ol1
{list-style-type:decimal;
float:left;
margin:30px;}
#ol2
{list-style-type:upper-alpha;
margin:30px;}
