CSS: Урок 16. Таблицы в CSS

Четверг, 23 Декабря 2010 г. 17:27 + в цитатник

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

Рассмотрим пример формирования таблицы:

                                  <head>

            <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>

            </body>

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

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

Давайте увеличим ширину границы таблицы:

                                  <head>

            <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>

            </body>