Table border-collapse models

Both examples use the style rules

    table {border: solid red}
    
    td {border: outset thick black; 
        padding: 1em;} 
        
    caption {background: #ddd; 
             font-weight: bold; 
             font-family: sans-serif;}

Notice that in Firefox the collapsed model does not show the red table border. The cell borders hide it (the cell layer is the highest and the cell border the widest). With IE, the red table border covers the black cell ones. If the table border is wider than the cell borders, Firefox shows the table border.

In the separated-borders model, the first spacing value designates the horizontal spacing; the second the vertical.

IE does not implement the caption-side property, and defaults to top.

.collapsed {
    border-collapse: collapse;
    caption-side: top;
    }
  

.separated {
    border-collapse: separate;
    border-spacing: 15px 5px;
    caption-side: bottom;
    }