E-mail Добавить в "Избранное" Сделать "ТвойWeb" стартовой
Здесь находится флеш баннер. Чтобы увидеть его Вы должны установить Flashplayer
 
Новости сайта
02 [F]апреля, 2006
08 [F]декабря, 2005
17 [F]октября, 2005
16 [F]июля, 2005
25 [F]декабря, 2004
======================
Предыдущие новости
<< < 01 02 03 04 05 > >>
 
 
 

Как сделать рамку таблицы тонкой и аккуратной.

Из этого урока Вы узнаете как сделать рамку таблицы тонкой и аккуратной. По умолчанию объемная рамка таблицы выглядет довольно уродливо.

Итак начнем. Для начала посмотрите на нижние таблицы и сравните их.

       
       
       

В этой таблице объемная рамка выводимая по умолчанию. Толщина рамки указана в 1пиксель.

       
       
       

В этой таблице рамка уже не выглядит объемной. Для рамки таблицы, в теге <Body> , определен черный цвет. А также определены два дополнительных атрибута. Это атрибут cellspacing, значение которого равно "0" (если не указать это значение то по умолчанию этот атрибут будет иметь значение "2", а это в данном случае, нам не надо) и атрибут cellpadding, значение которого равно "1". А теперь взгляните на нижнюю таблицу.

       
       
       

Видите какая тонкая и аккуратная получилась рамка в этой таблице. В этой таблице указаны следующие атрибуты;

border="0"
Толщина рамки таблицы равна "0"
cellspacing="1"
Расстояние между границами соседних ячеек равно "1"
bgcolor="#000000"
Этим атрибутом мы определили черный цвет фона таблицы

Я также определил цвет фона для каждой строки таблицы (элемент таблицы <Tr>). И сделал его таким же как и цвет фона страницы на которой находится эта таблица.
Посмотрите исходный код этой таблицы;
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
  <tr bgcolor="#F5E8FF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#F5E8FF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#F5E8FF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Надеюсь, что понятно.
Ну теперь Вы знаете как сделать таблицу с тонкой рамкой. А сейчас я расскажу как сделать таблицу только с внешней тонкой рамкой, то есть без рамок ячеек. Сначала пишем код для таблицы из одной строки с одной единственной ячейкой. Определим для этой таблицы цвет фона таким цветом, каким Вы хотели бы видеть свою рамку. Определим расстояние между границами соседних ячеек равным "0" (cellspacing="0") и расстояние между рамкой ячейки и ее содержанием равным "1" (cellpadding="1"). Вот что получилочь;
<table cellspacing="0" cellpadding="1" bgcolor="#000000">
  <tr>
  <td>&nbsp;</td>
</tr>
</table>

Теперьв эту ячейку вставляем любую таблицу, с одним условием в теге <Body> запишем следующие атрибуты с их значениями;

cellpadding="0"
Расстояние между рамкой ячейки и ее содержимым равно "0"
cellspacing="0"
Расстояние между границами соседних ячеек равно "0"
bgcolor="#000000"
Цвет фона таблицы, как правило такой же как и цвет фона самой страницы.

Вот, что получилось после того как вставили таблицу в ячейку первой таблицы;
<table cellspacing="0" cellpadding="1" bgcolor="#000000">
   <tr>
     <td>
         <table cellspacing="0" bgcolor="#99FF00" cellpadding="0">
            <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>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
         </table>
     </td>
   </tr>
</table>

А вот и сама таблица;

       
       
       

Ну как? Все понятно?
Думаю, что на этом этот урок можно считать оконченным.

К оглавлению Наверх Дальше