Разделы

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

Метки:

уголки

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

Для этой цели нам понадобится четыре изображения, которые мы расположим по углам таблицы. В нашей таблице заголовок и тело будет разных цветов, это надо учитывать при создании картинок (рис. 1). На рисунке показаны два верхних и два нижних уголка.

Рис. 1. Уголки для таблицы

Браузеры Internet Explorer и Safari имеют неприятную особенность, связанную с фоновым рисунком. Картинка, добавленная фоном к селектору TR или TBODY, повторяется в каждой ячейке, что портит всю идею на корню. По этой причине добавлять фон следует к селектору TABLE или к нужным ячейкам. В примере 1 показано, что левый нижний уголок таблицы применяется к селектору TABLE, а для остальных уголков вводится специальный класс, добавляемый к тегу <TD> или <TH>.

Пример 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: 100%; /* Ширина таблицы */ 
    background: #d0d0d0 url(left-bottom.png) left bottom no-repeat; /* Левый нижний уголок */
   }
   .topleft {
    background: #bb5327 url(left-top.png) left top no-repeat; /* Левый верхний уголок */
   }
   .topright {
    background: #bb5327 url(right-top.png) right top no-repeat; /* Правый верхний уголок */
   }
   .bottomright {
    background: url(right-bottom.png) right bottom no-repeat; /* Правый нижний уголок */
   } 
   TH {
    background: #bb5327; /* Цвет фона */
    color: white; /* Цвет текста */ 
    text-align: left; /* Выравнивание по левому краю */ 
   }
   TD, TH {
    padding: 3px 5px; /* Поля вокруг текста */ 
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th class="topleft">&nbsp;</th>
    <th>2014</th>
    <th>2015</th>
    <th class="topright">2016</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 class="bottomright">36</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 2

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

Из-за того, что уголки добавляются непосредственно к ячейкам, использование параметр cellspacing тега <TABLE> разрушит весь результат. Поэтому в примере значение этого параметра присвоено нулю. Также следует с осторожностью использовать границы вокруг ячеек, чтобы не получилось так, что закругление окажется внутри линии.

bravada j, 14.01.2009

Влад, я конечно новичок в этом деле, но мне кажется, что в "Пример 1. Таблица с уголками", пропущен class="bottomleft". Или это специально сделано :)))?

bravada j, 15.01.2009

простите ради Бога,невнимательно читал....

Helen, 02.10.2009

А как быть в случае одной строки в таблице или одного столбца, можно ли обойтись без вложенных внутрь ячейки блоков? )

Артур, 19.02.2010

А когда нужны бордеры ?

Разделы

Термины

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

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