Текст из файла

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

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

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

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

Выполнила:

Степная Е. В.

А-13-08

Вариант 17

Проверил:

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

2012 г.

Цель работы

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

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

Элемент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и

Тег

Тег

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

.

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

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

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

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

вместо

Тег

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

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

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

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

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

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

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

Результат

Исходный код

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

Исходный код

Классы 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;