Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" bordercolor="black" align="center">
<tr>
 <td>
  Содержимое таблицы
 </td>
</tr>
</table>

</body>
</html>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" bordercolor="black" align="right" style="margin: 10px">
<tr>
 <td>
  Содержимое таблицы
 </td>
</tr>
</table>
Обтекающий таблицу текст...
</body>
</html>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table width="200" bgcolor="#c0c0c0" align="right">
<tr>
 <td>
  Содержимое таблицы
 </td>
</tr>
</table>

<br style="clear: both">
<p>Текст...</p>
</body>
</html>

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





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!