www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Уроки > Таблицы > Выравнивание таблицы

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

контентовая версия  

Для задания выравнивания таблицы по центру 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=utf-8">
<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=utf-8">
<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=utf-8">
<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.2009 Последнее обновление: 28.03.2009
Поиск по сайту
Таблицы
Разделы
Теги по теме

BR
Тег BR устанавливает перевод строки в месте, где этот тег встречается.

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

TABLE
Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

CSS (ЦСС) по теме

clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект