Урок 4.6: Цвета в таблице

Для изменения внешнего вида таблицы существуют несколько атрибутов - background, bgcolor, bordercolor.

Первый атрибут - background. Этот атрибут необходим для указания фонового изображения таблицы. Параметром этого атрибута служит относительный или абсолютный путь до изображения.

Пример - использование атрибута background

<html>
  <head>
   <title>Цвета в таблице</title>
  </head>
  <body>
   <table border="1" background="fon.jpg">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
     <td>Ячейка 3</td>
    </tr>
    <tr>
     <td>Ячейка 4</td>
     <td>Ячейка 5</td>
     <td>Ячейка 6</td>
    </tr>
   </table>
  </body>
  </html>

Результат использования атрибута background

Фоновая картинка в таблице

Кроме изображения можно использовать любой цвет для фона. Для этого существует атрибут bgcolor. Значением этого атрибута выступает: латинское название цвета или шестнадцатеричное  указание цвета с решеткой перед значением (#ff000 - red - красный).

Пример использования атрибута bgcolor

<html>
  <head>
   <title>Цвета в таблице</title>
  </head>
  <body>
   <table border="1" bgcolor="red">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
     <td>Ячейка 3</td>
    </tr>
    <tr>
     <td>Ячейка 4</td>
     <td>Ячейка 5</td>
     <td>Ячейка 6</td>
    </tr>
   </table>
  </body>
  </html>

Результат использования атрибута bgcolor

Фоновый цвет в таблице

Важно: если вы указываете одновремено два атрибута, фоновый цвет и фоновое изображение - то отображаться будет изображение. Но это может пригодится если у пользователя, в настройках браузера выключен показ изображений.

Кроме фонового цвета можно указать цвет рамки таблицы. Для этого используется атрибут bordercolor. Он устанавливает цвет рамки таблицы.

Пример использования атрибута bordercolor

<html>
  <head>
   <title>Цвета в таблице</title>
  </head>
  <body>
   <table border="1"  bordercolor="red">
    <tr>
     <td>Ячейка 1</td>
     <td>Ячейка 2</td>
     <td>Ячейка 3</td>
    </tr>
    <tr>
     <td>Ячейка 4</td>
     <td>Ячейка 5</td>
     <td>Ячейка 6</td>
    </tr>
   </table>
  </body>
  </html>

Во всех вышеперечисленных примерах, атрибуты применялись для всей таблицы. Кроме этого, эти атрибуты, можно применить для отдельных ячеек таблицы.

Пример использования атрибутов для ячейки.

<html>
  <head>
   <title>Цвета в таблице</title>
  </head>
  <body>
   <table border="1">
    <tr>
     <td bgcolor="green">Ячейка 1</td>
     <td>Ячейка 2</td>
     <td>Ячейка 3</td>
    </tr>
    <tr>
     <td>Ячейка 4</td>
     <td>Ячейка 5</td>
     <td>Ячейка 6</td>
    </tr>
   </table>
  </body>
  </html>

Результат использования атрибутов для ячейки.

Фоновый цвет ячейки таблицы

<< Объединение ячеек | Перечень уроков | Создание ссылки  >>