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

Красивые CSS таблицы

Урок 18. CSS таблицы, оформление границы

CSS атрибуты и значения, определяющие свойства таблиц

CSS таблица и пример оформления ее границы:

<title>CSS рамка таблицы</title>
<style type="text/css">
table.t_example {
background-color: #cccccc;
width: 400px
}
.t_example tr {
background-color: #ffffff;
height: 100px
}
</style>
</head>
<body>
<table border="0" cellspacing="1" align="center" class="t_example">
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
</table>

Результат: Пример CSS таблицы

Отметьте, что рамка таблицы определена не значением атрибута border, а значением атрибута background-color: и значением атрибута cellspacing="", при этом ее толщина равна значению атрибута cellspacing="", которое
указано в пикселях.

Пустые ячейки содержат символ пробела, так надо.

CSS таблица и примеры свойств ее рамки

Очередной пример по оформлению таблиц:

<title>Таблица CSS и ее граница</title>
<style type="text/css">
table.t_example {
background-color: #999999;
width: 600px
}
.t_example tr {
background-color: #ffeeee;
height: 150px
}
</style>
</head>
<body>
<table border="0" cellspacing="3" align="center" class="t_example">
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td><td> &nbsp; </td>
</tr>
</table>

Результат: Пример CSS таблицы

Подобные CSS таблицы будут смотреться одинаково во всех браузерах.

Смотрите дополнительно: HTML таблицы

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 17. CSS размеры   CSS таблица, примеры кода   Урок 19. CSS списки

    Сохранить в сервисы и закладки