In this post you will be shown how you can edit the font color and the background color of the cells as you wish.

In order to make a HTML table visually appealing, you can colorize it. In this post you will be shown how you can edit the font color and the background color of the cells as you wish.

For example, I added a table of the current Formula1 team standings down below. To recognize the teams more easily, I colorized the cells in the team colors.

Additionally, I changed the font color of "Ferrari" and "Red Bull" to white, in order to get a better contrast.

Team Points
Mercedes 438
Ferrari 288
Red Bull 244

The HTML code for this table looks like this:

<table>
  <tr>
    <th>Team</th>
    <th>Points</th>
  </tr>
  
  <tr>
    <td bgcolor="silver">Mercedes</td>
    <td>438</td>
  </tr>
   
  <tr>
    <td bgcolor="#DF0101" style="color: white;">Ferrari</td>
    <td>288</td>
  </tr>
   
  <tr>
    <td bgcolor="darkblue" style="color: white;">Red Bull</td>
    <td>244</td>
  </tr>
</table>

The important thing to note here is the position, where you add the attributes. In between the brackets <td>, you will only colorize the cell. If you add the color in the brackets <tr>, the whole row will be formatted.

Background color of the cell

In order to change the background color of a cell to silver, you have to change the brackets <td> to <td bgcolor="silver">. After that, you enter the regular text that should be displayed in the cell.

<td bgcolor="silver">Mercedes</td>`

Font color

Changing the font color to white demands changing the brackets <td> to <td style="color: white;">. In the given example this was combined with a new background color. Several attributes are seperated by blank characters:

<td bgcolor="darkblue" style="color: white;">Red Bull</td>

HTML color codes

The colors in HTML can be adressed in different ways. On one hand it is possible to just name the color, like "silver" or "darkblue". This works well, but results in a relatively small color palette.

It is also possible to use HTML color codes. This way, the color can be defined exactly, like I did above with "Ferrari". In this case it is not simply "red", but the color code #DF0101. On the website HTML-Color-Codes you can get the color code for any color.

HTMLTable