www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Оформление таблиц > Таблица с рамкой

Таблица с рамкой

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

Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого web-страницы и расширить набор средств по дизайну таблиц.

Для разработки рамки применяется стилевое свойство border, которое добавляется к селектору TABLE. Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег <TH>), как показано на рис. 1.

Рис. 1. Таблица с рамкой

Рис. 1. Таблица с рамкой

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

Пример 1. Создание рамки вокруг таблицы

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/CSS (ЦСС)">
TABLE {
 width: 300px; /* Ширина таблицы */
 border: 1px solid black; /* Рамка вокруг таблицы */
}

TD, TH {
 padding: 3px; /* Поля вокруг содержимого ячеек */
}

TH {
 text-align: left; /* Выравнивание по левоой стороне */
 background: black; /* Цвет фона */
 color: white; /* Цвет контента */
}
</style>
</head>
<body>

<table cellspacing="0">
 <tr>
  <th>&nbsp;</th>
  <th>2004</th>
  <th>2009</th>
  <th>2009</th>
 </tr>
 <tr>
  <td>Рубины</td>
  <td>43</td>
  <td>51</td>
  <td>79</td>
 </tr>
 <tr>
  <td>Изумруды</td>
  <td>28</td>
  <td>34</td>
  <td>48</td>
 </tr>
 <tr>
  <td>Сапфиры</td>
  <td>29</td>
  <td>57</td>
  <td>36</td>
 </tr>
</table>

</body>
</html>

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

Рис. 2. Таблица с рамкой

Рис. 2. Таблица с рамкой

Изменение выравнивания происходит с помощью стилевого свойства text-align, при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2).

Пример 2. Таблица с выравниванием содержимого ячеек

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/CSS (ЦСС)">
TABLE {
 width: 300px; /* Ширина таблицы */
 border: 2px solid black; /* Рамка вокруг таблицы */
 background: silver; /* Цвет фона таблицы */
}

TD, TH {
 text-align: center; /* Выравнивание по центру */
 padding: 3px; /* Поля вокруг содержимого ячеек */
}

TH {
 background: #4682b4; /* Цвет фона */
 color: white; /* Цвет контента */
 border-bottom: 2px solid black; /* Линия снизу */
}

.lc {
 font-weight: bold; /* Жирное начертание контента */
 text-align: left; /* Выравнивание по левоой стороне */
}
</style>
</head>
<body>

<table cellspacing="0">
 <tr>
  <th>&nbsp;</th>
  <th>2004</th>
  <th>2009</th>
  <th>2009</th>
 </tr>
 <tr>
  <td class="lc">Рубины</td>
  <td>43</td>
  <td>51</td>
  <td>79</td>
 </tr>
 <tr>
  <td class="lc">Изумруды</td>
  <td>28</td>
  <td>34</td>
  <td>48</td>
 </tr>
 <tr>
  <td class="lc">Сапфиры</td>
  <td>29</td>
  <td>57</td>
  <td>36</td>
 </tr>
</table>

</body>
</html>

В данном примере добавляется стилевой класс с именем lc, он добавляется к ячейкам левой колонки для изменения выравнивания содержимого и разработки жирного начертания контента.

Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис. 3). При этом создание подобной таблицы не представляет особой сложности.

Рис. 3. Таблица с градиентным заголовком

Рис. 3. Таблица с градиентным заголовком

При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис. 4.

Рис. 4. Заготовка для разработки фона

Рис. 4. Заготовка для разработки фона

Для добавления фона только к одной строке таблицы имеется несколько способов. Можно применить тегом <THEAD>, который предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Для этого тега добавляем стилевой параметр background, он одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость (пример 3).

Пример 3. Использование фонового рисунка

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/CSS (ЦСС)">
TABLE {
 width: 300px; /* Ширина таблицы */
 border: 2px solid #2e8b57; /* Рамка вокруг таблицы */
}

THEAD {
 background:
  #2e8b57 /* Цвет фона */
  url('images/bg.gif') /* Путь к фоновому изображению */
  repeat-x; /* Повторять фон только по горизонтали */
}

TD, TH {
 padding: 3px; /* Поля вокруг содержимого ячеек */
 text-align: center; /* Выравнивание по центру */
}

.lc {
 font-weight: bold; /* Жирное начертание контента */
 text-align: left; /* Выравнивание по левоой стороне */
}
</style>
</head>
<body>

<table cellspacing="0">
 <thead>
  <tr>
   <th>&nbsp;</th>
   <th>2004</th>
   <th>2009</th>
   <th>2009</th>
  </tr>
 </thead>
 <tr>
  <td class="lc">Рубины</td>
  <td>43</td>
  <td>51</td>
  <td>79</td>
 </tr>
 <tr>
  <td class="lc">Изумруды</td>
  <td>28</td>
  <td>34</td>
  <td>48</td>
 </tr>
 <tr>
  <td class="lc">Сапфиры</td>
  <td>29</td>
  <td>57</td>
  <td>36</td>
 </tr>
</table>

</body>
</html>

В данном примере тег <THEAD> охватывает только верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения рисунков в браузере.

Статья опубликована: 08.10.2009 Последнее обновление: 20.04.2009
Поиск по сайту
Оформление таблиц
Разделы
Теги по теме

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

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

TH
Тег TH предназначен для разработки одной ячейки таблицы, которая обозначается как заголовочная. контент в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

THEAD
Элемент THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

TR
Тег TR служит контейнером для разработки строки таблицы.

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

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-bottom
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

color
Определяет цвет контента элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

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