|
HTML-код:
1111
2222 |
22222 |
Нижняя ячейка |
Нижняя ячейка |
Отображение в браузере:
1111
2222
|
22222
|
| Нижняя ячейка
|
Нижняя ячейка
|
|
Изменение размеров таблицы html страницы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в 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;
...
}
Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!
Здравствуйте, сегодня мы поговорим о таком важном атрибуте в CSS как создание рамки. Рамка очень часто используется для того чтобы обрамить текст, отделить один элемент дизайна от другого и для каждого вебмастера полезно знать как задать рамку в CSS. Задаем стиль оформления рамки в CSS. Первым что нужно задать вам при создании рамки на своем сайте это стиль рамки для CSS. Благодаря этому вы дадите понять браузеру какой линией выводить рамку. Давайте для примера для одного заголовка просто зададим сплошную линию, как на обычных рамках. Для этого нам конечно же нужен файл стилей который вы можете создать самостоятельно и как это сделать я рассказывал уже на других статьях своего блога. Я не буду создавать новый файл а буду использовать старый, кроме того здесь сохранились заголовки разного уровня для которых мы будем создавать рамки. Давайте зададим разные виды рамки для заголовка первого уровня и который задается тегом h1. Для этого в файл стилей прописываем такой текст: h1 {border-style:solid;} и коротко рассмотрим что мы написали. h1 это мы определили для какого элемента мы будем задавать рамку, border-style команда которая означает что для данного элемента нужно задать рамку определенного стиля ну а solid обозначает стиль отображения рамки, в данном случае это сплошная черта. Мы можем менять стиль отображения рамки и для этого нам просто нужно задавать новые параметры и сейчас я покажу какие имеются команды и как они отображаются на сайте.
Параметры рамки:
solid или сплошная линия. Dotted-пунктирная линия.
dashed-штрихованная линия.
double-двойная сплошная линия.
Это основные стили которые вы можете задать стиль рамки в CSS
, более подробно о всех командах вы можете узнать с спецификации по CSS. До этого мы задавали стиль полностью для всей рамки но мы можем задать также параметр конкретно для любой из сторон и таблицы стилей дает нам такую возможность. В этом нам помогут четыре команды: border-left-style (левая линия) border-top-style (верхняя линия) border-right-style (правая линия) и border-bottom-style (нижняя линия). Давайте теперь зададим для нашего заголовка стиль для каждой стороны свой. Напишем команду для всех четырех сторон: h1 {
border-left-style:groove;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dotted;} И на практике мы увидим вот такой результат. Для задания рамки нам нужно использовать атрибут стиля border-width для которого мы можем задать несколько параметров: первый это задать размер рамки в пикселах или задать толщину командами thin (тонкая линия), medium (средняя линия) или thick (толстая линия). Толщину линии мы также можем задать для любой стороны рамки независимо от того какой стиль задан для остальных. Давайте для начала изучим как задать толщину линии рамки непосредственно для всех сторон. Для этого нам просто нужно взять и задать команду border-width и определить для него размер линии. Для того чтобы задать толщину текст будет выглядеть так: h1 {
border-style:solid;
border-width:thin;
} Команду thin можно заменить на medium или thick или же задать толщину в пикселях обязательно указав единицу измерения, например размер в четыре пикселя-4px. Теперь мы будем задавать параметры толщины для каждой стороны нашей рамки. Также как и с заданием стиля нам помогут параметры border-left-width (толщина левой линии), border-top-width (толщина верхней линии), border-right-width (толщина правой линии) и border-bottom-width (толщина нижней линии). Для этого мы в файл стилей добавим четыре строчки следующего содержания: h1 {
border-style:solid;
border-left-width:medium;
border-top-width:thin;
border-right-width:thick;
border-bottom-width:7px;
} И теперь все четыре стороны нашей рамки будут иметь свою толщину. Как задать цвет рамки в CSS. Давайте теперь зададим цвет рамки в CSS и в этом нам поможет команды border-left-color, border-top-color, border-right-color и border-bottom-color для задания цвета для левой,верхней,правой и нижней линии рамки соответственно. Для этого мы прописываем команды и к каждой команде добавляем по параметру цвета. h1 {
border-style:solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
} И теперь посмотрим результат применения данного параметра. Задание глобальной переменной для сокращения записи. Теперь давайте разберем как нам можно избавиться от таких громоздких конструкций и записей. Для этого нам нужно будет задать глобальный атрибут border в который мы зададим такие параметры как толщина рамки,стиль рамки и цвет и все это поместиться не в три строчки как минимум а всего лишь в одну строчку. Для этого мы пишем строчку:
h1 {
border:5px solid #3399FF;
} в строчке сначала мы указываем толщину линии рамки потом пробел и указываем стиль оформления рамки и снова через пробел указываем цвет рамки. Вот и все мы сократили запись до одной строчки. Надеюсь что благодаря данной статье вы сможете задавать рамки для всех элементов в CSS. Я постарался остановить ваше внимание на самых необходимых командах и подробно вам рассказать о том как задать рамку в CSS, задать стиль рамки в CSS и задать цвет рамки в CSS.
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального
содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство border
, которое добавляется
к селектору TABLE
. Также эффектно смотрится таблица,
когда цвет рамки совпадает с цветом фона заголовка (тег | 
