Оформление таблиц с помощью 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войства ячейки таблицы}