Valid CSS!

Valid XHTML 1.1

HTML table frame vs. CSS border

It isn’t clear to me from the standard how table frame and rules is meant to interact with the HTML border attribute and CSS border styles. Plainly it is also unclear to the browser writers, because the browsers all behave differently regarding frames and the two border specifications.

Here are some simple tests, and an attempt to sort out the different interpretations of these interactions being used by the various browsers.

Possible interpretations:

  1. In presence of frame or rule settings, border only affects the presentation (but not the existence) of a line. So if a table has a frame setting indicating to draw a line, the line is drawn accordingly, regardless of what the CSS border value is, although the color, width, etc of the line may be taken from the CSS values.
  2. Frames and rules are completely independent of CSS borders. (so if you make a frame around a table, and give it a CSS border, you get two lines around the table)
  3. CSS border setting override frames and rules. In the presence of a CSS border value indicating that a line is to be drawn around a table, it is drawn regardless of the value of the frame attribute.
  4. Frame consists of a border part, and a part that isn’t the border. Border part is affected by border settings, the other part isn’t.

frame

  

dashed CSS border

  

frame and red dashed CSS border

  

framed on left with red dashed CSS border on right

  

framed on left, with dashed red right CSS border and dotted lime CSS bottom border

  

frame set to void, but with dashed CSS border

  

framed, but with CSS border set to none

  

framed, but with right CSS border set to none

  

HTML border; frame

  

HTML border; dashed CSS border

  

HTML border; frame and red dashed CSS border

  

HTML border; framed on left with red dashed CSS border on right

  

HTML border; framed on left, with dashed red right CSS border and dotted lime bottom CSS border

  

HTML border; frame set to void, but with dashed CSS border

  

HTML border; framed, but with CSS border set to none

  

HTML border; framed, but with right CSS border set to none

  
Opera (v 9.20)
Default frame is a thin black line.
Border dominates frame.
If border not specified for a side, frame is drawn.
If both are specified only the border is drawn.
If border is none, no line is drawn, but if frame is void and border is specified, border is drawn.
Firefox (v 2.0.0.3)
Default frame is a thin line, gray on top and left, black on bottom and right.
Seems that frame dominates CSS border. If frame is not specified to be drawn on any side, the border is not drawn.
If either frame or border specifies that a line is not to be drawn, it isn’t drawn, regardless of the other’s specification.
HTML border is rendered as two lines, shaded to make it look raised. HTML frame affects the outer line; CSS border affects the styling of that outer line. If either frame or CSS border is turned off, no outer line is drawn. If frame is off but border on, the frame wins.
Konqueror (v 3.5.6)
Default frame is a thick gray line, darker on bottom and left.
CSS border acts like style specification on frame. In case of conflict, CSS border wins.
HTML border drawn as two lines, shaded to appear raised. Frame and CSS border affect the outer line. If frame and border conflict, CSS border wins.
Amaya (v 9.53)
Ignores HTML frame.
HTML border is rendered as a thick gray line, shaded to appear raised. CSS border appears as an additional line outside the gray HTML border.
Elinks (v 0.11.1)
Does frames correctly; ignores CSS border.
HTML border rendered as a single line; frames just control that line.
Internet Explorer 6, 7
Default frame is thick with a raised appearance consisting of two separated lines. (Actually, it is identical to HTML border.)
Behaves as if the frame were composed of different parts, some of which interact with CSS border, others of which don’t
Frame with red border: see inner part of frame; outer part replaced by red border
Frame on left with red dashed right border: see right border, but see only inner part of frame on the left (as though outer part were turned off by absence of border setting). This also explains case of left and bottom border being set
With CSS border set to none see only inner part of frame.
Turning on the HTML border is the same as turning on frame for all sides. Further frame specification only turns off sides of the border.
Safari (v 2.0.4)
Without HTML border, HTML frame is ignored. (Test with HTML border wasn’t available last time I tried.)