LAB6 Мясникова О.А (544748)
Текст из файла
НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ
МОСКОВСКИЙ ЭНЕРГЕТИЧЕСИЙ ИНСТИТУТ(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
Лабораторная работа №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;}
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
