Cell borders

HTML 4 includes mechanisms to control:

• border styles
• horizontal and vertical alignment of cell contents
  and
• cell margins

In this example, some of the cells have names using 'TITLE', some are defined using the style-sheet and the rest have inline styles.

<STYLE>
.two      { background: red; border: 
	10 double black }
.for      { border: 1px solid lime; 
	padding: 1em; }
.in-blue  { border: 5px dashed blue; }
.dot-green{ border: 5px dotted green; }
</STYLE>

<TABLE style="border: 5px solid thistle"><TR>
<TD style="border-right: 15px ridge aqua; 
border-bottom: 10 solid blue; 
border-top: 10 solid gold; 
border-left: 15 solid red">
I have 4 sides defined</TD>
<TD style="border-top: 10 solid red; 
border-left: 15 solid gold">
I have 2 sides defined</TD></TR>
<TD TITLE=1 class=for> 1px solid lime
<TD class=two>background: red; border: 
	10 double black 
<TD TITLE=2 style="border: 15px groove red">
	 15px groove red
<TD TITLE=3 style="border: inset 15px aqua">
	inset 15px aqua
<TD style=" border: 15px solid gold;">
	15px solid tan
</TD></TR><TR>
<TD TITLE=4 class="in-blue"> 5px dashed blue  
<TD style=" border: 10px groove blue;">
	10px groove blue
<TD TITLE=5 style=" border: 15px ridge tan; ">
	15px ridge tan
<TD style=" border: 15px outset aqua; ">
	15px outset aqua
<TD TITLE=6 class="dot-green"> 5px dotted green
</TD></TR></TABLE>

This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.

Now we will add border-collapse: separate and there is no change from Table 1 to Table 2.

<TABLE style="border: 5px solid thistle; border-collapse: separate;">

Now we will add border-collapse: collapse and Table 3 shows the effect

<TABLE style="border: 5px solid thistle; border-collapse: collapse;">

Notice the outside border over-rules other cells. Narrow borders are discarded in favor of wider ones. If several have the same 'border-width' than styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.

Border conflict resolution

In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

The following rules determine which border style "wins" in case of a conflict:

1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
3. If none of the styles is 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' than styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table.

<TABLE border=1 bordercolor=red>
<COLGROUP BGCOLOR="cornsilk">
<COLGROUP style="background-color:lightblue">
<TR>
<TD>55 notes</TD><TD>55<BR>&nbsp;</TD>
<TD>100</TD></TR><TR><TD>55</TD>
<TD>Cell<BR>Data</TD>
</COLGROUP></COLGROUP>
<TD style="background-color:thistle"
 onMouseover="this.style.backgroundColor
		='yellow';"
 onMouseout="this.style.backgroundColor
		='yellowgreen';">
Visit here</TD></TR></TABLE>

The collapsing border model

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group. Borders for HTML's "rule" attribute can be specified this way.

Borders are centered on the grid lines between the cells. User agents must find a consistent rule for rounding off in the case of an odd number of discrete units (screen pixels, printer dots).

The diagram below shows how the width of the table, the widths of the borders, the padding, and the cell width interact. Their relation is given by the following equation, which holds for every row of the table:

row-width = (0.5 * border-width₀) + padding-left₁ + width₁ + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

Here n is the number of cells in the row, and border-width_i refers to the border between cells i and i + 1. Note only half of the two exterior borders are counted in the table width; the other half of these two borders lies in the margin area.

Note that in this model, the width of the table includes half the table border. Also, in this model, a table doesn't have padding (but does have margins).