Electric Type

Multimedia

About Us

News

Help

Table Cell Color
by Mary Spicer 18 Sep 1996

Mary Spicer designs the RGB Gallery. She misses glam rock.

Page 1

As the seasons change, everyone from Manhattan to Mountain View is showcasing their latest fashions. And highlighted in this fall's lineup are the most brilliant colors - or rather, color tags.

The autumn releases from both Netscape and Microsoft (Navigator 3.0 and Internet Explorer 3.0, respectively) allow the discriminating Web publisher to assign different background colors to table cells and rows, a liberating enhancement that expands options and minimizes download times.

But before we get to colored table cells, let's review the other ways we can add color to a page. (If you're already an ace, feel free to skip ahead.) One way to add color is to insert a background image, using the body tag. Let's say you'd like to pay homage to your cat Fluffy. You take your favorite 50K image of the 14-year-old kitty and insert it into the background by modifying the <body> tag, like so:

    <body background=
    /96/38/stuff/fluffy.gif">
So the page would have Fluffy over and over:

[fluffy]

It looks nice, but what a drag for your visitors. Fluffy's photo can be a bit cumbersome over a 14.4 modem, and Lord knows you don't want to inconvenience your users. Instead, try adding a background color, also using the <body> tag; this way, you can assign a hexadecimal color value to an entire page. (Don't speak hexadecimal? Just use our handy, dandy color chart.) Once you have your hex value, you can set the background color, like so:

    <body bgcolor="#fd7007">

So you've replaced Fluffy's giant GIF with a lovely orange background ("fd7007" means "orange" in hexadecimal). But now you want to build a table for Fluffy's stats: his length, weight, eye and coat color, and his quirky little habits. Of course, the habits are the most interesting, so you want to highlight them, and, by attaching the <bgcolor> attribute to a table cell, you can.

The code would look like this:

    <table border>
    <tr bgcolor="#ffffff">
    <td colspan=2 align=center><h2>Fluffy's Stats</td>
    </tr>
    <tr bgcolor="#ffffff">
    <td><h3>length</td>
    <td><h3>23 inches</td>
    </tr>
    <tr bgcolor="#ffffff">
    <td><h3>weight</td>
    <td><h3>45 pounds</td>
    </tr>
    <tr bgcolor="#ffffff">
    <td><h3>eye color</td>
    <td><h3>blue</td>
    </tr>
    <tr bgcolor="#ffffff">
    <td><h3>coat color</td>
    <td><h3>orange and white and brown</td>
    </tr>
    <tr>
    <td bgcolor="#EF5A10"><h3>quirky habits</td>
    <td bgcolor="#EF5A10"><h3>acting stupid, licking electric sockets</td>
    </tr>
    </table>

And the table would look like this:

    [table]

Let me give you an example that's very dear to my heart. We're currently developing a new homepage for Pop, HotWired's arts and entertainment channel. Our mission is to fit an incredibly large amount of information into one page. So Three (Pop's senior designer) and I took that information and divided it up into four categories: Pop Talk; the daily feature; the departments; and basic site information. We arranged these hierarchically on a page according to importance, then assigned colors for each section to convey that each area is unique.

[Do this ... ]

It's not easy to organize this much information, but the <bgcolor> tag helps define site sections and direct the user's eye.

Just remember not to overdo it....

[ ... not this.]

The Mondrian nightmare above is what designers call a flat page; there's no path for the eye to follow. The user's eye is dragged all over the page because of the spastic use of color.

Now, I know this is all very exciting, but try not to get too carried away. Think of your colored table cell as a vinyl separate; when used sparingly and with an abundance of good taste, it can be positively fabulous. But you can definitely get too much of a good thing.


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.