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

Влад Мержевич

Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр 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>, но в этом случае никакого обтекания не происходит и текст после таблицы начинается всегда с новой строки.

Статья опубликована: 08.09.2005

Последнее обновление: 28.03.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Антон

23.01.2007

У меня есть ячейка в ней две таблицы по две строки! В первой строке меню, а во второй картинка с закруглением. Дело в том что одна таблица (по высоте) длинее второй, но вторая не растягиваеться до первой. От потолка они на одном уровне, но от подвала на разных.

Дымка

13.05.2007

Вот такая же беда как и у Антона, как решить?

Влад Мержевич

14.05.2007

Высота таблицы вычисляется автоматически, исходя из содержимого. Можно насильно установить размеры, если в стилях прописать

TABLE {
height: 100%;
}

Александр

20.06.2007

IE7, FF2 - не работает. Возможно как-либо по другому?

Влад Мержевич

21.06.2007

Да, это работает, если вообще DOCTYPE убрать. А так запрещено спецификацией.

Aleks

25.12.2007

У меня вопрос возник.
У меня сложная таблица таблица.
Таблица с тремя горизонтальными блоками, одна посередине и по одной по бокам.
В каждом блоке еще по несколько таблиц.
В блоке по середине таблици находятся еще 2 таблицы независимые друг от друга, но не выходят за рамки блока.
Как сделать что бы вторая таблица в центральном блоке всегда ровнялась по низу?
Что бы что бы ни добавлялось в блок она была всегда снизу.

Жора

22.01.2008

Вот у меня тоже такой вопрос сейчас возник.
Подскажите, пожалуста, а то уже давно мучаюсь.

Влад Мержевич

19.02.2008

В вопросами по таблицам в форум, эта тема уже обсуждалась.

наташа

12.05.2008

есть ли выравнивание таблицы вверх.у меня из-за картинки таблица ушла вниз.что делать...........

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

Комментарии к статье

Добавить комментарий