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

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

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

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


 

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

2639. Моделирование электростатических полей 893.5 KB
  Моделирование электростатических полей Цель работы: определение расположения эквипотенциалей, построение силовых линий электрических полей, задаваемых электродами различной конфигурации, и построение качественной зависимости напряжённости электричес...
2640. Україна в часи хрущовської відлиги, застою та перебудови (1965 – 1991 рр.) 148 KB
  Україна в часи хрущовської відлиги, застою та перебудови (1965 – 1991 рр.). План  Україна в період лібералізації суспільно-політичного життя в Радянському Союзі (середина 50-х – середина 60-х ...
2641. Україна в другій світовій війні та перші повоєнні роки (1939-1954 рр.) 122.5 KB
  Україна в другій світовій війні та перші повоєнні роки Зміст  Українські землі напередодні та на початку другої світової війни.  Україна в роки Великої Вітчизняної війни. Україна у повоєнний період (друга половина 40-х – перша п...
2642. Определение работы выхода электрона из металла методом прямых Ричардсона 138.5 KB
  Определение работы выхода электрона из металла методом прямых Ричардсона Приборы и принадлежности. Лабораторная панель, блок питания накала Б5-70, блок питания анода Б5-70, универсальный вольтметр В7-27. Введение. Принцип работы большинства электров...
2643. Залучення випускників шкіл до навчання в МНУ імені В.О. Сухомлинського 126.5 KB
  Виховний захід на тему: «Залучення випускників шкіл до навчання в МНУ імені В.О. Сухомлинського» Миколаївський національний університет імені В. О. Сухомлинеького (до 21 серпня 2010 року — Миколаївський державний університет імені В. О. Сухомли...
2644. Профессиональная ориентация школьников старших классов 58 KB
  Внеклассное мероприятие «Профессиональная ориентация школьников старших классов» В современном мире существует огромное разнообразие профессий. В подростковом возрасте достаточно сложно сделать правильный выбор высшего учебного заведения, без помощи...
2645. Твоя майбутня професія 69 KB
  Тема: твоя майбутня професія. Мета: ознайомити учнів із різноманіттям професій, допомогти виявити здібності до певного виду діяльності, визначити суспільну значущість обраної професії,  виховати повагу до різних типів діяльності. Обладнання: те...
2646. Міжвоєнний період в історії українського народу 152.5 KB
  Міжвоєнний період в історії українського народу (1921-1939рр). Соціально-економічне та політичне становище українських земель в 20-30 роках. Національно культурне відродження в Україні. Політичне становище Захід...
2647. Українська національно-демократична революція (1917-1920 рр.). 113 KB
  Українська національно-демократична революція (1917-1920 рр.). Україна напередодні та в роки І світової війни. Україна після лютневої буржуазно-демократичної революції. Утворення Центральної Ради та її діяльність. Укр...