www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > FAQ > Таблицы > Как выровнять содержимое ячеек таблицы по верхнему краю?

Справочник по CSS (ЦСС) и ШТМЛ

Как выровнять содержимое ячеек таблицы по верхнему краю?

Таблицы часто применяются для разработки многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке контент начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью параметра valign="top" тега <TD>. В примере 1 показано, как выравнивать по верхнему краю ячейки за счет атрибута valign.

Пример 1. Использование параметра valign

Валидный 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="100%" cellpadding="5">
<tr>
<td valign="top" bgcolor="#cccccc">Углерод</td>
<td valign="top" bgcolor="#ffffdd">Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.</td>
</tr>
</table>
</body>
</html>

С помощью стилей удобнее управлять положением содержимого в ячейках. Для этого следует применить параметром vertical-align со значением top, добавляя его к селектору TD, как показано в примере 2.

Пример 2. Применение стилей

Валидный HTML
Валидный CSS

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выравнивание содержимого ячеек</title>
<style type="text/CSS (ЦСС)">
TABLE {
width: 100%; /* Ширина таблицы */
}
TD {
padding: 5px; /* Поля в ячейках */
vertical-align: top; /* Выравнивание по верхнему краю ячеек */
}
.col1 { background: #ccc; }
.col2 { background: #ffd; }
</style>
</head>
<body>
<table>
<tr>
<td class="col1">Углерод</td>
<td class="col2">Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества.</td>
</tr>
</table>
</body>
</html>

В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю

Поиск по сайту




FAQ

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

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