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

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

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

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


 

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

61896. ОПЕРАТОРИ ЦИКЛУ 93.5 KB
  Призначення операторів циклу. Кожний з трьох засобів організації циклу має свої особливості для кожного засобу є своє коло задач які найбільш природно вирішуються саме з його допомогою.
61897. 33 игры для развития глагольного словаря дошкольников 1005.17 KB
  Образовывать глаголы сначала от звукоподражаний, а затем и при помощи приставок; Использовать в речи различные глагольные формы (совершенный и несовершенный вид, прошедшее, настоящее и будущее время); согласовывать глаголы с существительным и т.д.
61898. Состав числа 8 48 KB
  Что вы знаете о числах от 1 до 10 на слайде 3 утёнка Сколько здесь утят Какой цифрой обозначаем С помощью каких двух слагаемых можно получить число 3 Это называется состав числа 3. Упражнения на ориентацию в пространстве слайд Сколько на рисунке детей Сколько мальчиков Девочек...
61899. В. Сухомлинський «Горбатенька». В. Нестайко «Руденький» 62.5 KB
  Нестайка розрізні слова ілюстрації до тексту завдання уроку пересувна дошка ілюстрації адвоката прокурора судді запис словникової роботи підручник О. а ланцюжкове читання тексту як це все було без мене б вибіркове читання тексту...
61901. П. Куліш Чорна рада. 1 та 2 частини 34.5 KB
  По весні 1663 року двоє подорожніх, верхи на добрих конях простували до Череваневого хутора... А. Ярище; Б. Вітрище; В. Хмарище. 2. Ніхто б і не сказав, що ці подорожні їдуть до веселого пана Череваня, бо самі вони були...
61902. П. Куліш Чорна рада. 3-5 частини 31 KB
  Перед подорожніми відкрився святий город Київщо сіяв як той А. через Нижній город; Б. через Середній город; В. Через Верхній город.
61903. ЯРМАРОК ПЕДАГОГІЧНИХ ІДЕЙ 27.5 KB
  вчитель математики МЕТА: використання на уроках теоретичного матеріалу для пояснення теми Чотирикутник з використанням презентацій і вчителя і учня Завдання: узагальнити теоретичний матеріал з тем: Чотирикутник і його елементи Паралелограм та його властивості Прямокутник та його властивості Ромб та його властивості Квадрат Опис даної розробки. В даній презентації узагальнено теоретичний матеріал з тем: Чотирикутник і його елементи Паралелограм та його властивості Прямокутник та його властивості Ромб та його...