Problem using the table tag

I am trying to use the table tag to contruct a section of my site. Basically, I want a three column table with each column separated from each other and having a styled border round 开发者_如何学JAVAit (e.g 1px solid #000000).

I understand each table column cannot be separated with margins using CSS so i used border-spacing and border-collapse property as follows.

border-collapse:separate;
border-spacing:10px 50px;

The above partically worked in that the columns got separated however, i was unable to have a surrounding border on each column.

Any ideas would be greatly appreciated.

---

I think you need to put the border on individual td elements. It's awkward because that means you have to put top and bottom borders on td's in top and bottom rows. Scott may be right that you want to use div's instead, but then again for all we know it is tabular data you are displaying, and you just want it styled a particular way.

edit: Here, this seems to do what you want, if a tad kludgy, and with the caveat that on early versions of IE, firstChild and lastChild only work with the right DOCTYPE:

table { border-collapse: separate;  border-spacing:  2px 0; }

td { border: solid black;  border-width: 0px 1px;}

tr:first-child td {
border-top-width: 1px;
}

tr:last-child td {
border-bottom-width: 1px;
}

---

I think you would be better served providing a link to the page with the data/content you want structured. As I stated earlier in this post, I'm of a mind to think that nested divs would serve you well. This is turning into a 'discussion' rather than an 'answer.'

---

You might consider reading up on the <div> tag; using tables for layout is frowned upon these days.

---

I concur with Scott. Tables are for data. Divs are for formatting. You'll likely also have to do some homework on Cascading Style Sheets if you're not familiar with them.