July 13, 2005 – Table border color   1 comment

Butchering Web Standards to get a simple table border

Since the Y!360 editor strips legitimate HTML out of blog entries, we need to improvise. This tutorial fakes a table border.

First, in the defense of web standards, I have to say that this kludgy technique (although it works, dammit!) goes so completely against my grain that I want to retch.

Okay… That’s out of my system.

Now let me explain what I did.

The WeatherPixie

Basically, I used two nested tables. A nested table is simply an HTML table placed inside the data cell of another. One table is nested inside the other, like those Russian dolls.

The simplifed code looks like this (I colored each table’s code to distinguish them from each other):
















In the above example, the green table is nested inside the blue one.

Next, I set the attributes of the outer table like so:



Let’s look at each attribute, one at a time. The background color will simulate the desired border color. The table’s real border is set to zero, since I want to hide the default grey color that I can’t change. Setting either the cell spacing or the cell padding will let the background of the outer table peek out around the edges of the inner table.

And all of that, my friends, produces the blue border. (Oh my! Such deviation from the standards makes me feel so… so… dirty. And not in a good way.)

Okay, moving on. Within the inner table we place our content. First, let’s look at the overall table attributes:

 <table border="0" cellspacing="4" cellpadding="3" bgcolor="#ffffff" background="url">


I’ve hidden its border here, because the inner table is used for placement of the elements only and, except for the background image, is not part of the visual effect. The spacing and padding give the elements a little breathing room. Fiddle with those numbers to suit your taste. (Tip: Temporarily set the border to 1 while you tweak these values to see the effects of your changes.) Finally, I added a background color because it is the right thing to do in case the image is unavailable or the user’s browser doesn’t do images.

Next, comes our content:









In this example, I use two columns and span the first row, with the title, across them. Then, in the second row, the body of text goes in the first column and the WeatherPixie is right justified in the second column. But, you could do lots of other stuff. This is just an example.

Hopefully this is good enough for a start. If you’d like more detail, then feel free to drop me a line.


Posted Wednesday, July 13, 2005 by Grant in Random

One response to “July 13, 2005 – Table border color

Subscribe to comments with RSS.

  1. The butchering job is killing me ,, lol everytime I get a great table or some css going nicely in my editors and they check screaming sweeeeet, that damn excuse me ,, dang y360 editors screws it all up. nice post 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

text weather pixie url
New Safe – Som… on This Weekend’s Project
Cool Wordpress Insta… on This Weekend’s Project
Ken Shipman on Confession
Ken Shipman on Confession
Grant on Confession
  • Flickr Photos

  • Archives

  • Advertisements