Crear tabla con celdas que tengan diferentes colores de fondo Crear tabla con celdas que tengan diferentes colores de fondo


Mostrando resultados del 1 al 5 de 5
  1. #1
    Registro
    21-junio-2014
    Ubicación
    Venezuela
    Mensajes
    1.155
    Crear tabla con celdas que tengan diferentes colores de fondo
    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?

    Screenshot_7.png

    Este es elcódigo original

    Código:
    /* 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é:

    Código:
    /* 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;
    }

  2. #2
    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.
    Citar Citar  

  3. #3
    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.
    Citar Citar  

  4. #4
    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
    Citar Citar  

  5. #5
    Crear tabla con celdas que tengan diferentes colores de fondo
    Tampoco las conocía, gracias amigo.
    Citar Citar  

Temas similares

  1. ¿Cómo puedo crear menús de diferentes colores en Wordpress?
    Hola, quisiera que me saquen de dudas, quiero insertar submenus de diferentes colores, en la imagen que muestro aparece el color, pero quisiera que...
    Respuestas: 6
    Último mensaje: 29-dic-2016
  2. Como poner diferentes Colores en fondo de imagen como Yaskenet?
    Hola amigos de foro, he creado una pagina en php modelo yaske, ahora quiero usar algun script o codigo php para llamar los colores a a las portadas...
    Respuestas: 0
    Último mensaje: 24-ago-2013
  3. Como crear efecto fondo de colores en PS
    Estimados, ando buscando hace rato un tutorial que me permita crear un fondo como el que se muestra en éstas capturas (las dos primeras): Dribbble...
    Respuestas: 7
    Último mensaje: 15-mar-2013
  4. Agregar mas tipos de colores a la tabla de crear post
    Saludo!! bueno este post es para ver si me pueden ayudar a agregar mas colores a la tabla de colores cuando se crea un post: ...
    Respuestas: 2
    Último mensaje: 08-ene-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •