Зарегистрироваться

Последний отзыв

Последние каникулы детства

Сергей Богаткин

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

По всем вопросам обращайтесь на: info@litportal.ru

(©) 2003-2024.

✖

Оценить:

Рейтинг: 4.6

Купить и скачать

HTML, XHTML и CSS на 100%

Name: HTML, XHTML и CSS на 100%
Rating: 5 (5 reviews)
Author: Игорь Квинт

Автор

Игорь Квинт

Жанр

Интернет

Год написания книги

2010

Теги

<< 1 ... 23 24 25 26 27 28 29 30 >>

На страницу:

Перейти

27 из 30

Настройки чтения

Размер шрифта

Высота строк

Поля

<caption>Ширина таблицы 300 пикселов</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>

<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>

</table>

</body>

</html>

3.6. Группировка строк и столбцов

В стандарте HTML 4 появились новые элементы для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами.

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

Полезным атрибутом элементов COLGROUP и COL является атрибут span со значением n. Атрибут распространяет свойства, заданные этими элементами на n столбцов в группе.

<table>

<col span=2 style="color:red">

<tr><td> Этот текст будет красным цветом </td>

<td> И этот текст будет красным цветом </td>

<td> А этот текст будет черным цветом </td></tr>

</table>

Для группировки строк таблицы служат элементы THEAD, TBODY и TFOOT. Их использование существенно облегчает компоновку и форматирование таблиц.

Для создания группы заголовков для столбцов таблицы используют элемент THEAD. Его допускается использовать в пределах таблицы только один раз. Для создания одной или нескольких групп строк таблицы, содержащих основные данные, применяется элемент TBODY. Элемент TFOOT позволяет создать группу строк для представления информации о суммах или итогах в нижней части таблицы. Этот элемент допускается использовать в пределах таблицы только один раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов.

<thead>

<tr><th> </th><th> </th><th> </th></tr>

</thead>

</tbody>

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

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

<tbody>

Предположим, нужно создать таблицу, в которой внутренние линии не отображаются, а отображается только линия, отделяющая заголовки столбцов от основного текста (тела таблицы). Чтобы создать такую таблицу, необходимо выполнить следующее.

1. Сгруппировать строки нужным образом.

2. Указать видимость границы между группами строк.

3.7. Выравнивание таблицы и содержимого ячеек

Для выравнивания элементов таблиц по горизонтали и вертикали в элементах TABLE, TR, TH и TD используют атрибуты align и valign.

Атрибут align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:

• <table align=left/right/center> – таблицы на странице по левому краю/правому краю/по центру;

• <tr align=left/right/center> – элементов строки по левому краю/правому краю/по центру;

• <th align=left/right/center> – заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);

• <td align=left/right/center/char> – данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю).

Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:

• <table valign=bottom/middle/top> – элементов таблицы внизу/по центру/вверху (по умолчанию по центру);

• <tr valign=bottom/middle/top> – элементов строки внизу/по центру/ вверху;

• <th valign=bottom/middle/top> – заголовка таблицы внизу/по центру/ вверху;

• <td valign=bottom/middle/top> – данных в ячейке внизу/по центру/ вверху.

В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).

Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек

<html>

<head>

<title>Простая HTML-таблица</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="0"width= "400" height="150" align=center>

<caption>Наименование товара</caption>