Header Ads

Dar Color a las celdas de las Tablas

Dar color a la celdas individuales de nuestras tablas es de cierta forma beneficioso a la hora de querer distinguir distintos elementos que se encuentran en nuestra tabla, así como, vimos en una publicación anterior sobre: como dar color a nuestra tabla utilizando el atributo bgcolor en la etiqueta <table>, procederemos de la misma manera, pero esta ves el atributo bgcolor estará situado en las etiquetas <td> o <th> según como construiste tu tabla.


Utilizaremos el atributo bgcolor en las primeras etiquetas <td> de cada fila:

 <td bgcolor="red">Objeto1.1</td>
 <td bgcolor="green">Objeto2.1</td>
<td bgcolor="orange">Objeto3.1</td>

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos los primeros <td> de cada fila.


Código HTML: 



Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Ahora en el siguiente ejemplo pondremos el atributo bgcolor a toda una fila y esto lo lograremos usándolo en la etiqueta <tr> de la siguiente forma:

<tr bgcolor="red">
<tr bgcolor="green">
<tr  bgcolor="orange">

Si observan el "Código HTML" de abajo podrán ver que pusimos bgcolor a todos las etiquetas <tr> de cada la tabla. como ya sabemos la etiqueta <tr> representa la fila de nuestra tabla.

Cogido HTML



Resultado:

Objeto1.1 Objeto1.2 Objeto1.3
Objeto2.1 Objeto2.2 Objeto2.3
Objeto3.1 Objeto3.2 Objeto3.3

Cualquier duda o aporte pueden hacerlo por comentarios, espero les aya sido de ayuda esta publicación.




4 comentarios:

  1. oie tengo un proyecto de como alarmas pero aun no puedo hacerlo , de que pinte verde , amarillo y rojo sabrias como?

    ResponderEliminar
    Respuestas
    1. y lo quiero hacer con javasript , y que actue asi como tipo condiciones

      Eliminar
    2. Hola David eso lo Puedes Hacer con Jquery, me daré un tiempo de como hacer eso espero Visites el Blog a mas tardar lo are Mañana David. Gracias por darme una idea veras que no es muy difícil lo are bien explicado para que puedas entender y hacer modificaciones a gusto. Gracias por Comentar David

      Eliminar
  2. Excelente Blog, te felicito, realmente es bastante completo aunque aun no he revisado totalmente, me baso en tus herramientas para contruir mi blog para la Preservación del Medio Ambiente http://elguarenero.blogspot.com/ el cual me falta pulirlo bastante, si lo visitas te daras cuenta, gracias por tu aporte y continua adelante, Saludos

    ResponderEliminar