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

www-html.ru

Обычная версия

Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого 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=utf-8">
<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=utf-8">
<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=utf-8">
<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. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения рисунков в браузере.



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

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