Table Border Style Wizard

Welcome to the totally revamped HTML and CSS border style wizard! Use this wizard to experiment with table border styles and generate style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

The style sheet code generated by this wizard shows the easy way to apply a style to a table. In the HTML, you should only set the "class" attribute on the "table" tag. You should not set the "class" attribute for every single cell, because that bloats the HTML code and wastes bandwidth. Instead, you can use inheritance that says that every "td" or "th" that is a child of "table.sample" should have a certain style. In a short amount of code, you have powerful control over the look of the table.

The above example doesn't show it, but you can also efficiently alternate the row colors in an HTML table by using inheritance. In your code, alternate the class tag of each "tr" tag between the two classes defining your row colors, such "r0" and "r1". Then, define the styles for "table.sample tr.r0 td" and "table.sample tr.r1 td". Note that you can not set the background color of a "tr.r0" directly, because that is only a table structuring element. You must set the background color of the "td" cell that is a child of the "tr.r0" and "tr.r1" rows.

The -moz-border-radius style tag will be rendered in browsers based on the Gecko Runtime Engine. These include Mozilla, Netscape, and the best one, Firefox. For those who are using old-fashioned Internet Explorer, you will not see the effect, which is to produce rounded corners. There are large number of Netscape extensions like this one that allow you to create slick effects, and they are fully backward-compatible with older browsers like IE.


HTML and CSS Table Border Style Wizard

border-width (px) 1px 2px 3px 4px 5px thin medium thick 0px
border-spacing 2px 1px 3px 4px 5px 0px
border-style outset none hidden dotted dashed solid double ridge groove inset
border-color gray white blue green black red custom:
border-collapse separate collapse
background-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:
border-width (px) 1px 2px 3px 4px 5px thin medium thick 0px
padding 1px 2px 3px 4px 5px 0px
border-style inset none hidden dotted dashed solid double ridge groove outset
border-color gray white blue green black red custom:
background-color white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:
-moz-border-radius 0px 3px 6px 9px 12px
The appearance of the table to the right will
automatically change as you toggle the buttons above.
Scroll down for source code and other information.

CSS and HTML Source Code

The box below shows example CSS and HTML source code.
The code will update dynamically as you press the buttons above.
You can select text in the box and then copy and paste the starter code.

Compatibility Notes

If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property. It also does not support any Netscape-specific CSS properties that are prefixed with -moz, and has limited support for the cursor property. This means you will not see all the effects in this wizard unless you use a browser like Firefox.