Color a una tabla HTML

28/Jul/2015 CSS , Deja un comentario
Programación CSS

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.

Vídeos sobre HTML


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.