The first question to be asking here is why you are using tables for this? Tables are not the right tool for page layouts like this. If you post a screen shot fo what you are aiming for, we could suggest better ways to do this.
I just want to add the social buttons, such as facebook like button, google + button, LinkedIn button over the images/bannerright.jpg. So I think create a table(one row and 3 columens) over the image and then add the buttons into the table is a convenient way.
Tables are not the right tool for layout any more. As I say, post a screen shot and we’ll suggest a better way. I would create a div with a background image, and in that div have a simple list of links. Much easier and better code.
Sure. Please see the attached image. Originally we have three images tiled as images/bannerlogo.jpg, images/bannermid.jpg and images/bannerright.jpg, now we want to add four social buttons over the bannerright.jpg. So I want to use div and put a small table(one row and four columns) over it.
You are still locked into table mode, though. Tables have no place in any of this.
Firstly, have one container div for that whole section, and put one background image on it, rather than three separate images.
Then one option is to give that container position: relative. Then place the social buttons into an unordered list. Give that UL position: absolute, and place it in the bottom right corner of the container. Float the LIs so that they sit horizontally. That’s a much neater and simpler way to do this layout.