Таблица с рамкой - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Оформление таблиц » Таблица с рамкой
Таблица с рамкой
EvgenyДата: Пятница, 26.02.2010, 07:36 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.

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


[small]Рис. 1. Таблица с рамкой[/small]

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

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

Code
<!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> </th>
   <th>2004</th>
   <th>2005</th>
   <th>2006</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 показана таблица, у которой содержимое ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается по левому краю.


[small]Рис. 2. Таблица с рамкой[/small]

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

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

Code
<!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> </th>
   <th>2004</th>
   <th>2005</th>
   <th>2006</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). При этом создание подобной таблицы не представляет особой сложности.


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

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


[small]Рис. 4. Заготовка для создания фона[/small]

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

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

Code
<!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> </th>
    <th>2004</th>
    <th>2005</th>
    <th>2006</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. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения изображений в браузере.

 
Форум » Статьи о CSS » Оформление таблиц » Таблица с рамкой
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]