Как добавить цвет в две колонки таблицы с помощю CSS? - HTML и CSS

shavedcat · 26.05.2012, 20:37

Пытаюсь добавить цвет в две колонки таблицы (должен использоваться CSS). Ничего не выходит. Браузеры: IE, Firefox, Safari. Помогите пожалуйста. Спасибо!

HTML:
<td class="colour">

CSS:
.colour
{
background: #CC9999;

}

или

.colour
{

background-color: #CC9999;

}

rlib · 27.05.2012, 08:37

Код:

<html>
<head>
<style>
.colour {
	background-color: red;
}
</style>
</head>
<body>
	<table border=1>
		<tr>
			<td class="colour">Hello</td>
			<td>World!</td>
		</tr>
	</table>
</body>
</html>

shavedcat · 02.06.2012, 07:13

Простите, а в чем разница с тем что я написал в вопросе?

kettanaito · 02.06.2012, 13:13

Вам нужно чтобы колонки были разного цвета?
Если так, то можно оперировать с классами/ID/порядковым номером колонок:

Код:

/* По классу/ID */
.column-red {background:red;}
.column-blue {background:blue;}
#column-red {background:red;}
#column-blue {background:blue;}

/* По порядку: первая дочерняя td будет иметь красный фон, последняя - синий. Все промежуточные колонки будут иметь цвет по-умолчанию  */
.table td:first-child {background:red;}
.table td:last-child {background:blue;}

/* По определенному номеру колонки: n-ая по счету колонка будет окрашена в красный цвет */
.table td:nth-child(n) {background:red;}

Если задачей является окрасить все колонки какой-то таблицы без исключения то можно так:

Код:

#table td {background:red;}

При этом сам указатель на таблицу может быть разным, в данном случае ID:

Код:

<table id="table" height="justify" width="100%">
<tr><td>Some text</td></tr>
</table>

Почему бы не использовать класс для колонки? Это возможно, но в данном варианте не будет практичным - например, в выше описанном случае все колонки определенной таблицы будут иметь красный фон и нам не придется указывать отдельный класс для каждой колонки (достаточно указать класс/ID нашей таблицы). Случай если в таблице возможны разные варианты фона колонок описан вначале.

rlib · 03.06.2012, 03:17

Цитата:

Сообщение от shavedcat

Простите, а в чем разница с тем что я написал в вопросе?

Я не знаю в чем разница, так как вы не привели полный css/html-код, но, если Вы сделаете копи-пейст моего кода в текстовый файл, например, тест.html и откроете его в любом из браузеров, то получите требуемый результат.

shavedcat · 11.06.2012, 18:59

Спасибо большое! Ошибка была в стиле, но в другом месте. Все работает! Спасибо!!!

26.05.2012, 20:37	#1
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Как добавить цвет в две колонки таблицы с помощю CSS? Пытаюсь добавить цвет в две колонки таблицы (должен использоваться CSS). Ничего не выходит. Браузеры: IE, Firefox, Safari. Помогите пожалуйста. Спасибо! HTML: <td class="colour"> CSS: .colour { background: #CC9999; } или .colour { background-color: #CC9999; } Последний раз редактировалось shavedcat; 26.05.2012 в 20:47.

27.05.2012, 08:37	#2
rlib Форумчанин Регистрация: 22.05.2012 Сообщений: 352	Код: `<html> <head> <style> .colour { background-color: red; } </style> </head> <body> <table border=1> <tr> <td class="colour">Hello</td> <td>World!</td> </tr> </table> </body> </html>`

02.06.2012, 13:13	#4
kettanaito Веб-дизайнер Форумчанин Регистрация: 11.08.2011 Сообщений: 305	Вам нужно чтобы колонки были разного цвета? Если так, то можно оперировать с классами/ID/порядковым номером колонок: Код: /* По классу/ID / .column-red {background:red;} .column-blue {background:blue;} #column-red {background:red;} #column-blue {background:blue;} / По порядку: первая дочерняя td будет иметь красный фон, последняя - синий. Все промежуточные колонки будут иметь цвет по-умолчанию / .table td:first-child {background:red;} .table td:last-child {background:blue;} / По определенному номеру колонки: n-ая по счету колонка будет окрашена в красный цвет / .table td:nth-child(n) {background:red;} Если задачей является окрасить все колонки какой-то таблицы без исключения то можно так: Код: `#table td {background:red;}` При этом сам указатель на таблицу может быть разным, в данном случае ID: Код: `<table id="table" height="justify" width="100%"> <tr><td>Some text</td></tr> </table>` Почему бы не использовать класс для колонки? Это возможно, но в данном варианте не будет практичным - например, в выше описанном случае все колонки определенной таблицы будут иметь красный фон и нам не придется указывать отдельный класс для каждой колонки (достаточно указать класс/ID нашей таблицы). Случай если в таблице возможны разные варианты фона колонок описан вначале. Последний раз редактировалось kettanaito; 02.06.2012 в 13:18.*

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Печать таблицы в две колонки	mclennon	Microsoft Office Excel	4	06.06.2010 00:48
Как добавить цвет? Java	ISO	Общие вопросы по Java, Java SE, Kotlin	1	05.12.2009 13:20
Подскажите как можно сравнить 2 таблицы или колонки	andrew_v_k	Microsoft Office Excel	2	10.08.2009 11:56
Блоки div вместо td, как сделать две колонки одинаковой высоты?	v.victoria12345	HTML и CSS	0	06.05.2009 18:05

02.06.2012, 07:13	#3
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Простите, а в чем разница с тем что я написал в вопросе?

11.06.2012, 18:59	#6
shavedcat Пользователь Регистрация: 16.04.2009 Сообщений: 65	Спасибо большое! Ошибка была в стиле, но в другом месте. Все работает! Спасибо!!!