Национальный исследовательский институт

Московский Энергетический Институт (Технический Университет)

Институт автоматики и вычислительной техники

Кафедра Прикладной математики

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

по дисциплине ВМСС

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

Выполнил:

Машеров Дмитрий Евгеньевич

Проверил:

к.т.н., доц. Куриленко Иван Евгеньевич

Москва

2012 г.

Оглавление

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

1)

2

2) 2

3) 2

4) 2

5) 2

6) 2

2. Свойства стилей таблиц для таблиц 2

1) empty-cells 2

2) border-spacing 3

3) border 3

4) padding 3

3. Теги, отвечающие за разметку списков 3

1)

3

2)

3

3)

3

4. Выполнение задания 3

1) Таблица специального вида(вариант 13) 3

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

3) Страницы со списками 7

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

Элемент

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

, который в свою очередь располагается внутри тега

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

.

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

.

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

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

1. Свойства стилей таблиц для таблиц

1. empty-cells

Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

1. border-spacing

Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

1. border

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

1. padding

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

1. Теги, отвечающие за разметку списков

Тег

устанавливает маркированный список. Каждый элемент списка должен начинаться с тега
• . Если к тегу
  применяется таблица стилей, то элементы
  • наследуют эти свойства.

Тег

устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега
1. . Если к тегу
   применяется таблица стилей, то элементы
   1. наследуют эти свойства.

      Тег

   2. определяет отдельный элемент списка. Внешний тег
      или
      устанавливает тип списка — маркированный или нумерованный.

      1. Выполнение задания

      1. Таблица специального вида(вариант 13)

      Страница с таблицой:

      Код таблицы:

      
      
      

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

      Страница с таблицей:

      Код таблицы:

      Название таблицы

      "Заголовок1 4 ячейки"				"Заголовок2 2 ячейки"
      Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4	Ячейка 5	Ячейка 6
      А	Б	А		А	Б
      	Б			А	Б
      А	Справа пустая ячейка
      А1 А2	Б	А	Б	А	Б

      CSS для этой таблицы:

      table#info

      {

      border-style: solid;

      border-width: 1px;

      empty-cells: show;

      caption-side: top;

      border-spacing: 1;

      }

      table#info caption

      {

      text-align: right;

      }

      table#info td

      {

      border: 2px solid;

      padding: 4px 4px;

      }

      table#info tr th

      {

      background-color: #C0C0C0;

      }

      table#info tr td.important

      {

      background-color: #FF0000;

      }

      table#info tr.footer

      {

      background-color: #0000FF;

      }

      table#info tr td div

      {

      font-weight: bold;

      font-style: italic;

      color: #FFFF00;

      }

      
      
      

      1. Страницы со списками

      • Разработать страницу, содержащую несколько маркированных списков с различными типами маркеров.

      Код списков:

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

      С квадратами:

      • Элемент1
      • Элемент2
      • Элемент3
      • Элемент4

      С дисками

      • Элемент1
      • Элемент2
      • Элемент3
      • Элемент4

      С кругами

      • Элемент1
      • Элемент2
      • Элемент3
      • Элемент4

      
      
      

      • Разработать страницу, содержащую несколько нумерованных списков с различными типами нумерации.

      Код списков:

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

      С десятичными цифрами:

      1. Элемент1
      2. Элемент2
      3. Элемент3
      4. Элемент4

      С греческими буквами

      1. Элемент1
      2. Элемент2
      3. Элемент3
      4. Элемент4

      С латинскими буквами

      1. Элемент1
      2. Элемент2
      3. Элемент3
      4. Элемент4

      • Разработать страницу, содержащую маркированный список нумерованных списков.

      Код списков

      Список списков:

      • 1. Элемент1
        2. Элемент2
        3. Элемент3
        4. Элемент4

      • 1. Элемент1
        2. Элемент2
        3. Элемент3
        4. Элемент4

      • 1. Элемент1
        2. Элемент2
        3. Элемент3
        4. Элемент4