Урок 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>