Оформление таблицы CSS3
827материалов
228тем на форуме
3004комментария
6158пользователей

Оформление таблицы CSS3


Красиво и просто оформленная таблица с категориями "Стандарт", "Профессионал" и "Профи" со свойствами CSS3. В данной таблице используется HTML и CSS.

В css:

Код
/*--- Оформление таблицы ---*/   
.features-table   
{   
   width: 100%;   
   margin: 0 auto;   
   border-collapse: separate;   
   border-spacing: 0;   
   text-shadow: 0 1px 0 #fff;   
   color: #2a2a2a;   
   background: #fafafa;   
   background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */   
   background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));   
}   

.features-table td   
{   
   height: 50px;   
   line-height: 50px;   
   padding: 0 20px;   
   border-bottom: 1px solid #cdcdcd;   
   box-shadow: 0 1px 0 white;   
   -moz-box-shadow: 0 1px 0 white;   
   -webkit-box-shadow: 0 1px 0 white;   
   white-space: nowrap;   
   text-align: center;   
}   

/*--- Body ---*/   
.features-table tbody td   
{   
   text-align: center;   
   font: normal 12px Verdana, Arial, Helvetica;   
   width: 150px;   
}   

.features-table tbody td:first-child   
{   
   width: auto;   
   text-align: left;   
}   

.features-table td:nth-child(2), .features-table td:nth-child(3)   
{   
   background: #efefef;   
   background: rgba(144,144,144,0.15);   
   border-right: 1px solid white;   
}   

.features-table td:nth-child(4)   
{   
   background: #e7f3d4;   
   background: rgba(184,243,85,0.3);   
}   

/*--- Header ---*/   
.features-table thead td   
{   
   font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;   
   -moz-border-radius-topright: 10px;   
   -moz-border-radius-topleft: 10px;   
   border-top-right-radius: 10px;   
   border-top-left-radius: 10px;   
   border-top: 1px solid #eaeaea;   
}   

.features-table thead td:first-child   
{   
   border-top: none;   
}   

/*--- Footer ---*/   
.features-table tfoot td   
{   
   font: bold 1.4em Georgia;   
   -moz-border-radius-bottomright: 10px;   
   -moz-border-radius-bottomleft: 10px;   
   border-bottom-right-radius: 10px;   
   border-bottom-left-radius: 10px;   
   border-bottom: 1px solid #dadada;   
}   

.features-table tfoot td:first-child   
{   
   border-bottom: none;   
}


HTML код:
Код
<table class="features-table">   
   <thead>   
   <tr>   
   <td></td>   
   <td>Стандарт</td>   
   <td>Профессионал</td>   
   <td>Премиум</td>   
   </tr>   
   </thead>   
   <tfoot>   
   <tr>   
   <td></td>   
   <td>$9</td>   
   <td>$19</td>   
   <td>$39</td>   
   </tr>   
   </tfoot>   
   <tbody>   
   <tr>   
   <td>Собственные домены</td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   </tr>   
   <tr>   
   <td>Расширенное управление</td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   </tr>   
   <tr>   
   <td>Неограниченная поддержка</td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/cancel.png" width="16" height="16" alt="нет"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   </tr>   
   <tr>   
   <td>Регистрация пользователей</td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/cancel.png" width="16" height="16" alt="нет"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/cancel.png" width="16" height="16" alt="нет"></td>   
   <td><img src="http://webmaster-ucoz.ru/.s/img/icon/apply.png" width="16" height="16" alt="есть"></td>   
   </tr>   
   </tbody>   
   </table>

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 26.06.2015 в 10:00
Материал просмотрен: 856 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта