42750

Организация текста внутри HTML-документов с помощью таблиц

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

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

Организация текста внутри HTMLдокументов с помощью таблиц Элементы HTML для построения таблиц Для создания таблицы используется элемент TBLE. Атрибут border в открывающем теге TBLE делает видимой рамку таблицы и сетку разделяющую строки и столбцы. Между открывающим TBLE и закрывающим TBLE тегами для построения таблицы размещаются парные теги следующих элементов: 1. CPTION Текст отмеченный тегами CPTION и CPTION этого элемента выводится в виде заголовка таблицы.

Русский

2013-10-30

94.5 KB

1 чел.

Лабораторная работа №4.

 Организация текста внутри HTML-документов с помощью таблиц

Элементы HTML для построения таблиц

Для создания таблицы используется элемент TABLE. Атрибут border в открывающем теге <TABLE> делает видимой рамку таблицы и сетку, разделяющую строки и столбцы. Между открывающим <TABLE> и закрывающим </TABLE> тегами для построения таблицы размещаются парные теги следующих элементов:

1. CAPTION

Текст, отмеченный тегами <CAPTION> и </CAPTION> этого элемента, выводится в виде заголовка таблицы.

2. TR

Теги <TR> и </TR> определяют каждую строку таблицы.

3. TH

Теги <TH> и </TH> маркируют заголовки строки или столбца для отображения немного более крупным и полужирным текстом.

4. TD

Пара тегов <TD> и </TD> отделяет текст каждой ячейки (пересечения строки и столбца) таблицы.

Пример листинга таблицы в элементах HTML

<TABLE border=3 bgcolor="gold">

<CAPTION>Информация о ценах на компьютеры </CAPTION>          

<TR>

  <TH>Процессор</TH>

  <TH>ОЗУ (Мб)</TH>

  <TH>Винчестер (Гб)</TH>

  <TH>Цена (у.е.)</TH>

</TR>

<TR>

  <TD>Celeron</TD>

  <TD>256 </TD>

  <TD>40 </TD>

  <TD>400</TD>

</TR>

<TR>

  <TD>Celeron</TD>

  <TD>512</TD>

  <TD>40 </TD>

  <TD>420</TD>

</TR>

<TR>

  <TD>Pentium</TD>

  <TD>256 </TD>

  <TD>40 </TD>

  <TD>440</TD>

</TR>

<TR>

  <TD>Pentium</TD>

  <TD>512</TD>

  <TD>40 </TD>

  <TD>460</TD>

</TR>

</TABLE>

Отображение записи таблицы браузером:

Информация о ценах на компьютеры

Процессор

ОЗУ (Мб)

Винчестер (Гб)

Цена (у.е.)

Celeron

256

40

400

Celeron

512

80

420

Pentium

256

40

440

Pentium

512

80

460

Дополнительные возможности при построении таблиц

При создании таблиц можно реализовать следующие возможности:

Объединение нескольких строк в одну ячейку

Если одна ячейка должна занимать несколько строк таблицы, используется атрибут rowspan в элементе TD или TH. Например, чтобы ячека занимала две строки rowspan=2.


Пример таблицы с объединением нескольких строк:

Информация о ценах на компьютеры

Процессор

ОЗУ (Мб)

Винчестер (Гб)

Цена (у.е.)

Celeron

256

40

400

512

80

420

Запись таблицы примет вид:

<TABLE BORDER>

<CAPTION> Информация о ценах на компьютеры </CAPTION>          

 <TR>

  <TH> Процессор </TH>

  <TH> ОЗУ (Мб) </TH>

  <TH> Винчестер (Гб) </TH>

  <TH> Цена (у.е.) </TH>

</TR>

<TR>

  <TD rowspan=2> Celeron </TD>

  <TD> 256 </TD>

  <TD> 40 </TD>

  <TD> 400 </TD>

</TR>

<TR>

  <TD> 512 </TD>

  <TD> 80 </TD

  <TD> 420 </TD>

 </TR>

</TABLE>

Объединение нескольких столбцов в одну ячейку

Чтобы распространить ячейку на любое количество столбцов, используется атрибут colspan в элементе TН или TD. Например, чтобы ячейка занимала два столбца colspan=2.

Пример таблицы с объединением нескольких столбцов:

Информация о ценах на компьютеры

Конфигурация

Цена (у.е.)

Процессор

ОЗУ (Мб)

Винчестер (Гб)

Celeron

256

40

400

512

80

420

Запись таблицы примет вид:

<TABLE BORDER>

<CAPTION>  Информация о ценах на компьютеры  </CAPTION>          

 <TR>

  <TH colspan=3> Конфигурация </TH>

  <TH rowspan=2> Цена (у.е.)  </TH>   

</TR>

<TR>

  <TH> Процессор </TH>

  <TH> ОЗУ (Мб)  </TH>

  <TH> Винчестер (Гб)</TH>

</TR>

<TR>

  <TD rowspan=2> Celeron</TD>

  <TD> 256  </TD>

  <TD> 40   </TD>

  <TD> 400 </TD>

</TR>

<TR>

  <TD> 512  </TD>

  <TD> 80   </TD>

  <TD> 420 </TD>

 </TR>

</TABLE>

Объединение нескольких столбцов и нескольких строк

Пример объединения столбцов и ячеек:

Таблица

Заголовок 1

Заголовок 2

Заголовок 3

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Запись таблицы примет вид:

<TABLE BORDER>

<CAPTION> Таблица </caption>

<TR>

  <TH> Заголовок 1 </TH>

  <TH> Заголовок 2 </TH>

  <TH> Заголовок 3 </TH>

</TR>

<TR align="center">

  <TD rowspan=3 colspan=2 valign="middle"> Ячейка 1 </TD>

  <TD> Ячейка 2 </TD>

</TR>

<TR>

  <TD> Ячейка 3 </TD>

</TR>

<TR>

  <TD align="center"> Ячейка 4 </TD>

</TR>

<TR>

  <TD  colspan=3 > Ячейка 5 </TD>

</TR>

</TABLE>

Атрибуты элемента TABLE

1. border. Управляет шириной боковой грани рамки таблицы (толщиной рамки таблицы). Величина задается в пикселах. При отсутствии атрибута или при задании ему нулевого значения рамка таблицы и сетка внутри таблицы исчезают. По умолчанию при наличии атрибута border без значения толщина рамки таблицы равна одному пикселу.

2. cellspacing. Устанавливает расстояние между рамками ячеек. Величина задается в пикселах. При отсутствии атрибута по умолчанию значение равно двум пикселам.

3. cellpadding. Задает размер пустого пространства между текстом и рамками ячеек. Величина задается в пикселах или в процентах. При отсутствии атрибута по умолчанию значение равно одному пикселу.

4. width. Ширину таблицы можно задать в пикселах или в процентном отношении к ширине страницы в окне браузера. При отсутствии атрибута ширина таблицы определяется содержимым ячеек.

5. align. Выравнивает таблицу по горизонтали:

align ="left"- влево 

align ="center"- по центру 

align ="right"- вправо

При отсутствии атрибута по умолчанию выравнивание производится влево.

6. frame. Управляет видом табличной рамки:

frame="void" - рамка отсутствует

frame="above" - рамка только сверху таблицы

frame="below" - рамка только снизу таблицы

frame="hsides" - рамка сверху и снизу таблицы

frame="vsides" - рамка по бокам таблицы таблицы

frame="rhs" - рамка только справа

frame="lhs" - рамка только слева

frame="box" или "border" - рамка полностью по периметру

7. rules. Определяет вид сетки таблицы между ячейками:

rules ="none" - сетка отсутствует

rules ="rows" - горизонтальные линии между строками

rules ="cols" - вертикальные линии между колонками

rules ="all" - все линии сетки внутри таблицы

8. bgcolor. Задает цвет фона таблицы названием цвета или 6-ти значным 16-м кодом цвета.

9. bordercolor. Задает цвет сетки таблицы названием цвета или 6-ти значным 16-м кодом цвета.

10. background. Задает фоновый рисунок таблицы названием графического файла.

Выравнивание заголовка таблицы

Атрибут align в теге <CAPTION> управляет положением заголовка:

align ="top"- заголовок над таблицей

align ="bottom"- заголовок под таблицей

align ="left"- заголовок вверху и выровнен влево

align ="right"- заголовок вверху и выровнен вправо

Выравнивание текста в ячейках таблицы

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

Для строки в теге <TR> и для ячейки в теге <TD> или <TH>.

Атрибуты выравнивания

Атрибут

Значение атрибута

Действие атрибута

align=

"left"

Выравнивает текст в ячйке по левому краю (по умолчанию)

"center"

Выравнивает текст в ячйке по центру

"right"

Выравнивает текст в ячйке по правому краю

valign=

"top"

Выводит текст от самого верха ячйки

"middle"

Выравнивает текст в ячйке вертикально по центру (по умолчанию)

"bottom"

Выравнивает текст в ячйке по нижнему краю


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

Управление цветом фона и сетки ячеек таблицы

Цвет фона и рамки, а также фоновый рисунок всей таблицы можно задать атрибутами bgcolor, bordercolor и background в открывающем теге элемента TABLE. Для отдельных ячеек - в открывающих тегах элементов TH или TD.


Пример использования цвета в таблице:

<TABLE border bgcolor="aqua" bordercolor="red" align="center">

 <CAPTION>Информация о ценах на компьютеры </CAPTION>          

 <TR>

  <TH bordercolor="black" bgcolor="red">Процессор</TH>

  <TH bordercolor="blue" bgcolor="white">ОЗУ (Мб)</TH>

  <TH bordercolor="green" bgcolor="gold">Винчестер (Гб)</TH>

  <TH bordercolor="fuchsia" bgcolor="silver">Цена (у.е.)</TH>

</TR>

<TR>

  <TD>Celeron</TD>

  <TD>256 </TD>

  <TD>40 </TD>

  <TD>400</TD>

</TR>

<TR>

  <TD>Pentium</TD>

  <TD>256 </TD>

  <TD>40 </TD>

  <TD>440</TD>

</TR>

</TABLE>

Управление размерами ячеек таблицы

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

Предварительное форматирование 

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

             Информация о ценах на компьютеры

      Процессор  ОЗУ (Мб)    Винчестер (Гб)     Цена (у.е.)    

    

      Celeron      256         40                  400

      Celeron      512         80                  420

      Pentium      256         40                  440

      Pentium      512         80                  460

Запись этого фрагмента в символах языка HTML:

<PRE>            Информация о ценах на компьютеры

  <B> Процессор  ОЗУ (Мб)    Винчестер (Гб)     Цена (у.е.) </B>    

    

      Celeron      256         40                  400

      Celeron      512         80                  420

      Pentium      256         40                  440

      Pentium      512         80                  460 </PRE>

Задание к лабораторной работе

Создать HTML-документ.

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

Применить оформление цветом к таблице, к ячейкам и границе таблицы, выравнивание текста в таблице.

Создать таблицу с использованием предварительного форматирования.


 

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

20774. Устройство, кинематика широкоуниверсального горизонтально-фрезерного станка и работы, выполняемые на нем 160.62 KB
  1600 Подача мм мин продольная и поперечная 25. Прямолинейные движения заготовки в трех направлениях служат для подачи углубления или первоначальной установки детали. В консоли размещена коробка подач.3 включает кинематические цепи главного движения подач и ускоренных перемещений стола.
20775. Изучение назначения, кинематики и настройки универсальной делительной головки УДГ Д-200 113.62 KB
  Червячная передача позволяет передавать вращение от рукоятки к шпинделю и заготовке. Делительный лимб 12 служит для отсчета числа оборотов рукоятки. Для удобства отсчета числа оборотов рукоятки к делительному лимбу прикреплен сектор 16 линейки которого раздвигаются на требуемый угол. При делении окружности заготовки на части вращение рукоятки может производиться относительно как неподвижного так и подвижного лимбов.
20776. Устройство вертикально-сверлильного станка и его настройка на обработку отверстий 1.74 MB
  Станок 2Н135 рис. Стол 2 имеет Тобразные пазы для крепления тисков приспособлений или детали. Рис. Краткая техническая характеристика станка 2Н135 Размеры рабочей поверхности стола мм ширина х на длину 450x500 Наибольший диаметр сверления в стали мм 35 Конус Морзе шпинделя №4 Наибольшее вертикальное перемещение стола мм 300 Число ступеней частоты вращения шпинделя 12 Частота вращения шпинделя мин1 315; 45; 63; 90; 125; 180; 250; 355; 500; 710; 1000; 1400 Число ступеней подач шпинделя 9 Подачи шпинделя мм об 01; 014; 02;...
20777. Ряды Динамики. Установление вида ряда динамики 1.63 MB
  Установление вида ряда динамики. Основная цель статистического изучения динамики коммерческой деятельности состоит в выявлении и измерении закономерностей их развития во времени. Это достигается посредством построения и анализа статистических рядов динамики.
20778. Индексный метод. Статистические индексы 262.5 KB
  Статистические индексы. Индексы широко применяются в экономических разработках государственной и ведомственной статистики. Индивидуальные и общие индексы. В зависимости от степени охвата подвергнутых обобщению единиц изучаемой совокупности индексы подразделяются на индивидуальные элементарные и общие.
20779. Выборочное наблюдение 1.05 MB
  Проведение исследования социально экономических явлений выборочным методом складывается из ряда последовательных этапов: 1 обоснование в соответствии с задачами исследования целесообразности применения выборочного метода; 2 составление программы проведения статистического исследования выборочным методом; 3 решение организационных вопросов сбора и обработки исходной информации; 4 установление доли выборки т. части подлежащих обследованию единиц генеральной совокупности; 5 обоснование способов формирования выборочной совокупности; 6...
20780. Изучение статистической связи 666.23 KB
  N 130 ПОЛОЖЕНИЕ О ПОРЯДКЕ ПРЕДСТАВЛЕНИЯ ГОСУДАРСТВЕННОЙ СТАТИСТИЧЕСКОЙ ОТЧЕТНОСТИ В РОССИЙСКОЙ ФЕДЕРАЦИИ I. ОБЩИЕ ПОЛОЖЕНИЯ Настоящее Положение разработано в соответствии с Законом Российской Федерации Об ответственности за нарушение порядка представления государственной статистической отчетности Временным положением о Государственном комитете Российской Федерации утвержденным Постановлением Президиума Верховного Совета РСФСР от 27 апреля 1991 года N 11171 и во исполнение постановления Верховного Совета Российской Федерации от 13 мая...
20781. Общая теория статистики 199.97 KB
  Отдельные объекты или явления образующие статистическую совокупность называются единицами совокупности. Например при проведении переписи торгового оборудования единицей наблюдения является торговое предприятие а единицей совокупности их оборудование прилавки холодильные агрегаты и т. Вариация это многообразие изменяемость величины признака у отдельных единиц совокупности наблюдения. Любое статистическое наблюдение осуществляется с помощью оценки и регистрации признаков единиц совокупности в соответствующих учетных документах.
20782. Калорифер воздушный распылительной сушильной установки 1.05 MB
  Поверхностные теплообменные аппараты, в свою очередь, делятся на рекуперативные и регенеративные. В рекуперативных аппаратах теплообмен между различными теплоносителями происходит через разделительные стенки.