Вредоносное ПО (malware) - это назойливые или опасные программы,...
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Текст |
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
|
Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.
- Указание цвета фона ячеек. Осуществляется с помощью свойства background-color .
- Указание цвета текста в ячейках. Осуществляется с помощью свойства color .
- Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color .
Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:
Border: 1px solid lightgray
И за цвет здесь отвечала последняя часть – lightrgay .
Существуют различные способы, позволяющие задать значение цветов в CSS . Мы же покажем вам, как происходит описание цвета с использованием атрибутов.
Как изменить цвет ячейки
Давайте посмотрим, как выглядит код в CSS , в котором задан цвет для ячейки.
Td { background-color: цвет-фона; }
Разумеется, изменять цвета можно и у table , и у td , и у th . Давайте попробуем придать нашей таблице умножения более солидный вид.
Добавим стили для ячеек-заголовков с тегом th , а также для ячеек по диагонали, в которых расположены квадраты чисел:
* | 2 | 3 |
---|---|---|
2 | 4 | 6 |
3 | 6 | 9 |
Результат в браузере:
Как изменить цвет рамки в таблице
Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:
- тип линии, в нашем случае solid (сплошная)
- толщина линии, в нашем случае 1px
- цвет линии, в нашем случае синий
Напомним ещё раз, как выглядит задание цвета рамки для ячейки:
Td { border: 1px solid blue; }
Как изменить цвет строки в таблице
Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td , то должны понимать, что применимы стили будут и к остальным тегам.
Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так:
RowGreen { background-color:green; }
А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:
1 | 2 | 3 | 4 | 5 |
---|---|---|---|---|
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
И результат в браузере:
Как изменить цвет текста в таблице
Для того, чтобы изменить цвет текста в таблице используется свойство color . Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:
Table { color: green; ... }
Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!
При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.
Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.
Пример:
HTML-код:
Графический фон таблицы html страницыПри помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта. Пример:
|