Как добавить скругленные уголки к таблице произвольной ширины?

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



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

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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(images/left-bottom.png) left bottom no-repeat; /* Левый нижний уголок */ } .topleft { background: #bb5327 url(images/left-top.png) left top no-repeat; /* Левый верхний уголок */ } .topright { background: #bb5327 url(images/right-top.png) right top no-repeat; /* Правый верхний уголок */ } .bottomright { background: url(images/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. Таблица со скругленными уголками

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