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.
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:
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:
weather pixie url
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.