Artículos
CSS

Color a una tabla HTML

28/Jul/2015

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.

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

<table>
  <tbody>
    <tr>
  <th>País</th>
  <th>Capital</th>
  <th>Superficie</th>
  <th>Habitantes</th>
    </tr>
    <tr>
  <td>España</td>
  <td>Madrid</td>
  <td>504.645 km<sup>2</sup></td>
  <td>46,6 M</td>
    </tr>
  </tbody>
</table>

Esta será la tabla sobre la que demos el color. 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 { ... }

El atributo que nos permite dar color a una tabla es background-color. Al atributo background-color podemos indicarle el color mediante un nombre en inglés que represente el color:

table {
  background-color: red;
}

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

table {
  background-color: #f00;
}

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

Código Fuente

Descárgate el código fuente de Color a una tabla HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios