HTML and CSS Table Border Style Wizard
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.
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 Toggle Buttons
You might also have noticed the interesting toggle buttons that control the table style. These buttons act like radio buttons, but are implemented in Javascript and CSS. The standard form radio input buttons are poor for user-interfaces because the circle is just too small to click on. Label tags can increase the clickable area (see Javascript Function to Check or Uncheck all Checkboxes), but this also is not a good option. If the labels are uncolored, then most users do not know that the text is clickable. If the labels are colored, then having two clickable areas increases visual clutter, and the labels are still not obviously clickable.
The toggle buttons above behave like real radio buttons, like the ones on old-fashioned car radios. If you depress one, the others in that group become raised. Each button is implemented as a "span" tag. Two styles are defined for the buttons, "depressed" and "raised". The "onclick" handler of each button calls a function called "toggleButton(elementObj, idRegex)". This takes a reference to "span" object and a regular expression to match the group of buttons. The function loops through all the "span" elements in the document, and for each of those whose ID matches the regular expression, the style class is set to "raised". Finally, the style class of the "span" that was clicked is set to "depressed".
This is a lot of work to do something fairly simple. Hopefully, one day W3C will define a style property like radio-style-type where we can specify some alternative looks to the radio buttons. In the meantime, you can view source of this page and copy the Javascript functions. Note that the "span" tags are generated from a PHP function called printButtons that takes an array of the buttons that I want to print. This saves a lot of typing.
Get Firefox Now!
If you haven't already, you need to head over to the Mozilla Foundation and download the free Firefox web browser. This is the best browser on the planet. It is faster, less buggy, and more secure than Internet Explorer. You'll also be able to see the fancy effects (rounded edges, hover effects) in this web page that you are missing out on.
If you happen to visit a site that doesn't work with Firefox but only with IE, then complain to the site operator that their site is not standards-compliant. Most companies will listen! For example, Vanguard recently revamped their site to remove most pop-ups and increase compatibility with non-IE browsers. Remember, Microsoft doesn’t make the IE browser free for your benefit. They want to lock you in so that you are forced into buying their related products. Support standards, support the community, and support Firefox by downloading and using it today. Another great browser you can use for free is Opera.
Links
- Web Design Group‘s CSS Guide - a thorough CSS reference
- Index DOT CSS Reference - another more detailed CSS reference
- Style Object Documentation - a list of style object Styles from the Microsoft DHTML Reference
More CSS Wizards
Recommended Books
- Dynamic HTML: The Definitive Reference (2nd Edition)
- JavaScript: The Definitive Guide
- Cascading Style Sheets 2.0 Programmer's Reference
- JavaScript: The Definitive Guide
Disclaimer: This content is provided as-is. The information may be incorrect.