Home » Tip Bank » Application Design » User Interface Design » Web UI

Language: Web
Expertise: Beginner

Nov 13, 1998

Some browsers do not display a table cell's background color unless the cell contains some HTML content. It is often handy to use table cell background colors to "paint" a whole region a different color than the page background. To ensure that every "empty" table cell displays background color, insert a non-breaking space ( ) in the table cell. The following code shows non-breaking spaces being used in the middle row of the table. The bottom row demonstrates what happens with no non-breaking spaces (the yellow will not display in some browsers).

 
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="2" WIDTH="400">
	<TR>
		<TD BGCOLOR="#ffcc00">Application</TD>
		<TD BGCOLOR="#ffcc00">Benchmark</TD>
		<TD BGCOLOR="#ffcc00">Results</TD>
	</TR>
	<TR>
		<TD BGCOLOR="#ffcc66">Photoshop</TD>
		<TD BGCOLOR="#ffcc66"> </TD>
		<TD BGCOLOR="#ffcc66"> </TD>
	</TR>
	<TR>
		<TD BGCOLOR="#ffff99"></TD>
		<TD BGCOLOR="#ffff99"></TD>
		<TD BGCOLOR="#ffff99"></TD>
	</TR>
</TABLE>

See this code in action:

Application	Benchmark	Results
Photoshop