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 | Обновление: Ноябрь 2018

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