Оформление таблиц с помощью CSS
Добрый день, дорогие посетители блога! Сегодня речь пойдет о таблицах. А точнее о том, как применять различные стили с помощью CSS. Таким способом, можно создать несколько стилевых видов таблиц и использовать каждую таблицу там, где она нужна на любых страницах сайта.

Прежде всего, для того, чтобы применять стили к таблице, ей надо задать индетификатор ID. Пример:

<table id="идентификатор">
...
</table>

Далее в CSS необходимо задать свойства таблицы:

#идентификатор {// свойства таблицы
...
width:500px; // ширина
height:300px; // высота
background: #f8f8f8; // цвет заливки таблицы
}

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

1 способ заключается применение одного стилевого оформления ко всем внутренним строкам и ячейкам. Пример:

<table id="идентификатор">
<th>Заголовок</td>
<tr> <!-- Строка -->
 <td>Ячейка</td>
</tr>
</table>

#идентификатор {
... // свойства таблицы
}
#идентификатор th {
// cвойства заголовка таблицы
}
#идентификатор tr {
// cвойства строки таблицы
}
#идентификатор td {
// cвойства ячейки таблицы
}

2 способ состоит в том, что бы применить отдельный класс или идентификатор к тегам внутри таблицы <th>, <tr>, <td>.

<table id="идентификатор">
<th class="заголовок" или id="заголовок">Заголовок</td>
<tr class="строка" или id="строка"> <!-- Строка -->
 <td class="ячейка" или id="ячейка">Ячейка</td>
</tr>
</table>

#идентификатор {
... // свойства таблицы
}
#заголовок {// cвойства заголовка таблицы}
#строка {// cвойства строки таблицы}
#ячейка {// cвойства ячейки таблицы}
// или
.заголовок {// cвойства заголовка таблицы}
.строка {// cвойства строки таблицы}
.ячейка {// cвойства ячейки таблицы}