HTML Table

1

HTML

2

Описание
таблицы

Описание строки

Описание ячейки

Таблицы в HTML формируются

построчно

Сначала c помощью тега TR

необходимо создать ряд таблицы,

в который затем тегом TD

помещаются ячейки.

4

Пример:

<TABLE BORDER>

<TR>

<TD>A1</TD> <TD>B1</TD> <TD>C1</TD>

</TR>
<TR>

<TD>A2</TD> <TD>B2</TD> <TD>C2</TD>

</TR>

</TABLE>

5

пример

результат

 Элемент для создания таблицы.

Обязательно должен иметь начальный и
конечный теги.

По умолчанию таблица печатается без

рамки, а разметка осуществляется
автоматически в зависимости от объема
содержащейся в ней информации.

 Ячейки внутри таблицы создаются с

помощью элементов TR, TD, TH и CAPTION.

7

• ALIGN - определяет способ
горизонтального выравнивания
таблицы. Возможные значения: left,
center, right. Значение по умолчанию -
left.

• VALIGN - должен определять способ
вертикального выравнивания для
содержимого таблицы. Возможные
значения: top, bottom, middle.

8

• BORDER - определяет ширину
внешней рамки таблицы (в пикселах).
При BORDER="0" или при отсутствии
этого параметра рамка отображаться
не будет.

• BGCOLOR - определяет цвет фона ячеек
таблицы.

9

• WIDTH - определяет ширину таблицы.

Ширина задается либо в пикселах, либо в
процентном отношении к ширине окна
браузера. По умолчанию этот параметр
определяется автоматически в зависимости от
объема содержащегося в таблице материала.

• HEIGHT - определяет высоту таблицы. Высота

задается либо в пикселах, либо в процентном
отношении к высоте окна браузера. По
умолчанию этот параметр определяется
автоматически в зависимости от объема
содержащегося в таблице материала.

10

• CELLPADDING - определяет расстояние (в
пикселах) между рамкой каждой ячейки
таблицы и содержащимся в ней
материалом.

• CELLSPACING - определяет расстояние (в
пикселах) между границами соседних
ячеек.

• BACKGROUND - позволяет заполнить фон
таблицы рисунком. В качестве значения
необходимо указать URL рисунка.

11

• Задает заголовок таблицы. Содержание
заголовка должно состоять только из
текста. ALIGN - определяет способ
вертикального выравнивания заголовка
таблицы. Возможные значения:
• top - помещает заголовок над таблицей
(значение по умолчанию);

• bottom - помещает заголовок под
таблицей.

12

Создает новый ряд (строку) ячеек
таблицы. Ячейки в ряду создаются с
помощью элементов TD и TH

13

ALIGN - определяет способ горизонтального

выравнивания содержимого всех ячеек данного
ряда. Возможные значения: left, center, right.

• VALIGN - определяет способ вертикального

выравнивания содержимого всех ячеек данного
ряда. Возможные значения: top, bottom, middle.

• BGCOLOR - определяет цвет фона для всех ячеек

данного ряда. Задается либо RGB-значением в
шестнадцатиричной системе, либо одним из 16
базовых цветов.

14

TD создает ячейку с данными в текущей
строке.

TH также создает ячейку, но определяет ее
как ячейку-заголовок.

Такое разграничение позволяет браузерам
оформлять содержимое ячейки-заголовка и
ячеек с данными разными шрифтами.

В качестве содержимого ячейки можно
использовать другие таблицы.

15

ALIGN - определяет способ горизонтального

выравнивания содержимого ячейки. Возможные
значения: left, center, right. По умолчанию способ
выравнивания определяется значением
параметра ALIGN элемента TR. Если же и он не
задан, то для TD выполняется выравнивание по
левому краю, а для TH - центрирование.

VALIGN - определяет способ вертикального

выравнивания содержимого ячейки. Возможные
значения: top, bottom, middle. По умолчанию
происходит выравнивание по центру
(VALIGN="middle"), если значение этого параметра
не было задано ранее в элементе TR.
16

WIDTH - определяет ширину ячейки. Ширина задается в

пикселах или в процентном отношении к ширине
таблицы.

• HEIGHT - определяет высоту ячейки. Высота задается в

пикселах или в процентном отношении к ширине
таблицы.

• COLSPAN - определяет количество столбцов, на которые

простирается данная ячейка. По умолчанию имеет
значение 1.

• ROWSPAN - определяет количество рядов, на которые

простирается данная ячейка. По умолчанию имеет
значение 1.

17

• NOWRAP - блокирует автоматический
перенос слов в пределах текущей
ячейки.

• BGCOLOR - определяет цвет фона
ячейки.

• BACKGROUND - заполняет ячейку
фоновым рисунком.

18

АТРИБУТЫ ТЕГА <TD> и <TH>

Multiple Choice

В тексте документа HTML определение таблицы находится между какими тегами?

• <TABLE> </TABLE>
• <TABLICA></TABLICA>
• <BODY></BODY>
• <HEAD></HEAD>

Multiple Choice

Какой тег в описании таблицы отвечает за строки?

• TABLE
• TR
• TD
• CAPTION

Multiple Choice

Какой тег отвечает за столбцы в таблице?

• TR
• TD
• CAPTION
• STOLBEC

Multiple Choice

Какой тег определяет выравнивание таблицы в HTML-документе?

• align
• center
• left
• right

Multiple Choice

Тег BORDER отвечает за...

• толщину рамки таблицы
• цвет рамки таблицы
• размер таблицы
• ширину таблицы

Multiple Choice

Чтобы установить фиксированную ширину таблицы на странице необходимо использовать...

• width
• height
• 100%
• size

Multiple Choice

Чтобы изменить фон таблицы используют параметр...

• bgcolor
• bordercolor
• color
• background

Multiple Choice

Что определяет тег VALIGN в строке?

• выравнивание текста в ячейке по вертикали
• выравнивание текста в ячейке по горизонтали
• выравнивание текста в ячейке по ширине
• нет верного ответа

Multiple Choice

Как будет отображено содержимое в строке с кодом:
<TR align=justify>

• слева
• справа
• по центру
• по ширине

Multiple Choice

Устанавливает число ячеек, которые должны быть объединены по вертикали.

• colspan

• rowspan

• rovspan

• cotspan

Multiple Choice

Устанавливает число ячеек, которые должны быть объединены по горизонтали

• colspan

• colspah

• rovspan

• rowspan

Multiple Choice

Для обозначения заголовка в таблице используют тег...

• TH
• TD
• TD
• CAPTION

Multiple Choice

Тег CAPTION обозначает...

• Ячейку

• Заголовок

• Строку
• Столбец

Fill in the Blank

Сколько строк в данном шаблоне?

<html>

<head>

<title></title>

</head>

<body> <table>

<tr>

<td></td><td></td> <td></td>

</tr>

<tr>

<td></td><td></td> <td></td>

</tr> </table>

</body>

</html>    

Multiple Choice

Значение атрибута align не может быть 

• center

• left

• right

• top

Fill in the Blank

Сколько столбцов в данном шаблоне?

<html>

<head>

<title></title>

</head>

<body> <table>

<tr>

<td></td><td></td> <td></td>

</tr>

<tr>

<td></td><td></td> <td></td>

</tr> </table>

</body>

</html>    

Multiple Choice

Значением атрибута border может быть

• green

• 2

• top

• left

Multiple Choice

Какой вариант является правильно организованной гиперссылкой?

• a href="page1.html"

  a src="page1.html"

  img href="page.html"

• a img="page1.html"

• a src="page1.html"

  img

• a href="page1.html"

Multiple Choice

Какой тег из перечисленных не является основным?

• html

• head

• body

• caption

Multiple Choice

Каким тегом задается цвет текста на web-странице?

• <a name="..."></a>

• <img src="...">

• <a href="..."> </a>

• <font color="..."> </font>