Лабораторная работа 6 (LAB6 Кобец С.Ю)

Посмотреть архив целиком

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

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

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














Лабораторная работа №6 по дисциплине ВМСС

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






Выполнил: Кобец С. Ю.

А-13-08


Преподаватель: Куриленко И. Е.




















Москва

2012г.

Общая информация


Таблицы


Для добавления таблицы на веб-страницу используется тег 

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



Атрибуты тега 

для объединения ячеек

Colspan="число" – устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

rowspan="число" – устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.


Списки


Любой список представляет собой контейнер 

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

      Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера 

      , термин — тегом 
      , а его определение — с помощью тега 
      .


      Типы маркированных списков


      type="disc" – список с маркерами в виде круга

      type="circle" – список с маркерами в виде окружности

      type="square" – список с квадратными маркерами


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


      type="1" – арабские числа

      type="A" – прописные буквы латинского алфавита

      type="a" – строчные буквы латинского алфавита

      type="I" – римские числа в верхнем регистре

      type="i" – римские числа в нижнем регистре


      Выполнение работы


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

      Таблицы



      CSS код


      #table1 {

      border: 4px black dashed;

      border-collapse: collapse;

      margin: auto;

      }

      #table1 td {

      width: 50px;

      height: 50px;

      }

      #table1 .solid {

      border: 4px black solid;

      }

      #table2 {

      border: 2px #888 solid;

      border-collapse: collapse;

      text-align: center;

      }

      #table2 td{

      border: 1px black solid;

      border-left: 2px #888 solid;

      border-right: 2px #888 solid;

      }

      #table2 th{

      border: 1px black solid;

      border-left: 2px #888 solid;

      border-right: 2px #888 solid;

      }


      #table2 td.white{

      background: #FFF;

      }


      #table2 th.white{

      background: #FFF;

      }

      #table2 td.width1{

      width: 5%;

      }


      #table2 td.width2{

      width: 19%;

      }


      HTML код


      </span></font></font><font face="Times New Roman, serif"><font size="2" class="CL_13">Таблица</font></font><font face="Times New Roman, serif"><font size="2" class="CL_13"><span lang="en-US">

      вмсс, лабораторная работа" name="keywords"/>

      Таблицы

      Меню

      Главная


      Примеры работы программы


      Формула


      Таблицы


      Списки



      Понедельник Вторник Среда Четверг Пятница
      I II I II I II I II I II
      1 пара OC День самостоятельных занятий
      2 пара OC ВМСС
      Обед
      3 пара Тервер ВМСС Матмодели Теория игр
      4 пара Тервер Экономика Экономика Теория игр Матмодели Теория игр

      alt="Valid XHTML 1.1"

      height="31" width="88"/>

      src="http://jigsaw.w3.org/css-validator/images/vcss-blue"

      alt="Правильный CSS!"/>


      Списки



      CSS код


      ul.circle {

      list-style-type: circle;

      }


      ul.square {

      list-style-type: square;

      }


      ol.A {

      list-style-type: upper-alpha;

      }


      ol.a {

      list-style-type: lower-alpha;

      }


      ol.I {

      list-style-type: upper-roman;

      }


      ol.i {

      list-style-type: lower-roman;

      }



      HTML код


      </span></font></font><font face="Times New Roman, serif"><font size="2" class="CL_13">Списки</font></font><font face="Times New Roman, serif"><font size="2" class="CL_13"><span lang="en-US">

      вмсс, лабораторная работа" name="keywords"/>

      Списки

      Меню

      Главная


      Примеры работы программы


      Формула


      Таблицы


      Списки

      • Элемент списка 1
      • Элемент списка 2
      • Элемент списка 3

      • Элемент списка 1
      • Элемент списка 2
      • Элемент списка 3

      • Элемент списка 1
      • Элемент списка 2
      • Элемент списка 3

      1. Элемент списка 1
      2. Элемент списка 2
      3. Элемент списка 3

      1. Элемент списка 1
      2. Элемент списка 2
      3. Элемент списка 3

      1. Элемент списка 1
      2. Элемент списка 2
      3. Элемент списка 3

      1. Элемент списка 1
      2. Элемент списка 2
      3. Элемент списка 3

      1. Элемент списка 1
      2. Элемент списка 2
      3. Элемент списка 3

        1. Элемент списка 1.1
        2. Элемент списка 1.2
        3. Элемент списка 1.3

        1. Элемент списка 2.1
        2. Элемент списка 2.2
        3. Элемент списка 2.3

        1. Элемент списка 3.1
        2. Элемент списка 3.2
        3. Элемент списка 3.3

      alt="Valid XHTML 1.1"

      height="31" width="88"/>

      src="http://jigsaw.w3.org/css-validator/images/vcss-blue"

      alt="Правильный CSS!"/>


      Случайные файлы

      Файл
      85764.rtf
      64237.rtf
      76747-1.rtf
      116059.rtf
      1.doc




      Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
      Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
      Это можно сделать совершенно бесплатно. Читайте подробности тут.

Ещё статьи 1