Categories


HTML Tables: Colored Backgrounds

.

We’ve seen how to write the HTML code for external table borders and internal table rules, but there are other simple  pieces of HTML code that can be added to the

  code where you want the colored background to show for the whole row.

 

Table with background color for Row 1 Cell-3; and Row 2 Cell 1 (Figure 3):

Note:   The bgcolor=  should be  in the

 code  to change how the table displays.

These extra bits of code can change the not only the appearance of the table by giving the table or portions of it a colored background but also  control  the layout of the table  by manipulating the placement of the table’s cells.

While both of these will affect how the table is displayed,  for our purposes of this post, we’ll only be covering  the specific HTML code used to get a colored background for:

  • Whole tables
  • Table rows
  • Table cells

Colored Backgrounds

Using background color for either the whole table, the rows or cells can help separate blocks of  information presented in the table or highlight the whole table on a page  making the table and it’s contents stand out.

For our examples,  we’ll be using a table with 2 rows and 3 columns, and  hexadecimal colors for the backgrounds.  We’ll also be using a border of 1 and cellpadding of 10 to make viewing the different rows and cells easier. As usual, all HTML code will be shown in blue.

Note: The bgcolor=  is in the

code thus affecting the whole table.

Table with complete colored background (Figure 1):

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Table with background color for Row 1 only (Figure 2):

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Note:   The bgcolor=  should be  in the

 cell code  for the cell(s) where you  want the background color to show.

Row 1 Cell-1 Row 1 Cell-2 Row 1 Cell-3
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3

Conclusion

We’ve given you some basic examples of how you can use colored backgrounds in tables – but, don’t think this is all you can do.   You may want to  have a table with a colored background and then assign different colors to the rows or cells.    There are no limits – so be creative and have some fun with tables.

Join us next time when we’ll discuss how to use cellspanning to control how our table displays the heading and other information.


Comments are closed.