Understanding - HTML table borders Lotech Solutions ( Jump to site home pagewww.lotechsolutions.com)

Understanding HTML table colours

Topic status automatically displays here - do not remove.

Add me to your favorites!Bookmark this topic  Print me!Print this topic

This topic explores the ins-and-outs of HTML table colours as defined by the W3C CSS 2 and HTML 4 standards, and demonstrates how a seemingly small difference in table colour style properties or location can make a dramatic difference in the way table colours display within HTML topics.

Note Note

The basic structure of an HTML table is described in Jump across to separate topic Understanding HTML Tables.

Back to Top

Table layers and transparency

According to 'CSS2: Section 17.5.1 Table layers and transparency', the different table elements may be thought of as being on six superimposed layers.

  1. cells
  2. rows
  3. row groups
  4. columns
  5. column groups
  6. table background

The background colour set on an element in one of the layers will only be visible if the layers above it have their background set to transparent.

 

Back to Top

Table Colours:

The table background colour displays through the gap between the table cells as determined by the value of the table cellspacing property. I can't seem to get the cellspacing attribute to work when it's defined as a stylesheet table rule, however, it does when I apply it as an inline table tag property.

 

Back to Top

Examples

Here is the HTML for a simple table consisting of a single-cell in a single-row: 

<TABLE> <TR> <TD>
      Row 1 Cell 1
    </TD> </TR> </TABLE>

Here's how that table displays:

Row 1 Cell 1

 

 

Back to Top

See Also

Jump to site home page Lotech Solutions' Tips, Tricks, and Procedures

Back to Top