Лабораторная работа 6 (LAB6 Мясникова О.А)

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

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

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













Лабораторная работа №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

        Устанавливает вид маркера списка.

        Также для этого тега доступны универсальные атрибуты и события.

        Закрывающий тег

        Обязателен.


        Тег

          Описание

          Тег 

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

              Синтаксис

              <ol>

              <li>элемент нумерованного спискаli>

              <li>элемент нумерованного спискаli>

              ol>

              Атрибуты

              type

              Устанавливает вид маркера списка.

              reversed

              Нумерация в списке становится по убыванию (3,2,1).

              start

              Задаёт число, с которого будет начинаться нумерованный список.

              Также для этого тега доступны универсальные атрибуты и события.

              Закрывающий тег

              Обязателен.

              Тег

            2. Описание

              Тег 

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

                  Синтаксис

                  <ul>

                  <li>элемент маркированного спискаli>

                  ul>


                  <ol>

                  <li>элемент нумерованного спискаli>

                  ol>

                  Атрибуты

                  type

                  Устанавливает вид маркера нумерованного или маркированного списка.

                  value

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

                  Также для этого тега доступны универсальные атрибуты и события.

                  Закрывающий тег

                  Не обязателен.


                  Выполнение

                  Добавить на одну из страниц разработанного ресурса таблицу из списка вариантов заданий.


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


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


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


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


                  Исходный код страницы со списками и таблицами.

                  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml" >

                  <head>

                  <title>Лабораторная работа 3title>

                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                  <meta content="Сайт, сделанный в рамках лабораторных работ по курсу ВМСС." name="description"/>

                  <meta content="лабораторная работа, вычислительные машины, сети, мясникова" name="keywords" />

                  <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css1.css"/>

                  head>

                  <body>

                  <div id="main">

                  <div id="menu">

                  <div class="mbox"><a href="cod1.html">Обо мнеa>div>

                  <div class="mbox"><a href="bklvr.htm">О бакалаврской работеa>div>

                  <div class="mbox"><a href="frml.xhtml">Формулаa>div>

                  <div class="mbox"><a href="table.htm">Таблицаa>div>

                  div>

                  <div id="content">

                  <span class="h2">Таблица по вариантуspan>

                  <table id="tbl6">

                  <tr>

                  <td class="w">td>

                  <td class="b">td>

                  <td class="w">td>

                  <td class="d">td>

                  tr>

                  <tr>

                  <td class="w">td>

                  <td class="b">td>

                  <td class="w">td>

                  <td class="w">td>

                  tr>

                  <tr>

                  <td class="w">td>

                  <td class="b">td>

                  <td class="b">td>

                  <td class="b">td>

                  tr>

                  <tr>

                  <td class="b">td>

                  <td class="w">td>

                  <td class="w">td>

                  <td class="w">td>

                  tr>

                  table>

                  <span class="h2">Информативная таблицаspan>

                  <table id="tblsm">

                  <tr>

                  <td class="t1" colspan="2">Объединенные ячейки с цветомtd>

                  <td class="d">Пунктирная границаtd>

                  <td rowspan="2" class="t3">Вертикально объединенные ячейкиtd>

                  tr>

                  <tr>

                  <td class="t2" rowspan="2" colspan="2">Четыре объединенные ячейкиtd>

                  <td class="t5">А здесь есть отступыtd>

                  tr>

                  <tr>

                  <td class="t3">td>

                  <td>td>

                  tr>

                  <tr>

                  <td class="t1">td>

                  <td colspan="2" class="t4">Две объединенные ячейкиtd>

                  <td class="t2">td>

                  tr>

                  table>

                  <span class="h2">Неупорядоченные спискиspan>

                  <ul id="l1">

                  <li>Первый элементli>

                  <li>Второй элементli>

                  <li>Третий элементli>

                  ul>

                  <ul id="l2">

                  <li>Первый элементli>

                  <li>Второй элементli>

                  <li>Третий элементli>

                  ul>

                  <span class="h2">Упорядоченные спискиspan>

                  <ol id="ol1">

                  <li>Первый элементli>

                  <li>Второй элементli>

                  <li>Третий элементli>

                  ol>

                  <ol id="ol2">

                  <li>Первый элементli>

                  <li>Второй элементli>

                  <li>Третий элементli>

                  ul>

                  <span class="h2">Неупорядоченный список упорядоченных списковspan>

                  <ul>

                  <li>

                  <ol>

                  <li>Первыйli>

                  <li>Второйli>


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

                  Файл
                  adaptacia.doc
                  97867.doc
                  ref-20344.doc
                  61745.rtf
                  132347.rtf




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

Ещё статьи 1