Разделы

Таблица фиксированной ширины со скругленными уголками

Метки:

уголки

Скругленные уголки нынче в моде и способны украсить любую веб-страницу, поэтому закругления добавляют к любым элементам веб-страницы, включая таблицы. В CSS нет стандартного штатного средства по созданию уголков, так что нам придется обратиться к изображениям.

Фиксированная ширина таблицы предполагает, что независимо от разрешения монитора, таблица меняться не будет. Значит, все рисунки делаем указанной ширины, подготовив их предварительно в графическом редакторе. Причем, уголки можно создать двумя способами. В первом случае, уголки формируются заливкой цветом, совпадающим с цветом фона веб-страницы (рис. 1), а их внутренность прозрачная (на рисунке она обозначена шахматным полем). Добавление прозрачности позволяет изменять цвет таблицы или ее заголовка через стили. Во втором случае цвет заливки указан явно и он должен совпадать с цветом самой таблицы (рис. 2).

Рис. 1. Уголок с прозрачностью

Рис. 2. Уголок с заданным цветом заливки

Применение прозрачности (рис. 1) накладывает некоторые условия. Поскольку цвет таблицы может меняться в широких пределах, от светлого до темного оттенка, то возможно появление паразитного оттенка на границе уголка (так называемый антиальясинг). Чтобы этого не случилось, сглаживание отключают (это хорошо заметно на рис. 1) или используют изображение в формате PNG-24, который поддерживает частичную прозрачность. Устаревший браузер Internet Explorer 6 с PNG в полной мере работает только после некоторых танцев с бубном.

Аналогично делается рисунок с нижними уголками и добавляется к таблице через атрибут background. В значениях кроме пути к файлу следует указать 0 100% (или left bottom), оно определяет положение картинки внизу таблицы и no-repeat, чтобы картинка не повторялась.

С верхними уголками все обстоит хитрее. Добавление фонового рисунка к селектору TR или THEAD, заставляет браузер Internet Explorer и Safari повторять фон в каждой ячейке. В другой раз этот эффект показался бы интересным, но сейчас разброд в поведении разных браузеров расстраивает. Ничего другого не остается, как установить фон в ячейках, создав новый класс для левого (класс leftround) и правого уголка (rightround), как показано в примере 1.

Пример 1. Таблица с уголками

<!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; /* Ширина таблицы */
    background: #f0f0f0 url(bottombg.png) 0 100% no-repeat; /* Нижние уголки */
   }
   TH {
    color: white; /* Цвет текста */
    background: #758c8e; /* Цвет фона */
    text-align: left; /* Выравнивание по левому краю */ 
   }
   TD, TH {
    padding: 3px 5px; /* Поля вокруг  текста */ 
   }
   .leftround {
    background: #758c8e url(topbg.png) no-repeat; /* Левый верхний уголок */
   }
   .rightround {
    background: #758c8e url(topbg.png) 100% 0 no-repeat; /* Правый верхний уголок */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th class="leftround">&nbsp;</th>
    <th>2314</th>
    <th>2315</th>
    <th class="rightround">2316</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>

Результат данного примера показан на рис. 3.

Рис. 3

Рис. 3. Таблица со скругленными уголками

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

Рис. 4. Фоновое изображение для создания уголков

Сам код HTML останется без изменений, поменяется только стиль (пример 2), в котором основную роль теперь играет атрибут background-position, сдвигающий фоновый рисунок относительно исходного положения.

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

<style type="text/css">
 TABLE, .leftround, .rightround {
  background: url(bg.png) no-repeat; /* Параметры фона */
 }
 TABLE {
  width: 300px; /* Ширина таблицы */
  background-color: #f0f0f0; /* Цвет фона */
  background-position: 0 100%; /* Нижние уголки */
 }
 TH {
  color: white; /* Цвет текста заголовка */
  background: #758c8e; /* Цвет фона заголовка */
  text-align: left; /* Выравнивание по левому краю */ 
 }
 TD, TH {
  padding: 3px 5px; /* Поля вокруг текста */ 
 }
 .leftround {
  background-color: #758c8e; /* Цвет фона ячейки */
  background-position: -300px 0; /* Левый верхний уголок */
 }
 .rightround {
  background-color: #758c8e; /* Цвет фона ячейки */
  background-position: 100% 0; /* Правый верхний уголок */
 }
</style>

Добавление линий внутри ячеек может привести к тому, что закругления окажутся внутри рамки.

Гость, 22.11.2008

Влад, хосспади, может хватить описывать вчерашний день? расскажите лучше про плагины для jQuery делающие уголки круглыми (сам проводил небольшое исследование на заданную тему); расскажите про CSS3, есть ли там свойство, чтобы скруглять уголки? наконец, что за свойство "-moz-border-radius" применяемое для ff? Ну а раз ресурс посвящен web-графике неплохим дополнением к статье стал бы маленький пошаговый урок, как эти самые уголки грамотно нарисовать в фотошопе (применение прозрачности, сглаживание и все такое...)

Admin, 22.11.2008

Спокойно, со временем все будет!

Павел, 04.04.2010

В css3 есть свойство border-radius, с помощью которого можно делать круглые уголки, только пока не все браузеры понимают это свойство.

Разделы

Термины

Таблица фиксированной ширины со скругленными уголками

Отправить комментарий