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-документ.

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

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

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


 

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

47798. Основи екології. Курс лекцій 688.5 KB
  Науковотехнічний прогрес швидкість якого на декілька порядків перевищує швидкість адаптування організмів до змінених людиною умов існування породжує нові джерела збурення тиску на біосферу її забруднення знищення природних ресурсів катастрофічне зменшення біорозманіття. Трансграничні забруднення та локальні поліпшення стану довкілля за рахунок руйнування екосистем інших регіонів лише призведуть до подальшої деградації глобальної екосистеми та посилення небезпеки для всієї планети. Екологи України зробили вагомий внесок у розробку...
47800. Учёт и анализ расчётов с персоналом по оплате труда 421.5 KB
  Заработная плата представляет собой выраженную в денежной форме часть общественного продукта, которая выплачивается наёмному работнику исходя из количества и качества выполненного им труда, и максимальным пределом не ограничивается.
47801. Проект редуктора привода ленточного транспортера для перемещения багажа в аэропорту 1.15 MB
  Материалы для шестерни и зубчатого колеса выбираем по таблице «Механические характеристики сталей» При этом твердость поверхности НВ1 для материала шестерни устанавливаем на 20/25 единиц выше твердости поверхности НВ2.
47802. КУЛЬТУРОЛОГІЯ. КОНСПЕКТ ЛЕКЦІЙ 2.5 MB
  Особистість у світі культури. Феномен української культури. Тенденції розвитку сучасної української культури. В загальній спрямованості сучасного гуманітарного знання до ствердження пріоритету індивідуальноособистісних сенсожиттєвих орієнтацій проблема всебічного осмислення культури постає однією з найактуальніших і безпосередньо повязується з виявленням найглибших світоглядних засад людського буття.
47803. Мікроекономіка. Навчальний посібник 2.26 MB
  Значна увага приділяється теорії виробництва та механізму вибору його обсягів які максимізують прибуток виробника в умовах різних моделей ринку. При аналізі теорії виробництва особлива увага приділяється формуванню затрат і залежності динаміки продукту від динаміки затрат факторів виробництва. Проаналізовано також закономірності формування витрат виробництва в короткотерміновому та довготерміновому періодах. Чотири теми що їх включає в себе цей розділ присвячені відповідно прийняттю фірмою рішення про ціни та обсяги виробництва в умовах...
47804. Вікова фізіологія. Опорний конспект лекцій 10.52 MB
  Навпаки в наркоманів та алкоголіків біологічний годинник набагато випереджає хронологічний: зовні вони виглядають на 10 років старшими за свій вік мають мляву мускулатуру опущені плечі ледве пересуваються; память та інші розумові процеси сповільнені емоції знебарвлені. На відміну від паспортного віку де міжвіковий інтервал дорівнює одному рокові біологічний або анатомофізіологічний вік обіймає ряд років життя людини протягом яких відбуваються певні біологічні зміни. Формування людського організму продовжується після...
47806. Українська мова. Тексти лекцій 2.87 MB
  У них систематизовано наукові знання про мову професійного спілкування; норми літературної мови; стилістичну систему сучасної української літературної мови; види типи і форми фахового спілкування; види публічного мовлення як важливого способу комунікації; вимоги до складання текстів документів; науковий стиль і його засоби у професійній діяльності; проблеми перекладу й редагування наукових текстів тощо. ЗАКОНОДАВЧІ ТА НОРМАТИВНОСТИЛЬОВІ ОСНОВИ ПРОФЕСІЙНОГО СПІЛКУВАННЯ Лекція 1. Державна мова мова професійного спілкування План Мета...