42242

Вставка таблиц в Web-страницы. Элементы и стили таблиц в языке HTML

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

Информатика, кибернетика и программирование

Основные элементы представления таблиц в HTML Основные элементы представления таблиц: представление всей таблицы – элемент tble ; представление заголовка таблицы – элемент cption ; представление строки таблицы – элемент tr ; представление ячейки таблицы – элементы th и td . В Webстранице может содержаться произвольное число таблиц допускаются также вложенные таблицы. Представление всей таблицы 3. Описание таблицы состоит из одной или нескольких строк задаваемых в контейнере tble tble с помощью контейнеров tr tr .

Русский

2013-10-28

125 KB

6 чел.

 8 -

Лабораторная Шонин В.А. работа 2-06

Вставка таблиц в Web-страницы

1. Цель работы

Целью работы является знакомство с элементами и стилями таблиц в языке HTML.

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 5.0 и выше.

3. Краткие теоретические сведения

3.1. Основные элементы представления таблиц в HTML

Основные элементы представления таблиц:

  •  представление всей таблицы – элемент <table>;
  •  представление заголовка таблицы – элемент <caption>;
  •  представление строки таблицы – элемент <tr>;
  •  представление ячейки таблицы – элементы <th> и <td>.

Эти элементы определены в модуле Basic Tables.

Описание таблиц должно располагаться внутри в теле документа. В Web-странице может содержаться произвольное число таблиц, допускаются также вложенные таблицы.

3.1.1. Представление всей таблицы

3.1.1.1. Элемент <table>

Таблица помещается в контейнер <table>…</table>, т.е. должна начинаться элементом <table> и заканчиваться обязательным элементом </table>.

Таблица может иметь заголовок, который задается с помощью контейнера <caption>. По спецификации HTML, описание заголовка (если он есть) должно располагаться сразу же после элемента <table>.

Описание таблицы состоит из одной или нескольких строк, задаваемых в контейнере <table>…</table> с помощью контейнеров <tr>…</tr>. В свою очередь, внутри каждого контейнера  с помощью контейнера  <th>…</th> или <td>…</td> задаются данные для отдельных ячеек.

Помимо общих атрибутов class, dir, id, lang, style и title в элементе <table> можно определить основные атрибуты, приведенные табл. 6.1 (все атрибуты являются необязательными).

Таблица 6.1. Атрибуты элемента <table>

Имя атрибута

Что определяет

Значение по умолчанию

cellpadding

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

1

cellspacing

Расстояния (в пикселях) между смежными ячейками.

2

height

Высоту таблицы (в пикселях или в процентах от размера окна).

автоматически, в соответствии с содержимым ячеек

summary

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

нет

width

Ширину таблицы (в пикселях или процентах).

автоматически, в соответствии с содержимым ячеек

3.1.1.2. Задание стилей для всей таблицы

Свойство border-collapse позволяет выбрать модель границ таблицы. По умолчанию (значение separate) используется  модель с отдельными границами для каждой ячейки.  

Модель ячеек с общими границами (как в таблицах Word) задается с помощью значения collapse.

Значение inherit определяет  наследование свойства от родительского элемента.

Со свойством border-collapse тесно связано свойство border-spacing, которое позволяет задать расстояние между границами ячеек (в абсолютных или относительных единицах). Если задано одно значение, то оно определяет расстояние и по вертикали, и по горизонтали, если два значения, то первое значение задает расстояние по горизонтали, а второе – по вертикали.

В Internet Explorer свойство border-spacing не работает (для задания этой величины используется атрибут cellspacing элемента <table>).

Для задания стилей шрифта и текста для всех ячеек таблицы можно использовать свойства стилей шрифтов (см. раздел 3.9 в лабораторной работе 2-04) и стилей текста (см. раздел 3.10 в лабораторной работе 2-04). Вертикальное выравнивание в ячейках таблицы задается с помощью свойства vertical-align (см. раздел 3.1.2.3 в лабораторной работе 2-05).

Выравнивание таблицы слева, справа или по центру задается с помощью помещения таблицы в контейнер <p>…</p> или <div>…</div> и задания для стиля text-align элемента контейнера соответствующего значения (left, right или center).

Стили цвета и фона для всей таблицы задаются с помощью свойств, описанных в разд. 3.11 в лабораторной работе 2-04.

Чтобы задать «обтекание» таблицы слева или справа, необходимо использовать свойство float (см. раздел 3.1.2.1 в лабораторной работе 2-05). Если необходимо прервать это «обтекание» в заданном месте, можно использовать свойство clear (см. раздел 3.1.2.2 в лабораторной работе 2-05).

Для задания рамок, полей и отступов  для всей таблицы используются следующие свойства стилей:

  •  для задания рамки или части рамки для всей таблицы– свойства границы (см. разд. 3.12.2 в лабораторной работе 2-04);
  •  для задания ширины поля между рамкой (если она есть) или таблицей (если рамки нет) и окружающими элементами – свойства  ширины полей (см. разд. 3.12.1 в лабораторной работе 2-04);
  •  для задания ширины отступа по разным направлениям между рамкой и содержимым ячеек таблицы – свойства  ширины отступа (см. разд. 3.12.3 в лабораторной работе 2-04).

В Internet Explorer задание ширины отступа в стилях не работает (для задания этой величины используется атрибут cellpadding элемента <table>).

3.1.2. Представление заголовка таблицы

Элемент <caption> задает заголовок таблицы. Этот элемент, если он есть, должен следовать сразу за открывающим элементом <table>. Этот элемент, помимо общих атрибутов class, dir, id, lang, style и title, имеет единственный атрибут align, задающий выравнивание заголовка, однако вместо него рекомендуется использовать свойство text-align.

Остальные стили шрифтов (см. раздел 3.9 в лабораторной работе 2-04) и стили текста (см. раздел 3.10 в лабораторной работе 2-04), а также стили цвета и фона (см. разд. 3.11 в лабораторной работе 2-04), поле, рамки и отступы (см. разд. 3.12 в лабораторной работе 2-04) задаются так же, как и для других элементов HTML (XHTML).

3.1.3. Представление строк таблицы

Для задания строк в таблице используется контейнер <tr>…</tr>. Для него могут быть заданы общие атрибуты class, dir, id, lang, style и title. Все остальные параметры строки можно задать с помощью стилей.

Для элемента <tr> можно задать стили шрифтов (см. раздел 3.9 в лабораторной работе 2-04), стили текста (см. раздел 3.10 в лабораторной работе 2-04), а также стили цвета и фона (см. разд. 3.11 в лабораторной работе 2-04). Вертикальное выравнивание в ячейках строки таблицы задается с помощью свойства vertical-align (см. раздел 3.1.2.3 в лабораторной работе 2-05).

Стили для полей, рамок и отступов для элемента <tr> не действуют (их нужно задавать для каждой ячейки строки отдельно).

3.1.4. Представление ячеек таблицы

3.1.4.1. Элементы <th> и <td>

Контейнеры <th>…</th> и <td>…</td> используются для вывода ячеек таблицы в строках таблицы. Контейнер <th>…</th> используется обычно в заголовках, а контейнер <td>…</td> – в  данных таблицы. Содержимое контейнера <th>…</th> по умолчанию отображается полужирным шрифтом и располагается по центру (по вертикали и горизонтали), а содержимое контейнера <td>…</td>  – нормальным  шрифтом с выравниванием влево по горизонтали и посередине по вертикали. Если количество ячеек в разных строках отличается друг от друга, то Web-браузер автоматически добавляет пустые ячейки в конце строки, т.е. таблицы, в которых в разных строках содержится разное количество столбцов одного и того же размера, не допускается.

Каждую отдельную ячейку таблицы можно рассматривать как область для независимого форматирования. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться в теле документа, в том числе элементов, управляющих расположением текста – <p>, <br>, <hr>, элементов заголовков,  форматирования символов, вставки графических изображений – <img>, гипертекстовых ссылок – <а> и т. д.

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

Помимо общих атрибутов class, dir, id, lang, style и title в элементах <th> и <td> можно задавать атрибуты, приведенные в табл. 6.2.

Таблица 6.2. Допустимые атрибуты элементов <th> и <td>

Имя атрибута

Что определяет

Значение по умолчанию

colspan

Количество столбцов, занимаемых текущей ячейкой.

1

height

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

нет

nowrap

Отмена автоматического переноса строк в ячейке (задается по имени, без значения).

автоматический перенос строк

rowspan

Количество строк, занимаемых текущей ячейкой.

1

width

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

нет

Атрибуты colspan и rowspan задаются в том случае, если ячейка занимает несколько столбцов и/или строк таблицы.

Перенос слов в ячейках таблицы, т.е. вывод содержимого ячейки в несколько строк, Web-браузер выполняет автоматически, чтобы получить оптимальные размеры (ширину и высоту) ячеек и всей таблицы. Если необходимо отключить автоматический перенос в ячейке, можно использовать атрибут nowrap, а если необходимо задать фиксированные размеры ячейки, можно использовать атрибуты width и height. При использовании этих атрибутов следует иметь в виду, что размеры других ячеек столбца и строки, на пересечении которых находится изменяемая ячейка, также изменятся.

3.1.4.2. Задание стилей для ячеек таблицы

Каждая ячейка таблицы рассматривается как отдельный объект, для которого можно задать стили шрифтов (см. раздел 3.9 в лабораторной работе 2-04), стили текста (см. раздел 3.10 в лабораторной работе 2-04), а также стили цвета и фона (см. разд. 3.11 в лабораторной работе 2-04).

Кроме того, для ячейки можно задать   рамку или части рамки  (см. разд. 3.12.2 в лабораторной работе 2-04), а также   отступ по разным направлениям между рамкой и содержимым ячейки (см. разд. 3.12.3 в лабораторной работе 2-04).

3.2. Модуль Tables

В модуле Tables, помимо элементов <caption>, <table>, <td>, <th> и <tr>, модуля Basic Tables, определены также элементы  <col>, <colgroup>, <thead>, <tbody> и <tfoot>.

3.2.1. Элементы <colgroup> и <col>

Характерной проблемой при создании таблиц является задание параметров выравнивания для отдельных строк или столбцов. Для выравнивания содержимого всех ячеек текущей строки достаточно задать требуемые параметры в элементе <tr>. Однако чаще необходимо обеспечить одинаковое выравнивание для всех элементов одного столбца, так как в большинстве случаев в столбце располагаются однородные данные. Хотя в этом случае можно задавать выравнивание для каждой ячейки столбца, более удобным средством является использование специальных элементов <colgroup> и <col>. Эти элементы должны располагаться сразу же за описанием элементом <table> перед первым появлением элемента <tr>.

Контейнер <colgroup>...</colgroup> создает в таблице группу столбцов, для которой можно указать некоторые атрибуты форматирования. Внутри контейнера <colgroup>...</colgroup> можно задавать одиночные элементы <col>, уточняющие (с помощью стилей) некоторые атрибуты форматирования для отдельных столбцов или последовательности столбцов в группе.

Помимо общих атрибутов class, dir, id, lang, style и title в элементах <colgroup> и <col> можно задавать атрибуты , приведенные в табл. 6.3.

Таблица 6.3. Допустимые атрибуты элементов <colgroup> и <col>

Имя атрибута

Что определяет

Значение по умолчанию

span

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

1

width

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

нет

Свойства стилей для этих элементов задаются так же, как для элемента <tr> (см. разд. 3.1.3 в этой лабораторной работе).

Элементы <colgroup> и <col> поддерживаются в настоящее время только Web-браузером Internet Explorer (остальные популярные Web-браузеры – Firefox, Opera и Netscape эти элементы не поддерживают).

3.2.2. Элементы <thead>, <tbody> и <tfoot>

Элементы <thead>, <tbody> и <tfoot> позволяют более строго задать структуру описания таблицы, выделяя группы строк, содержащие соответственно заголовочную часть таблицы, основное содержимое таблицы и итоговую строку или строки. Эти элементы могут встречаться только в описании таблиц внутри контейнера <table>…</table>.

Контейнеры <thead>…</thead> и <tfoot>…</tfoot> можно использовать для описания верхнего и нижнего колонтитулов таблицы. Эти контейнеры могут встречаться в таблице не более одного раза. Использование данных элементов удобно при создании больших таблиц, выходящих за пределы одной страницы.

Контейнер <tbody>…</tbody> может встречаться многократно в описании таблицы.  Этот контейнер выполняет логическое группирование строк таблицы так же, как контейнер <colgroup>…</colgroup> выполняет группирование смежных столбцов.

Для элементов  <thead>, <tbody> и <tfoot> можно задавать общие атрибуты class, dir, id, lang, style и title.

Свойства стилей для этих элементов задаются так же, как для элемента <tr> (см. разд. 3.1.3 в этой лабораторной работе).

4. Порядок выполнения работы

  1.  Откройте модифицированную в лабораторной работе 2-05 Web-страницу для вашего варианта. Скопируйте в папку images в вашей папке все изображения в папке для вашего варианта, которые находятся в папке Таблицы.
  2.  Создайте правило стилей для всей таблицы (элемента <table>) для вашего  варианта, в соответствии с табл. 6.3.

Таблица 6.3. Стили элемента <table>

Вариант

Стили (значения одинаковы для четырех сторон)

Ширина границы

Цвет границы

Стиль границы

1.

8pt

green

outset

2.

10pt

blue

inset

3.

12pt

brown

double

4.

6pt

red

dashed

5.

6pt

indigo

solid

6.

12pt

cornsilk

ridge

7.

12pt

aliceblue

groove

8.

7pt

olive

solid

9.

11pt

moccasin

outset

10.

12pt

darkorchid

double

11.

10pt

aqua

inset

12.

11pt

chocolate

groove

  1.  Создайте правило стилей для заголовка (элемента <caption>). Отступ заголовка должен быть таким же, как для элемента <p>, вес шрифта должен быть задан как жирный, размер шрифта – на один пункт больше, чем размер шрифта для элемента <p>, гарнитура шрифта – та же, что и для заголовка второго уровня (элемента <h2>) и цвет текста – в соответствии с вашим вариантом:

 1) brown; 2) darkred; 3) darkgreen; 4) fuchsia;

 5) blue; 6) indigo; 7) green; 8) red;

 9) navy; 10) maroon; 11) chocolate; 12) slateblue.

  1.  Создайте правило стилей для заголовочной части таблицы (элемента <thead>). В качестве фонового должно быть задано изображение с именем backgroundxx.jpg или backgroundxx.gif в изображениях вашего варианта.  Текст в заголовочной части должен быть выровнен по центру (по горизонтали и вертикали),  размер шрифта – тот же, что и для элемента <p>, гарнитура шрифта – та же, что и для заголовка первого уровня, вес шрифта должен быть задан как жирный. Цвет текста в заголовочной части – в соответствии с вашим вариантом:

 1) indigo; 2) navy; 3) orchid; 4) darkgreen;

 5) darkred; 6) slateblue; 7) red; 8) royalblue;

 9) olive; 10) orangered; 11) maroon; 12) purple.

  1.   Создайте правило стилей для класса header элемента <td> для вывода границ ячеек в заголовочной части таблицы. Ширина границы должна быть задана равной 4pt, граница должна иметь тот же цвет, что и цвет текста в заголовочной части и стиль inset.
  2.  Создайте правило стилей для тела таблицы (элемента <tbody>): гарнитура и размер шрифта – те же, что и в элементе <p>, цвет шрифта – черный.
  3.  Создайте правило стилей для класса odd элемента <tr> для  вывода цвета фона нечетной строки тела таблицы для вашего варианта:

 1) aliceblue; 2) lightyellow; 3) cornsilk; 4) palegreen;

5) oldlace; 6) papayawhip; 7) floralwhite; 8) mintcream;

9) lightgoldenrodyellow; 10) honeydew;

11) azure; 12) ghostwhite.

  1.  Создайте правило стилей для класса even элемента <tr> для  вывода цвета фона четной строки тела таблицы для вашего варианта:

1) lavender; 2) khaki; 3) mistyrose; 4) greenyellow;

5) moccasin; 6) peachpuff; 7) gainsboro; 8) aqua;

9) wheat; 10) moccasin; 11) aquamarine; 12) gainsboro.

  1.  Создайте правило стилей для класса border элемента <td> для  вывода границ ячеек в теле таблицы. Ширина границы должна быть задана равной 4pt, граница должна иметь стиль outset и цвет в соответствии с вашим вариантом:

 1) blue; 2) brown; 3) lightblue; 4) green;

5) yellow; 6) pink; 7) slateblue; 8) palegreen;

9) violet; 10) aqua; 11) navajowhite; 12) fuchsia.

  1.  Создайте правило стилей для класса left элемента <td> для  вывода текста в ячейке тела таблицы, отформатированного влево по горизонтали и сверху по вертикали.
  2.  Создайте правило стилей для класса center элемента <td> для  вывода текста в ячейке тела таблицы, отформатированного по центру по горизонтали и посередине по вертикали.
  3.  Задайте структуру таблицы и заполните данными таблицу или таблицы для вашего варианта в соответствии с изображением вашей таблицы. Для элемента <table> задайте значения атрибутов cellspacing и cellpadding, соответственно равные соответственно 3 и 2 пикселя. Для всех ячеек таблицы используйте элемент <td>. Для вставок рисунков в ячейки таблицы используйте элемент <img>.
  4.  Заголовок таблицы поместите в контейнер <caption>…</caption>.
  5.  Заголовочную часть таблицы поместите в контейнер <thead>…</thead>,  а тело таблицы – в контейнер <tbody>…</tbody>.
  6.  Для всех ячеек заголовочной части таблицы задайте класс header.
  7.  Для всех элементов <tr> нечетных строк тела таблицы задайте класс odd, а для всех четных – класс even.
  8.  Для всех первых ячеек в каждой строке тела таблицы задайте значения класса border и left, для всех остальных ячеек строки – значения класса border и center (значения в атрибуте class должны разделяться пробелом).  
  9.  Проверьте правильность вывода элементов Web-страницы в Web-браузере Internet Explorer. Покажите созданную вами Web-страницу преподавателю.   
  10.  Сохраните созданный вами документ HTML для Web-страницы. Этот документ будет использоваться в лабораторной работе 2-07.

5. Содержание отчета

В отчете должен быть представлено содержимое файла с исходным текстом документа HTML для вашего варианта.  

6. Вопросы для самоконтроля

  1.  Как задать толщину рамки вокруг таблицы?
  2.  Как можно изменить расстояние между рамками ячеек и расстояние от рамки ячейки до содержимого ячейки?
  3.  В каких случаях и каким образом задается фиксированная ширина и высота таблицы?
  4.  Как можно задать расположение таблицы по центру в окне просмотра?
  5.  Как можно задать обтекание таблицы текстом?
  6.  Как можно задать цвет фона таблицы или рисунок в качестве фона?
  7.  Какими дескрипторами и атрибутами определяется расположение заголовка таблицы?
  8.  С помощью каких дескрипторов описывается структура таблицы в HTML?
  9.  Как отформатировать содержимое ячеек таблицы по горизонтали и вертикали?
  10.  Какие средства задания цвета рамки таблицы и форматирования колонок таблицы можно использовать в Internet Explorer?


 

А также другие работы, которые могут Вас заинтересовать

37114. Политические преобразования в РФ в 90-е годы. Октябрьский кризис 1993 г. Принятие Конституции, переход к парламентаризму 16.59 KB
  Принятие Конституции переход к парламентаризму. После октябрьских событий началась ликвидация системы Советов завершившаяся с принятием на всенародном референдуме 12 декабря 1993 новой Конституции Российской Федерации 3в 1990–1993 гг. Ельциным которая впервые занялась разработкой новой Конституции. Проект подготовленный этой комиссией не был принят ни на первом ни на втором обсуждении на съездах народных депутатов но одобрялась общая концепция Конституции что значительно затягивало переход к новому конституционному строю в...
37115. политических противоречий в Российской Империи в начале XX века. 15.04 KB
  Национальный вопрос в России в начале XX века. Национальный вопрос – одно из основных социальнополитических противоречий в Российской Империи в начале XX века. Рост недовольства на окраинах подпитывался как жесткой национальной политикой правительства в частности ограничениями в отношении поляков финнов армян и некоторых других народов так и экономическими неурядицами которые переживала Россия в первые годы XX века. К началу XX века российские этносы представляли собой чрезвычайно разнородную массу.
37116. Общенациональный кризис в стране осенью 1917 г 23.48 KB
  Приход к власти большевиков Осенью 1917 г. Бесспорно что если бы большевики промедлили с взятием власти и не упредили правые силы слабое правительство Керенского сменила бы военная диктатура. В нем объявлялось о низложении Временного правительства и переходе власти к Петроградскому ВРК. Тем самым шанс на спасение буржуазной власти был утрачен.
37117. Брестский мир 17.35 KB
  большевики связывали выход России из войны с мировой революцией. Согласно условиям Брестского мира: от России отторгалась Польша Прибалтика западная часть Белоруссии. Ни одна из стран Антанты союзников России в войне не ответила на эти мирные предложения однако страны германоавстрийского блока в конце ноября согласились вести переговоры о перемирии и мире с представителями Советской республики. Подписания мира в тот момент настоятельно требовали внутренняя и внешняя обстановка в Советской России.
37118. Гражданская война и интервенция: причины, ход и результаты 16.55 KB
  в Мурманске и Архангельске высадились английские американские и французские войска. Войска П. Признав свое поражение в Первой мировой войне Германия согласилась аннулировать Брестский мирный договор и вывела свои войска с территории Украины Белоруссии и Прибалтики. Антанта стала выводить свои войска оказывая белогвардейцам лишь материальную помощь.
37119. Истоки и сущность режима личной власти Сталина. Политические процессы и массовые репрессии 26.79 KB
  Истоки и сущность режима личной власти Сталина. Истоки сталинизмаЗарождавшийся сталинизм проявлялся в несогласии Сталина с линией Ленина в ряде программных стратегических и тактических вопросов социалистической революции и в попытках провести свою линию вопреки Ленину или нарушая линию Ленина. Сталина часто называют непоследовательным марксистом приписывают ему отступничество от идей Ленина но согласно трактовке социализма Сталин стремился выполнить ряд основных задач: сделать государство пролетарским уничтожить эксплуататорские классы...
37120. Международное положение и внешняя политика СССР в предвоенные годы. Соглашения и договоры с Германией 26.14 KB
  Международное положение и внешняя политика СССР в предвоенные годы. Следующий период в истории внешней политики СССР начался в марте 1939 г. Британские консерваторы не хотели подлинного союза с СССР не оставляли надежды подтолкнуть немецкую экспансию в восточном направлении то есть в направлении Советского Союза. В частности вопрос о дополнительном протоколе к пакту о ненападении был поставлен наркомом иностранных дел СССР В.