Updated: 03/27/2004 11:14:57 AM               (Broken Link? Report It Here)      

Design Area

What is the purpose of the Design Hints and Tips area?

Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn.

That's the purpose of the Design Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Working With Tables

Design Tidbits Working With CSS Working With Forms Working With JavaScript

Avoid Extra Carriage Returns in Tables- Added 25 Mar

An extra carriage return between table content and a closing </TD> tag forces an extra space to display in Explorer. Place the closing </TD> tag immediately after the cell content like this:

<td>cell content</td>

instead of

<td>
cell content
</td>

Highlighting Table Rows and Cells

Highlighting rows of table data with a new background color on mouseover is a cool way to accentuate current data for your visitor. When the visitor hovers the mouse cursor over a row, the color changes and highlights the enclosed data for easy viewing. Add a small piece of CSS code into the <TR> tag as shown below and set the bgColor fields to any color you would like. Adding the same code to the inside of the <TD> tag allows you to highlight individual cells also:

<TABLE border="1" cellpadding="5" style="font-family:verdana; font-size:8pt;">
<TR bgColor="#FFFFFF" onMouseOver="this.bgColor='#FFFF00';" onMouseOut="this.bgColor='#FFFFFF';">
<TD>This is</TD>
<TD>a sample</TD>
<TD>of how</TD>
<TD>to highlight</TD>
<TD>table rows</TD>
</TR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#FFFF00';" onMouseOut="this.bgColor='#FFFFFF';">
<TD>Put your</TD>
<TD>mouse cursor</TD>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='#FF0000';" onMouseOut="this.bgColor='#FFFFFF';">here</TD>
<TD>for a</TD>
<TD>cell example</TD>
</TR>
</TABLE>

The Case Of The Missing Table

You receive an email from a visitor at your website saying that the table on your main page is missing. You open your Internet Explorer and visit the page only to find the table is right where it should be. But you decide to check out your code anyway and find that you forgot to input your closing </table> tag.

Some browsers, like Netscape and Opera, adhere more stringently to W3C standards. Although Internet Explorer may ignore a problem like a missing closing </table> tag, Netscape ignores the entire table and all its contents.

Design Tidbits Working With CSS Working With Forms Working With JavaScript

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.