HTML table background color code

Posted by admin November 08, 2011

HTML table background color code

This page contains HTML table background color code. These are HTML codes for specifying or changing the background color of your tables within your blog or web page.

In HTML, table background color is specified using Cascading Style Sheets (CSS). In particular, you use the CSS background-color property to set the background color for your table. You can also specify a separate background color for your table rows and table cells if you like.

Background Color for the Whole Table

To change the background color of the whole table, use the background-color property against the table tag.

Example:

Table header	Table header
Table cell 1	Table cell 2

HTML Code:

<table style="background-color:lightblue;"><br /> <tr><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Background Color of a Table Row

To change the background color of a table row, you apply the same code, but to the table row in question (i.e. the tr tag).

Example:

Table header	Table header
Table cell 1	Table cell 2

HTML Code:

<table style="background-color:lightblue;"><br /> <tr style="background-color:blue;color:white;"><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />

Background Color of a Single Cell

To change the background color of a single table cell, you apply the same code, but to the table cell in question (i.e. the td tag or the th tag, depending on whether the cell is a normal table data row or part of a table header).

Example:

Table header	Table header
Table cell 1	Table cell 2

HTML Code:

<table style="background-color:lightblue;"><br /> <tr style="background-color:blue;color:white;"><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>Table cell 1</td><td style="background-color:lightgreen;">Table cell 2</td><br /> </tr><br /> </table><br />

Using Classes

The above examples use inline style sheets to set the CSS properties. This is only because it makes it easier for demonstration purposes. I strongly encourage you to use a CSS class defined in an external style sheet to set your styles. Even embedded style sheets are usually better than inline.

Here's an example of setting the table's background color and other properties using a CSS class.

Example:

Table header	Table header
Table cell 1	Table cell 2

HTML Code:

<html><br /> <head><br /> <title>My Table Background Colors</title><br /> <style type="text/css"><br /> .myTable { background-color:#FFFFE0;border-collapse:collapse; }<br /> .myTable th { background-color:#BDB76B;color:white; }<br /> .myTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }<br /> </style><br /> </head><br /> <body><br /> <table class="myTable"><br /> <tr><br /> <th>Table header</th><th>Table header</th><br /> </tr><br /> <tr><br /> <td>Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br /> </body><br /> </html><br />

Search This Blog

web design