Таблица – это очень удобный способ предоставить данные, и не просто предоставить а красиво оформить. С помощью таблиц можно создавать очень оригинальное меню и прочие элементы (об этом будет говориться в уроках CSS)
Из этого урока вы узнаете, как создать простую таблицу и управлять её свойствами (цвет, ширина, высота, толщина и цвет рамки, параметры ячеек ).
Для начала создадим простую таблицу, состоящую из четырёх ячеек, в которых будут написаны короткие фразы.
Перед этим нужно понять следующее:
• Теги – объявляют таблицу.
• border=" " – устанавливает толщину рамки таблицы.
• Теги – определяют табличный ряд (по вертикали).
• Теги – определяют ячейку (по горизонтали).
Первая ячейка (1,1) | Вторая ячейка (1,2) |
Третья ячейка (2,1) | Четвёртая ячейка (2,2) |
После этого зададим таблице цвет и толщину рамки, какой-нибудь фон и цвет текста. Это делается с помощью CSS атрибутов в первом теге таблицы "
Первая ячейка (1,1) | Вторая ячейка (1,2) |
Третья ячейка (2,1) | Четвёртая ячейка (2,2) |
Параметр "color: " задаёт цвет текста, который будет написан внутри ячеек этой таблицы.
Отступы между ячейками и рамкой таблицы html |
Существую два атрибута:
• cellspacing=" " – определяет расстояние между ячейками таблиц и рамкой самой таблицы.
• cellpadding=" " – определяет расстояние между границей ячейки и ее содержимым.
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.
- Указание цвета фона ячеек. Осуществляется с помощью свойства background-color.
- Указание цвета текста в ячейках. Осуществляется с помощью свойства color.
- Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color.
Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:
И за цвет здесь отвечала последняя часть – lightrgay.
Существуют различные способы, позволяющие задать значение цветов в CSS. Мы же покажем вам, как происходит описание цвета с использованием атрибутов.
Как изменить цвет ячейки
Давайте посмотрим, как выглядит код в CSS, в котором задан цвет для ячейки.
Разумеется, изменять цвета можно и у table, и у td, и у th. Давайте попробуем придать нашей таблице умножения более солидный вид.
Добавим стили для ячеек-заголовков с тегом th, а также для ячеек по диагонали, в которых расположены квадраты чисел:
Результат в браузере:
Как изменить цвет рамки в таблице
Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:
- тип линии, в нашем случае solid (сплошная)
- толщина линии, в нашем случае 1px
- цвет линии, в нашем случае синий
Напомним ещё раз, как выглядит задание цвета рамки для ячейки:
Как изменить цвет строки в таблице
Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td, то должны понимать, что применимы стили будут и к остальным тегам.
Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так:
А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:
И результат в браузере:
Как изменить цвет текста в таблице
Для того, чтобы изменить цвет текста в таблице используется свойство color. Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:
Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!