Цвет и фон в таблице
Создайте таблицу, показанную на рис. 1, задав цвета через стили. Ширина таблицы составляет 100%.
Цвета в таблице body < font-size: 1.5em; /* Размер текста */ >table < width: 100%; /* Ширина таблицы */ >td < padding: 5px; >td.col1 < background: red; color: white; >td.col2 < background: orange; color: gray; >td.col3
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
67. Работаем с цветами в HTML таблице
Меняем цвет текста, фон и цвет рамок в таблице, строке, ячейке
Именно свойство color служит для изменения цвета текста и не обязательно в таблице, а где угодно на веб странице. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:
Пример 1, CSS
table color: #FF0000;
>Пример 2, CSS
tr color: green;
>Пример 3, CSS
td color: rgb(0, 0, 200);
>Свойство background-color или просто background служит для изменения фона блока, таблицы, ячейки и прочего. Цвет можно задать по названию, шестнадцатеричным числом, RGB, RGBA, HSL и HSLA. Далее пример:
Пример 4, CSS
td background: rgb(0, 0, 255);
color: #FFFFFF;
padding: 10px;
>Свойство мы уже немного научились пользоваться универсальным свойством border (позже мы его еще вспомним), но здесь мы использовать будем узкоспециализированное свойство border-color , которое меняет только цвет рамок, в отличие от border (сразу три значения можно установить: толщина, стиль и цвет). Далее пример:
Пример 5, CSS
table width: 100%; /* Ширина 100% */
text-align: center; /* Выравнивание по центру */
/* border: 2px solid #000000 */ /* Равно трем строкам ниже */
border-width: 2px; /* Толщина рамки */
border-style: solid; /* Стиль рамки */
border-color: #000000; /* Цвет рамки */
>
td background: rgb(105, 0, 105); /* Фон фиолетовый */
color: #FFFFFF; /* Цвет текста белый */
padding: 10px; /* Поля 10px */
>Синтаксис использования таблиц
Для создания таблицы достаточно указать в начале и конце строки «||». Между этим двумя маркерами можно создавать произвольное количество ячеек, разделяя их «||». Например, ниже показана разметка для таблицы из 4 ячеек:
|| верхняя левая ячейка || верхняя правая ячейка || || нижняя левая ячейка || нижняя правая ячейка ||
Выглядить она будет следующим образом:
Атрибуты таблицы
Помимо повторения маркеров ячеек для получения объединённых ячеек, возможно указать ряд других атрибутов HTML-таблицы. Любые атрибуты могут располагаться между угловыми скобками непосредственно после маркера ячейки. Например: || содержимое ячейки ||
- — поместить информацию о стиле ячейки (td)
- — поместить информацию о стиле ряда (tr)
- — поместить информацию о стиле таблицы (table)
Тем не менее, всё ещё поддерживается старый синтаксис задания различных атрибутов таблицы.
- : ширина ячейки (будет добавлено width: 50%; к стилю)
- : то же самое
- : ширину таблицы на 100% (сработает только в первом ряду таблицы)
- — объединение ячеек в одной строке
- — объединение ячеек в одном столбце
- — выравнивание по левому краю (text-align: left;)
- — выравнивание по центру (text-align: center;)
- — выравнивание по правому краю (text-align: right;)
- — расположить текст в верхней части ячейки (vertical-align: top;)
- — расположить текст в нижней части ячейки (vertical-align: bottom;)
- — цвет фона (background-color: #XXXXXX;)
- — то же самое
- — цвет фона ряда (сработает только в первой ячейке строки)
- — цвет фона таблицы
При использовании нескольких конфликтующих опций вида будет применена последняя. Нет отдельного параметра для вертикального центрирования текста в ячейке (vertical-align: middle;), так как оно используется по умолчанию.
Использование классов и идентификаторов CSS в таблицах
- — задать класс CSS для ячейки (td)
- — задать класс CSS для строки (td)
- — задать класс CSS для таблицы (td)
- — задать CSS id для ячейки (td)
Пример
Общий макет таблицы и HTML-подобные параметры
||||||'''Заголовок'''|| ||ячейка 1||ячейка 2||ячейка 3|| || объединение 2 рядов|||| объединение 2 колонок|| ||ячейка 2||ячейка 3||
||||||'''Заголовок'''|| ||ячейка 1||ячейка 2||ячейка 3|| || объединение рядов|||| объединение на 2 колонки|| ||ячейка 2||ячейка 3||
Изменить цвет фона таблицы HTML
Метод изменения цветов фона частей таблицы на веб-сайте с годами менялся, становясь более простым и менее трудоемким с введением таблиц стилей.
Более старый метод использовал атрибут bgcolor для изменения цвета фона таблицы. Это также может быть использовано для изменения цвета строки таблицы или ячейки таблицы. Но атрибут bgcolor устарел в пользу таблиц стилей, поэтому он не является оптимальным способом управления цветом фона таблицы.
Лучший способ изменить цвет фона — добавить свойство background-color в таблицу, строку или тег ячейки.
Этот пример изменяет цвет фона всей таблицы:
Вы также можете применить цвета фона к заголовкам таблицы или тегу таким же образом:
Изменить цвет фона с помощью таблиц стилей
Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей. Например, вы можете установить стили в таблице стилей в заголовке вашего HTML-документа или установить их во внешней таблице стилей . Подобные изменения в HEAD или во внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:
table >
tr >
td >
Настройка цвета фона столбца
Лучший способ установить цвет фона для столбца — создать класс стиля, а затем назначить этот класс ячейкам в этом столбце. Создание класса позволяет назначить этот класс ячейкам в определенном столбце, используя один атрибут.
CSS :
td.ColColor >
HTML :
ячейка 1 ячейка 2
ячейка 1 cell 2
Одним из значительных преимуществ управления фоновыми цветами с помощью таблицы стилей является то, что вы можете изменить свой цветовой выбор позже. Вместо того, чтобы просматривать документ HTML и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, который будет немедленно применен к каждому экземпляру, где появляется синтаксис class = «ColColor» .
Несмотря на то, что встраивание CSS в ваш HTML или вызов отдельного файла CSS добавляет немного административных издержек, помимо просто изменения атрибута HTML, вы обнаружите, что использование CSS уменьшает ошибки, ускоряет разработку и улучшает переносимость вашего документа.