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

www-html.ru

Обычная версия

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

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

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

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

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

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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. Выравнивание таблицы по правой стороне

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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. Отмена обтекания таблицы

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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>, но в этом случае никакого обтекания не происходит и контент после таблицы начинается всегда с новой строки.



Copyright © Все права засчищены
www.www-html.ru