МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ

Лабораторная работа №6

По дисциплине: «Вычислительные машины, системы и сети»

На тему: «Разработка web-страниц, содержащих таблицы и списки»

Выполнила:

Степная Е. В.

А-13-08

Вариант 17

Проверил:

Куриленко И. Е.

2012 г.

Цель работы

Научиться оформлять таблицы на WEB-страницах. Получить навыки оформления маркированных и нумерованных списков на WEB-страницах.

Теги HTML, отвечающие за разметку таблиц

Элемент

служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов и . Внутри допустимо использовать следующие элементы: , , , , , и .

,
,

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Тег предназначен для создания заголовка к таблице и может размещаться только внутри контейнера

, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Тег задает ширину и другие характеристики одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег можно использовать совместно с тегом , который задает группу колонок, обладающих общими характеристиками.

Тег предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег можно использовать в комбинации с тегом , который определяет характеристики одной или нескольких колонок.

Элемент предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов внутри контейнера

. Доступны и другие виды группировок строк — и , ни один из них не должен перекрываться с элементом .

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

Элемент предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег в исходном коде должен быть определен до тега , браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент .

Тег предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег должен размещаться внутри контейнера , который в свою очередь располагается внутри тега

.

Элемент предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в исходном коде сразу после тега

.

Тег служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега или .

Стили таблиц в HTML

Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал.

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега

. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD.

Границы и рамки

Линии между ячейками можно установить несколькими методами.

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега

задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах.

Это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек

Если задать

, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse, которое добавляется к селектору TABLE

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align.

Способы разметки маркированных и нумерованных списков

Маркированные списки - это списки, в которых элементы списка отмечаются маркерами, а нумеровнные - цифрами по порядку.

Маркированные списки

Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.

Для установки маркированного списка используются теги

и

Тег

- unordered list (неупорядоченный список).

Тег

- list item (элемент списка)

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега

.

С помощью CSS можно задать в качестве маркера любое изображение. В этом случае следует помнить: при масштабировании текста при просмотре в браузере стандартные маркеры масштабируются вместе с ним, а изображения, используемые в качестве маркера, не масштабируются.

Нумерованные списки

Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов.

Для установки нумерованного списка используется тег

вместо

Тег

- ordered list (упорядоченный список).

Вложенные списки

Вложенный список - это список, размещенный внутри другого списка.

Списки определений

Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений ... , элемента определения термина ... , элемента определения описания ... .

Таблица из списка вариантов заданий

Мой вариант: 17.

http://www.w3.org/wiki/CSS/Properties/border-top-style - согласно данному источнику задать стиль границы «пунктир с точкой» нельзя, поэтому в одном случае я использовала пунктир, а в другом точки.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел	3 пиксела	5 пикселов	7 пикселов
Dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
Solid	solid	solid	solid
Double	double	double	double
Groove	groove	groove	groove
Ridge	ridge	ridge	ridge
Inset	inset	inset	inset
Outset	outset	outset	outset

Результат

Исходный код

Вариант 17

Информационная таблица с объединением ячеек, выделением ячеек цветом, границей

Исходный код

Информационная таблица

Зеленая ячейка 1	Ячейка с двумя столбцами		Зеленая ячейка 2
Ячейка с двумя строками	Ячейка с двумя строками и двумя столбцами		Ячейка
			Ячейка
Зеленая ячейка 3			Зеленая ячейка 4

Классы CSS для таблиц

.table1

{

/* visibility: visible;*/

border-collapse: collapse;

background-color: #FFFFFF;

width: 400px;

height: 400px;

font-size: medium;

font-weight: bold;

font-style: normal;

text-align: center;

}

/*Стиль верхней правой ячейки*/

#lv1

{

border-width: medium;

border-color: #000000;

border-top-style: dashed;

border-right-style: dashed;

border-left-style: dashed;

}

#l1v

{

border-width: medium;

border-color:#000000;

border-style: dashed none dashed dashed;

}

.all

{

border-width: medium;

border-color: #000000;

border-style: solid;

}

#rn1

{

border-width: medium;

border-color:#000000;

border-right-style: dotted;