В данном уроке мы будем создавать красивую таблицу. При наведении на строку, она будет подсвечиваться другим цветом.

тут можно посмотреть Демо таблицы.

красивая таблица CSS

Все что нам нужно это скопировать код ниже и вставить его в свой файл стилей CSS:

#table_catalog_items{width: 100%;border: 1px solid #888;font-size: 15px;}
#table_catalog_items td{border: 1px dotted #666;padding: 10px;vertical-align: middle;text-align: center;}
#table_catalog_items th{background: #cc0000;border: 1px solid #fff;border-top: 1px solid #666;padding: 5px 1px;vertical-align: middle;text-align: center;font-weight: 400;color: #fff;font-size: 13px; font-weight: 700;}
#table_catalog_items th:first-child{border-left: 1px solid #666;}
#table_catalog_items th:last-child{border-right: 1px solid #666;}
#table_catalog_items tr:nth-child(2n+1){background: #f3f3f3;}
#table_catalog_items tr:hover td{background: #ffddee;}
#table_catalog_items th.NUM{width: 20px;text-align: center;}
#table_catalog_items th.NAME{width: 100px;}
#table_catalog_items th.MODEL{width: 100px;}
#table_catalog_items th.ARTICUL{width: 20px;}
#table_catalog_items th.ORIG_NOMER{width: 20px;}
#table_catalog_items th.PROIZVODITEL{width: 70px;}
#table_catalog_items th.STRANA{width: 20px;}
#table_catalog_items th.NALICHIE{width: 20px;}
#table_catalog_items th.TSENA{width: 20px;}
#table_catalog_items th.ORDER_LINK{width: 20px;}
#table_catalog_items .btn-order {background: #cc0000 none repeat scroll 0 0; color: #ffffff; display: inline-block; font-size: 14px; line-height: 16px; margin: 5px auto; padding: 3px 10px; text-align: center; text-decoration: none; width: 60px;}
#table_catalog_items .btn-order:hover {background: #dd0000 none repeat scroll 0 0; color: #ffffff;}
#table_catalog_items .data1, .data2 {font-weight: 700;}
#table_catalog_items .data8 {width: 60px;}
#table_catalog_items .data7 {font-weight: 700;color: #268347;}

Начало таблицы будет выглядеть так:

<table id="table_catalog_items">
<tbody>

 Верхняя строка (красного цвета):


<tr>
<th class="NUM">П/н</th>
<th class="NAME">Агрегат</th>
<th class="MODEL">А/м: марка, модель</th>
<th class="ARTICUL">Артикул</th>
<th class="ORIG_NOMER">Ориг. номер</th>
<th class="PROIZVODITEL">Произ-тель</th>
<th class="STRANA">Страна</th>
<th class="NALICHIE">Наличие</th>
<th class="NALICHIE">Размер</th>
<th class="TSENA">Цена<br>(тыс. руб.)</th>
</tr>

остальные строки будут формата:

<tr>
<td>1</td>
<td>соты радиатора</td>
<td>Scania 2 сер/ 3 сер.</td>

<td>32511</td>
<td>1321888</td>
<td>Nissens</td>
<td>Дания</td>
<td>есть в наличии</td>
<td>715x1030<br>x52(95)</td>
<td>уточняйте</td>

</tr>

в конце закрывающийся тег таблицы </tbody></table>