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?


 

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

50491. Перемещение товаров через таможенную границу 162.5 KB
  В целом по результатам сравнительного анализа названных разделов можно сказать, что по определенным позициям законодатель оставил прежний подход в правовой регламентации основных положений перемещения товаров через таможенную границу, в то же время внес и определенные коррективы.
50492. Электрические и электронные аппараты. Лабораторные работы 1.32 MB
  Не включать установку без разрешения преподавателя ведущего занятия В случае обнаружения внештатной ситуации появление напряжения на стенде запах горения появление дыма искрение и др. Стенд имеет источники регулируемого постоянного и переменного напряжения а так же оперативное питание 15 В 30 В 5 В 15 В для питания всех устройств блока лабораторной работы микросхем систем управления обмоток реле и др. Справа от ряда предохранителей находится розетка однофазного напряжения 220 В 50 Гц для подключения осциллографа и другого...
50493. Изучение принципов работы бесконтактных датчиков и датчиков температуры 1.65 MB
  Бесконтактным выключателем (ВБ) называется выключатель, приводимый в действие внешним объектом без механического контакта выключателя и объекта. Коммутация нагрузки производится полупроводниковыми элементами. Все это обеспечивает высокую надёжность работы бесконтактных выключателей. В системах управления они, как правило, выполняют функцию датчиков обратной связи, сигнализируя о завершении выполнения конкретным элементом оборудования команды на перемещение. Но этим их применение не ограничивается.
50494. Проектирование 4-разрядного сумматора 116 KB
  Открыть VHDL файл и записать в него прогр. Сохранить файл под именем dd1 и установить его старшим в иерархии проекта. Список файлов открывается средней клавишей Files. VHDL файлы относятся файлам образующим проект.
50495. Процеси та потоки 134.5 KB
  Крім адресного простору процесу належать такі ресурси як файли динамічні області пам’яті і потоки. Ресурси створювані за життя процесу обов’язково знищуються при його завершенні. Потік thred описує послідовність виконання коду усередині процесу. Первинний потік процесу створюється системою автоматично під час створення процесу.
50496. Взаємодія між потоками 90 KB
  Мета: Засвоїти поняття паралельного виконання «потоків» та освоїти засоби їх синхронізації. Здобути навики синхронізації «потоків» при обробці спільних даних та доступу до ресурсів в операційній системі Windows.
50497. Расчет переходных процессов в линейных цепях 623 KB
  Расчет тока i1 классическим методом. 1)Записываем уравнения Кирхгофа для послекоммутационной цепи: 2) Рассмотрим установившийся режим...
50499. Создание типизованных файлов с использование элементов управления Edit, Button, GroupBox, RadioButton, CheckBox, ListBox 72 KB
  Цель работы Приобретение навыков работы с типизованными файлами использование в работе элементов управления Edit Button GroupBox RdioButton CheckBox ListBox и других для создания форм. Методические указания по самостоятельной работе студентов Типизованный файл – это последовательность данных одинакового типа которая предназначена для долгосрочного хранения на внешних носителях. В C создание типизованных файлов осуществляется путём записи в файл блоков информации одинаковой длины.