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

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

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

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


 

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

40894. Реальний смушковий несиметричний хвильовід 149.5 KB
  У попередній задачі ми нехтували всіма розмірами – розглядали ідеальний випадок. Тепер розглянемо реальний: скористаємося тими самими моделями: нехай розповсюджується Т – хвиля, а ми розглядаємо одну половину (симетрія).
40895. ФОРМИ БЕЗПОСЕРЕДНЬОЇ ДЕМОКРАТІЇ В УКРАЇНІ 199.5 KB
  Поняття і види форм безпосереднього народовладдя в Україні Вибори в Україні Референдуми в Україні Поняття і види форм безпосереднього народовладдя в Україні Чинна Конституція України визнала вперше не лише належність влади народу тобто володіння політичною владою як його природне право мати владу але і його право здійснювати владу. 5 Конституції України зазначається що право визначати і змінювати конституційний лад в Україні належить виключно народові і воно не може бути узурповане...
40896. Симетричний смушковий хвильовід 51 KB
  Тут менше аніж у попередній лінії оскільки ємність тут більша. Однак тут менше не в 2 рази оскільки у попередньому хвильоводі ємність враховувалась і до верхньої сторони верхньої смужки і до нижньої див. тому там ємність більша аніж у звичайному конденсаторі.
40897. Повільні хвилі 183.5 KB
  Непрямолінійний розповсюджувач меандр спіраль Для багатьох електричних приладів необхідно отримати хвилю, що рухається зі швидкістю . Це зокрема стосується приладів, у яких відбувається передача енергії та інформації від хвилі іншим носіям.
40898. Гібридні хвилі 91 KB
  У випадку розглянутому вище, хвильовода (стержня), ми маємо три граничні умови і дві константи в рівняннях, а тому рівняння в загальному випадку не буде мати розв’язків. Однак, тут нам потрібно розглядати не тільки, а і хвилю : Тепер поле описується чотирма константами і відповідно чотирма граничними умовами.
40899. Об’ємні резонатори 117.5 KB
  З урахуванням граничних умов на бокових стінках (стінках хвильовода): Накладемо ще дві граничні умови: звідки одержимо - неправильно. Це тому, що не врахували відбиття від торців; правильно буде записати:
40900. Відкриті резонатори 118.5 KB
  Тут не можна використовувати геометричні наближення потрібно розвязувати рівняння Максвела. Розвяжемо рівняння Максвела для сферичного діелектричного резонатора. Щоб отримати саме хвильове рівняння де була б ще й похідна необхідно зробити заміну: . Розвяжемо простіше рівняння для та методом відокремлених змінних: тоді .
40901. Метод магнітної стінки 112.5 KB
  Обернена ситуація хвиля виходить з металу або діелектрика в вакуум. Зліва стояча хвиля справа біжуча звичайна зі сталою амплітудою. вакуум метал Пряма хвиля ідбита хвиля Граничні умови:.
40902. Ортогональність власних хвиль у хвильоводі 125.5 KB
  Запишемо лему Лоренца для цього випадку. ( - стала розповсюдження.) У вигляді хвилі візьмемо властивість хвилі у хвильоводі: ; - позначення. бо розглядаємо власні хвилі і зовнішніх струмів немає.