HTML Table Background Color

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.

<table style="width:100%;text-align:left;background-color:gold;">
	<tr>
		<th>Table Header</th>
		<th>Table Header</th>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
</table>

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).

Here we also use border-collapse:collapse; to collapse the border.

<table style="width:100%;text-align:left;border-collapse:collapse;background-color:gold;">
	<tr style="background-color:yellowgreen;color:white;">
		<th>Table Header</th>
		<th>Table Header</th>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
</table>

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).

<table style="width:100%;text-align:left;background-color:gold;">
	<tr>
		<th>Table Header</th>
		<th>Table Header</th>
	</tr>
	<tr>
		<td>Table cell</td>
		<td style="background-color:yellowgreen;color:white;">Table cell</td>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
</table>

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.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>

<!-- CSS -->
<style>
.myTable { 
  width: 100%;
  text-align: left;
  background-color: lemonchiffon;
  border-collapse: collapse; 
  }
.myTable th { 
  background-color: goldenrod;
  color: white; 
  }
.myTable td, 
.myTable th { 
  padding: 10px;
  border: 1px solid goldenrod; 
  }
</style>

</head>
<body>

<!-- HTML -->
<table class="myTable">
	<tr>
		<th>Header</th>
		<th>Header</th>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
	<tr>
		<td>Table cell</td>
		<td>Table cell</td>
	</tr>
</table>

</body>
</html>

Web.QHMIT.com

HTML Table Background Color

Background Color for the Whole Table

Background Color of a Table Row

Background Color of a Single Cell

Using Classes

Related