Cómo crear una tabla con celdas de diferentes colores de fondo usando CSS

ramones33 · 4 Oct 2017

Hola, tengo una tabla que tiene dos columnas, las celdas de arriba (Encabezados de las columnas) tienen colores distintos para cada columna, como esta se repite en todas las entradas, me gustaría controlar por CSS los colores ya que si luego quiero cambiar los colores no tendré que ir a cada entrada a hacerlo.

Pensé en crear un estilo td1 pero no me ha funcionado, Encontré varios tutoriales pero son para crear tablas con diferentes formatos, en mi caso, deseo la misma tabla pero diferentes formatos para las celdas de encabezado. ¿Me podrían dar una mano?

Este es elcódigo original

Insertar CODE, HTML o PHP:

/* Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2.5;
	margin-bottom: 20px;
	width: 100%;
}

tbody {
	border-bottom: 1px solid #ddd;
}

thead,
th,
td {
	text-align: center;
}

thead {
	color: #fff;
	font-weight: bold;
	background-color: #090961;
}

th {
	font-weight: bold;
	text-transform: uppercase;
}

td {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #fff;
}

Este fue el código que yo infructuosamente creé:

Insertar CODE, HTML o PHP:

/* Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2.5;
	margin-bottom: 20px;
	width: 100%;
}

tbody {
	border-bottom: 1px solid #ddd;
}

thead,
th,
td,
.td1,
.td2,
.td3,
 {
	text-align: center;
}

thead {
	color: #fff;
	font-weight: bold;
	background-color: #090961;
}

th {
	font-weight: bold;
	text-transform: uppercase;
}

td
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #fff;
}

.td1
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #d6d6d6;
}

.td2
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #069ecc;
}

.td3
 {
	border-top: 1px solid #ddd;
	padding: 0px 0;
	background-color: #08499e;
}

lombervid · 5 Oct 2017

Pues lo único que veo que le faltaría a tus clases es ponerle un color:, pero debería de funcionar.

Por qué no te funciona (qué sale o que pasa)?
Dónde estás poniendo las clases?

Demo

Saludos.

josmanmx · 19 Oct 2017

Si quieres que las columnas pares tengan un color y otro color las impares puedes usar la propiedad odd y even en las clases css aquí tienes algo de documentación: CSS: even and odd rules

si lo que deseas es un color distinto en cada columna, usa clases como vas amigo, pero para poderte ayudar también sería bueno que coloques algo de html para tener más contexto o indicar cual es la web que haces.

marjuanm · 19 Oct 2017

Si quieres que las columnas pares tengan un color y otro color las impares puedes usar la propiedad odd y even en las clases css aquí tienes algo de documentación: CSS: even and odd rules

No conocía esa funcionalidad, gracias por el tip :encouragement:

sarcansino · 22 Oct 2017

Tampoco las conocía, gracias amigo.

Cómo crear una tabla con celdas de diferentes colores de fondo usando CSS

ramones33

lombervid

josmanmx

marjuanm

sarcansino

Temas similares