Оформление таблиц CSS
Красивые CSS таблицы
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> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </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> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
|
Результат: Пример CSS таблицы
Подобные CSS таблицы будут смотреться одинаково во всех браузерах.
Смотрите дополнительно: HTML таблицы
Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
CSS размер сайта CSS таблица и примеры кода Красивые CSS списки