Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Выравнивание таблицы

Alex | 16.03.2014 | нет комментариев

Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр align тега <TABLE>. Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, другими словами, меньше, чем 100%.

Параметр align может принимать следующие значения: left, right, center.

left — выравнивание таблицы по левому краю. Этот параметр используется по умолчанию, поэтому его обычно не указывают.
right — выравнивание таблицы по правому краю веб-страницы.
center — выравнивание таблицы по центру веб-страницы.

В примере 1 показано, как задать выравнивание таблицы по центру.

Пример 1. Выравнивание таблицы по центру

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Выравнивание таблицы</title>
</head>
<body><table width=”200″ bgcolor=”#c0c0c0″ cellspacing=”0″ cellpadding=”5″ border=”1″ align=”center”>
<tr>
<td>
Содержимое таблицы
</td>
</tr>
</table>

</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Выравнивание таблицы по центру

На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега <IMG>. Но поскольку <TABLE> не имеет параметра hspace, задающего поле по горизонтали, то эту роль необходимо переложить на стили, в частности, атрибут margin. В примере 2 показано выравнивание таблицы по правому краю и ее обтекание текстом.

Пример 2. Выравнивание таблицы по правому краю

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Выравнивание таблицы</title>
</head>
<body>
<table width=”200″ bgcolor=”#c0c0c0″ cellspacing=”0″ cellpadding=”5″ border=”1″ align=”right” style=”margin: 10px”>
<tr>
<td>
Содержимое таблицы
</td>
</tr>
</table>
<p>Обтекающий таблицу текст…</p>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Выравнивание таблицы по правому краю

В текущем примере создается таблица с фоном серого цвета и выравниванием по правому краю. Для создания отступов от таблицы до текста используется параметр margin со значением 10 пикселов.

Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще всего добавить после таблицы тег <BR> с заданным стилем clear: both. Эта команда запрещает обтекание, как с левого, так и с правого края (пример 3).

Пример 3. Отмена обтекания таблицы

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Обтекание таблицы </title>
</head>
<body>
<table width=”200″ bgcolor=”#c0c0c0″ align=”right”>
<tr>
<td>
Содержимое таблицы
</td>
</tr>
</table><br style=”clear: both”>
<p>Текст…</p>
</body>
</html>

Выравнивание таблицы по центру делается аналогично, через параметр align=”center” тега<TABLE>, но в этом случае никакого обтекания не происходит и текст после таблицы начинается всегда с новой строки.

АВТОРСКИЕ ПРАВА
Источник: alldes.net
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB