Опубликован: 19.03.2007 | Доступ: свободный | Студентов: 4632 / 1149 | Оценка: 4.23 / 3.94 | Длительность: 23:37:00
Лекция 8:

Использование таблиц

Цвет таблицы и фон

У таблиц можно задавать цвет внешней границы и цвет границ ячеек таблицы. Они могут также использовать цветной фон или применять в качестве фона узоры и графические изображения для всей таблицы или для выбранных строк и ячеек.

Цвет границ таблицы

Представление цвета границы зависит от стиля границы. Ниже показаны примеры различных стилей границы, выведенные красным цветом.

<style type="text/css">
  table {border:style 5px red}
  td    {border:inset 1px}
</style>
Листинг 8.17. Общая таблица стилей для задания цвета границы таблицы
Варианты стиля и цвета границы таблицы

увеличить изображение
Рис. 8.13. Варианты стиля и цвета границы таблицы

Можно создавать свои собственные 3-D эффекты затенения, оформлять каждую из сторон различным образом, используя цвета для border-top, border-right, border-bottom, и border-left. Следующие таблицы создают свои собственные 3-D эффекты с помощью сплошных границ ( solid ), подкрашенных, чтобы напоминать стили inset и outset. Примененные для этих двух таблиц стили показаны на листинге 8.18.

Граница таблицы с 3-D эффектами, использующими цвета границы

Рис. 8.14. Граница таблицы с 3-D эффектами, использующими цвета границы
<style type="text/css">
  <!-- Inset Style -->
  table    {border:solid 7px;
            border-top-color:#FEB9B9;
            border-right-color:#B22222;
            border-bottom-color:#B22222;
            border-left-color:#FEB9B9}
  table td {border:inset 1px}
</style>

<style type="text/css">
  <!-- Outset Style -->
  table    {border:solid 7px;
            border-top-color:#B22222;
            border-right-color:#FEB9B9;
            border-bottom-color:#FEB9B9;
            border-left-color:#B22222}
  table td {border:inset 1px}
</style>
Листинг 8.18. Код таблицы стилей для таблиц с индивидуальными цветами границы

Цвет границ ячеек

Границы вокруг ячеек таблицы оформляются и окрашиваются независимо от внешней границы. В следующих примерах внешняя граница имеет толщину 1 пиксель, а границы ячеек имеют красный цвет и толщину 3 пикселя.

<style type="text/css">
  table {border:solid 1px}
  td    {border:style 3px rgb(255,0,0)}
</style>
Листинг 8.19. Общая таблица стилей для цветов границ ячеек таблицы
Варианты стилей границ таблицы и цвета

увеличить изображение
Рис. 8.15. Варианты стилей границ таблицы и цвета

Как и в случае границы таблицы, границы ячеек можно оформлять и окрашивать независимо. На рисунке 8.16 все ячейки в двух таблицах оформлены сплошными ( solid ) границами толщиной 5 пикселей. Для их сторон используются различные оттенки красного цвета для создания 3-D эффектов, подобных границам inset и outset. Две примененные таблицы стилей показаны на листинге 8.20.

Таблицы с индивидуальными цветами границ ячеек

Рис. 8.16. Таблицы с индивидуальными цветами границ ячеек
<style type="text/css">
  <!-- Inset Style -->
  table    {border:solid 1px}
  table td {border:solid 5px;
            border-top-color:#FEB9B9;
            border-right-color:#B22222;
            border-bottom-color:#B22222;
            border-left-color:#FEB9B9}
</style>

<style type="text/css">
  <!-- Outset Style -->
  table    {border:solid 1px}
  table td {border:solid 5px;
            border-top-color:#B22222;
            border-right-color:#FEB9B9;
            border-bottom-color:#FEB9B9;
            border-left-color:#B22222}
</style>
Листинг 8.20. Код таблицы стилей для таблиц с индивидуальными цветами границ ячеек

Цвет фона таблицы

Цвет фона таблицы можно определить как в целом, так и выборочно, используя цвет фона для строк или ячеек. В следующей таблице светло-серый цвет фона применяется ко всей таблице, задавая свойство background-color тега <table>.

Таблица с заданным цветом фона

Рис. 8.17. Таблица с заданным цветом фона
<style type="text/css">
  table    {border:ridge 5px; background-color:#F6F6F6}
  table td {border:inset 1px}
</style>
Листинг 8.21. Код для таблицы с заданным цветом фона
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!