Теоретический материал для подготовки к практической работе по теме «Создание и оформление таблиц» (средствами xhtml и css)

Задания для студентов:

1. Внимательно изучите предложенный теоретический материал.

2. Напишите опорный конспект, внеся в него все основные понятия, назначение тегов, атрибутов и их значений.

3. Реализуйте на практике листинги 1-8.

Замечание: каждый студент получает допуск к выполнению практической работы, показав владение изученным теоретическим материалом и предоставив решение всех заданий.

Таблицы

Таблицы в (Х)НТМL-документах применяют довольно часто с двумя основны­ми целями. Во-первых, для представления данных с естественной табличной орга­низацией (например, прайс-листы, сведения о спортивных состязаниях, план-график выполнения работ и т. п.). Во-вторых, таблицы все еще широко использу­ются как средство разметки пространства Web-страницы, хотя эту задачу лучше решать с помощью тегов <div> и CSS.

1. Табличные теги

Данные в таблице организованы в виде прямоугольной сетки, которая состоит из вертикальных колонок (столбцов) и горизонтальных рядов (строк). Таблицы со­стоят из пяти основных частей: названия, верхней части (шапки), заголовков столбцов, ячеек с данными и нижней части (подвала). Впрочем, таблица может и не иметь названия, заголовков столбцов, верхней и нижней частей. Для задания таб­лицы достаточно определить ее ячейки, в которых будут находиться данные.

Все теги формирования таблицы, кроме <col/>, контейнерные, они содержат:

<table> - все другие теги таблицы;

<caption> - название таблицы; если применяется, то только непосредственно после открывающей части тега <table>;

<thead> - набор строк верхней части таблицы; если применяется, то только один раз перед элементом <tbody>;

<tfoot> - набор строк, располагающихся ниже основной части таблицы (под­вал); если применяется, то только один раз перед элементом <tbody>;

<tbody> - набор строк основной части таблицы; может применяться несколько раз для логического выделения группы строк, задаваемых тегами <tr>;

<tr>- ячейки, составляющие одну строку таблицы; в теге <tr> размещаются теги ячеек <td> и <th>;

<td> - данные, содержащиеся в ячейке таблицы;

< th> - данные, содержащиеся в ячейке, используемой как заголовок столбца;

<col/> - параметры выравнивания столбцов; это неконтейнерный тег;

<colgroup> - группы cтолбцов.

Для формирования таблицы тег <table> обязателен. Остальные теги присутст­вуют в нем по желанию разработчика. В большинстве случаев можно обойтись только тегами <tr> для строк и <td> для ячеек.

Для задания названия таблицы предназначен тег <caption>. По умолчанию на­звание располагается над прямоугольником таблицы и центрируется относительно его по горизонтали. Управлять расположением элемента <caption> можно посред­ством стилевого параметра caption-side, который принимает значения top и bottom, Firefox воспринимает еще и значения right и left. Данный параметр на­значается элементу <table>.

Каждый ряд (строка) ячеек задается тегом <tr>. Если ряд должен содержать заголовки столбцов таблицы, то добавляют теги <th>. Для размещения данных в ячейках служит тег <td>. Теги заголовков столбцов и ячеек для данных долж­ны располагаться в теге ряда <tr>.

Таблица - это элемент блочного типа. По умолчанию она представляет­ся в окне браузера без рамки. Размеры таблицы в целом и ячеек вычисляются браузером исходя из объема содержимого (данных). Названия заголовков в тегах <th> центрируются в ячейках по горизонтали и вертикали и отображаются полужирным шрифтом, а данные в тегах <td> центрируются по вертикали, выравниваются по левому краю ячеек и отображаются обычным шрифтом.

В листинге 1 приведен код таблицы, содержащей все перечисленные теги, а на рис. - ее вид в окне браузера.

Листинг 1.

П ри создании таблицы обычно решают две основные задачи:

- задают геометрическую структуру (число рядов и ячеек, размеры, расстояния между ними и т. п.);

- определяют внешний вид и форматирование данных в ячейках (рамки, фон, вы­равнивание данных в ячейках). Основу таблицы формируют HTML-тегами, а далее ее приводят к надлежащему виду с помощью соответствующих атрибутов тегов и параметров CSS.