Color a una tabla HTML

En este ejemplo vamos a ver como podemos dar color a una tabla HTML. Lo que haremos es que la tabla tenga un color homogéneo en toda la tabla.

Crear la tabla HTML

Lo primero será crear una tabla con los elementos HTML table, tr y td.

<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
  <tr>
    <td>Celda 3</td>
    <td>Celda 4</td>
  </tr>
</table>

Esta será la tabla sobre la que demos el color.

Aplicar color con CSS

Para dar color a una tabla HTML vamos a apoyarnos en CSS. En concreto vamos a dar estilo a lo que sería el elemento table. Es decir, al mismo elemento que representa toda la tabla.

table {
  background-color: blue;
}

El atributo que nos permite dar color a una tabla es background-color.

Formas de definir el color

Al atributo background-color podemos indicarle el color mediante un nombre en inglés que represente el color:

table {
  background-color: blue;
}

O bien podemos utilizar el color en hexadecimal. En este caso deberemos de utilizar una almohadilla delante del color hexadecimal.

table {
  background-color: #0000FF;
}

De esta forma tan sencilla habremos conseguido poner un color a una tabla con HTML y CSS.