|
Выравнивание таблицы
Для задания выравнивания таблицы по центру веб-страницы или по одному из ее краев предназначен параметр align тега <TABLE>. Результат будет заметен только в том случае, если ширина таблицы не занимает всю доступную область, другими словами, меньше, чем 100%.
Параметр align может принимать следующие значения: left, right, center.
left — выравнивание таблицы по левому краю. Этот
параметр используется по умолчанию, поэтому его обычно не указывают.
right — выравнивание таблицы по правому краю веб-страницы.
center — выравнивание таблицы по центру веб-страницы.
В примере 1 показано, как задать выравнивание таблицы по центру.
Пример 1. Выравнивание таблицы по центру
<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. Выравнивание таблицы по центру
На самом деле align не только устанавливает выравнивание, но и заставляет текст обтекать таблицу с других сторон аналогично поведению тега <IMG>. Но поскольку <TABLE> не имеет параметра hspace, задающего поле по горизонтали, то эту роль необходимо переложить на стили, в частности, атрибут margin. В примере 2 показано выравнивание таблицы по правому краю и ее обтекание текстом.
Пример 2. Выравнивание таблицы по правому краю
<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. Выравнивание таблицы по правому краю
В текущем примере создается таблица с фоном серого цвета и выравниванием по правому краю. Для создания отступов от таблицы до текста используется параметр margin со значением 10 пикселов.
Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще всего добавить после таблицы тег <BR> с заданным стилем clear: both. Эта команда запрещает обтекание, как с левого, так и с правого края (пример 3).
Пример 3. Отмена обтекания таблицы
<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.htmlbook.ru
Created/Updated: 25.05.2018
☕ Якщо ви вважаєте ці поради українською корисними, можете підтримати автора і, звичайно, отримуйте задоволення!
📩 Шановні, якщо хочете додати або відредагувати, надішліть повідомлення через форму контакту.