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.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

headline
text weather pixie url
Accelerate by Eben P… on 13/Mar/2007 – Isn’…
Local Marketing Busi… on June 28, 2005 – What is…
Cool Wordpress Insta… on This Weekend’s Project
Ken Shipman on Confession
Ken Shipman on Confession
  • Flickr Photos

    Sunrise through the trees by the Aviary on our morning walkies.

    Apparently, zoomies were exhausting.  #retired #greyhounds #Wavorly #Oriole #goofy

    Apparently, it is no longer sufficient to simply say, “employees must wash hands before returning to work.” Now, each step of washing one’s hands must be carefully itemized. #really

    More Photos
  • Archives