Ответы на вопросы. Кодирование таблиц

На начало урока 13
Возврат

Вопросы

Кодирование таблиц

Ответы на вопросы

Расскажите, как устроена таблица.
Ответ. Таблица представляет собой прямоугольник, расчерченный на клетки. Вертикальные ряды клеток образуют столбцы, горизонтальные — строки. Каждая строка и столбец в таблице может иметь свой заголовок. Заголовки записываются в первой строке и первом столбце (вернее над первой строкой и слева от первого столбца содержимого таблицы).
Таблицы используют для хранения информации с двумя характерными признаками. Значения одного признака размещают в заголовках строк, другого — в заголовках столбцов. А в каждую клетку таблицы заносят значение, одновременно обладающее признаком строки и столбца, на пересечении которых она расположена.
Запишите общую структуру кода, задающего таблицу.
Ответ. Таблица задаётся элементом TABLE, который описывается парой тегов <TABLE>...</TABLE>. Между этими тегами задаются строки таблицы (пары тегов <TR>...</TR>). Наконец, внутри строк задаются клетки (ячейки) таблицы (пары тегов <TD>...</TD>).

Таким образом общая структура табличного кода имеет вид:
```
  
```

Объясните назначение атрибутов элемента TABLE и укажите их значения по умолчанию.

Ответ.

Атрибут	Значение	Описание
`align`	`left`, `right`, `center`	Выравнивание таблицы по горизонтали. По умолчанию таблица выравнивается слева без обтекания её другими элементами.
`width`	Число или процент	Ширина таблицы. По умолчанию размер таблицы определяется содержимым и способом форматирования, заданным в ячейках.
`height`	Число или процент	Высота таблицы. По умолчанию размер таблицы определяется содержимым и способом форматирования, заданным в ячейках.
`cellpadding`	Число	Расстояние между содержимым ячейки и её рамкой. По умолчанию значение задаётся браузером, обычно 2.
`cellspacing`	Число	Расстояние между рамками ячеек таблицы. По умолчанию значение задаётся браузером, обычно 1.
`bgcolor`	Цвет	Цвет фона таблицы. По умолчанию фон прозрачный.
`background`	URL файла	Фоновая картинка
`border`	Число	Толщина линий рамки. По умолчанию `border=0`.
`bordercolor`	Цвет	Цвет линий рамки. Если значение `border` отлично от нуля, то табличная рамка отображается с эффектом трёхмерности. Добавление атрибута `bordercolor` обеспечивает плоские рамки заданного атрибутом цвета.

Объясните назначение атрибутов элемента TR и укажите их значения по умолчанию.

Ответ.

Атрибут	Значение	Описание
`align`	`left`, `right`, `center`	Выравнивание содержимого ячеек по горизонтали. По умолчанию содержимое обычных ячеек (`TD`) выравнивается слева, ячеек-заголовков (`TH`) по центру.
`valign`	`top`, `middle`, `bottom`	Выравнивание содержимого ячеек по вертикали. По умолчанию содержимое ячеек выравнивается по центру.
`bgcolor`	Цвет	Цвет фона ячеек в строке. По умолчанию фон ячеек совпадает с фоном таблицы.

Объясните назначение атрибутов элемента TD (TH) и укажите их значения по умолчанию.

Ответ.

Атрибуты элементов TD и TН приведены в таблице:

Атрибут	Значение	Описание
`align`	`left`, `right`, `center`	Выравнивание содержимого ячейки по горизонтали. По умолчанию выравнивание определяется аналогичным атрибутом элемента `TR`, который содержит данную ячейку, а если выравнивание в элементе `TR` не задано, то содержимое обычных ячеек (`TD`) выравнивается слева, ячеек-заголовков (`TH`) по центру.
`valign`	`top`, `middle`, `bottom`	Выравнивание содержимого ячейки по вертикали. По умолчанию выравнивание определяется аналогичным атрибутом элемента `TR`, который содержит данную ячейку, а если выравнивание в элементе `TR` не задано, то содержимое ячеек выравнивается по центру.
`width`	Число или процент	Ширина ячейки. Если атрибут не задан, размер определяется по содержимому и заданному способу форматирования.
`height`	Число или процент	Высота ячейки. Если атрибут не задан, размер определяется по содержимому и заданному способу форматирования.
`bgcolor`	Цвет	Цвет фона ячейки. По умолчанию работает аналогичный атрибут в элементе-родителе `TR`, а если он не задан, атрибут в элементе `TABLE`. Если фон не задан и в элементе `TABLE`, фон ячеек прозрачный.
`background`	URL файла	Фоновая картинка для ячейки
`nowrap`		Выключение автоматического перевода строк. Если атрибут не задан, текст форматируется под размеры ячейки.
`colspan`	Число	Ширина составной ячейки в столбцах
`rowspan`	Число	Высота составной ячейки в строках

Чем отличается обычная ячейка, заданная элементом TD от ячейки-заголовка, заданной элементом TH?
Ответ. Содержимое обычной ячейки (TD) по умолчанию выравнивается слева по горизонтали и по центру по вертикали.

Содержимое ячейки-заголовка (TН) по умолчанию выравнивается по центру, как по горизонтали, так и по вертикали. Кроме того, текст в ячейке-заголовке выделяется (полужирным начертанием шрифта).
Как заставить объекты обтекать таблицу, используя табличные атрибуты?
Ответ. Чтобы другие объекты гипертекстовой страницы обтекали таблицу, нужно в теге <TABLE> указать атрибут align со значением left (таблица выравнивается слева, обтекание справа) или со значением right (таблица выравнивается справа, обтекание слева).

Как заставить объекты обтекать таблицу, используя стилевые свойства?

Ответ. Обтекание можно задать при помощи свойства float. Значение left: таблица выравнивается слева, обтекание справа. Значение right: (таблица выравнивается справа, обтекание слева).

(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

Для этой таблицы применено стилевое свойство float:left.

Код примера:

Как прервать обтекание таблицы?

Ответ. Если обтекание задано стилевым свойством float, то прекращение обтекания выполняется при помощи стилевого свойства clear (см. выше код примера).

Обтекание, заданное атрибутом align, прекращается элементом BR с атрибутом clear.

`<BR clear=left>`	Прекращение обтекания справа
`<BR clear=right>`	Прекращение обтекания слева
`<BR clear=all>`	Прекращение обтекания с обеих сторон

Как выровнять таблицу на странице без обтекания?
Ответ. Если в теге <TABLE> не указывать атрибут align, таблица будет выравниваться слева без обтекания.
Таблица <TABLE align=center> выравнивается по центру без обтекания.
Выровнять таблицу без обтекания можно поместив её внутрь элемента-блока, задав для последнего нужное выравнивание.
Как задать размеры таблицы и (или) отдельной ячейки? Что произойдёт, если размер содержимого больше заданных размеров? Заданный размер больше размеров текущего окна?
Ответ. Размеры таблицы или отдельной ячейки задаются атрибутами width (ширина) и height (высота). В качестве значения атрибута можно использовать целое положительное число (задаёт размер в пикселах) или проценты. Проценты вычисляются от размера родительского элемента. В примере, приведённом ниже, одна таблица вложена в другую, и для каждой задана ширина в 50%:

50%

Код примера:
```
  
```
Если реально для таблицы требуется больше места, значения width и height игнорируются. Если заданные размеры уводят таблицу за границы окна, браузер добавляет к окну полосы прокрутки.
Как задать свободное пространство между содержимым и границами ячеек?
Ответ. Атрибут cellpadding задаёт расстояние между рамкой (границей) таблицы и содержимым ячеек.
Как задать свободное пространство между ячейками таблицы?
Ответ. Сводное пространство между ячейками таблицы задаёт атрибут cellspacing.
Можно ли в каждой ячейке таблицы задать свой собственный фон?
Ответ. Атрибут bgcolor задаёт цвет фона, а атрибут background — “паркетный” фон ячейки.

Как браузер форматирует текст внутри табличной ячейки?

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

(1,1)	(1,2)
(2,1)	— Грозный Генька-генератор грубо грыз горох горстями… — начала было машина, но Трурль подскочил к пульту управления, нажал на рубильник и, заслонив его собственным телом, промолвил сдавленным голосом:
(3,1)	(3,2)

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

Как запретить браузеру автоматические переносы строк текста в ячейке?
Ответ. Атрибут nowrap (у него нет присваиваемых значений) запрещает браузеру выполнять автоматическое форматирование. При больших абзацах и небольших размерах окна этот приём вынуждает браузер показывать горизонтальную полосу прокрутки.
Как объединить несколько ячеек по горизонтали в одну ячейку?
Ответ. Нужно использовать атрибут colspan=n. Этот атрибут определяет, сколько табличных столбцов (n) займёт ячейка в пределах строки.
Ниже показана схема кода таблицы, в которой объединены две последовательные ячейки в табличной строке.
Как объединить несколько ячеек по вертикали в одну ячейку?
Ответ. Нужно использовать атрибут rowspan=n. Этот атрибут определяет, сколько табличных строк (n) займёт ячейка в пределах столбца.
Ниже показана схема кода таблицы, в которой объединены две последовательные ячейки в табличном столбце.

Как задать заголовок таблицы?

Ответ. Заголовок таблицы можно задать при помощи элемента CAPTION. Этот элемент помещается внутрь контейнера TABLE (вне табличных строк).

По умолчанию заголовок размещается сверху таблицы и выравнивается по её центру. Другое расположение для заголовка можно задать при помощи атрибута align:

Значение	Описание
`top`	Заголовок располагается сверху таблицы и выравнивается по центру
`bottom`	Заголовок располагается снизу таблицы и выравнивается по центру
`left`	Заголовок располагается сверху таблицы и выравнивается слева
`right`	Заголовок располагается сверху таблицы и выравнивается справа

Атрибутом align нельзя задать, например, заголовок, расположенный снизу и выровненный по левому краю. Ситуацию можно исправить использованием стилевых свойств.

Возврат
На начало урока 13