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

Understanding HTML table borders

Topic status automatically displays here - do not remove.

Bookmark me!Bookmark this topic  Print me!Print this topic

This topic explores the ins-and-outs of HTML table borders as defined by the W3C CSS 2 and HTML 4 standards, and demonstrates how a seemingly small difference in table border style properties or location can make a dramatic difference in the way table borders 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 Borders

Table borders are constructed of three separate elements, which when used in combination—in a display client such as a web browser or HTML help—can create a seemingly infinite range of visual effects.

  1. The table itself has an outer border which can vary in visibility, size (thickness) and colour.
  2. Each cell in the table also has an outer border which can vary in visibility, size (thickness) and colour.
  3. The spacing between the cells, and also between the cells and the table border, can vary in visibility, size (thickness) and colour.

Use the buttons below to vary the property values of the demonstration table to see the dynamic effects of the relationship between the table border style properties, table spacing style properties, and cell border style properties.

DEMONSTRATION TABLE CONTROLS
PROPERTY Table border Table spacing Cell border
Visibility
Size (thickness)
Colour
               
             
               
               
               
               
DEMONSTRATION TABLE
     
     
     

 

Back to Top

See Also

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

Back to Top