Table problem

Hello, can someone please help me with this table? I'm trying to add side border in between the columns. I added a left border to 4 of the columns, but the borders doesn't fill the whole height. How can I fix this?

<style type="text/css">
#profilec{width: 640px; overflow: auto; border-top: 1px solid #000000; border-right: 1px #333 solid;}
#profile2c{width: 640px; overflow: auto; border-top: 1px solid #000000; border-right: 1px #333 solid; background: #f1f1f1; }
#profilec1{width: 70px; float: left;border-left: 1px solid #333; padding: 3px; background: #00ff00;}
#profilec2{width: 200px; padding-left: 5px; float: left;border-left: 1px solid #333; padding: 3px; background: #ff0000;}
#profilec3{width: 100px; padding-left: 5px; float: left;border-left: 1px solid #333; padding: 3px; background: #00ffff;}
#profilec4{width: 115px; padding-left: 5px; float: left;border-left: 1px solid #333; padding: 3px; background: #ffff00;}
#profilec5{width: 120px; padding-left: 5px; float: left;border-left: 1px solid #333; padding: 3px; background: #ff00ff;}
</style>



<div id="profilec">
<div id="profilec1"><a href="#"><img src="/image.jpg" width="70px" border="0"/></div>
<div id="profilec2"><a href="#"><b>Video Name</b></a></div>
<div id="profilec3">Rating</div>
<div id="profilec4">Date Added</div>
<div id="profilec5">User</div>
</div>
<div id="profile2c">
<div id="profilec1"><a href="#"><img src="/image.jpg" width="70px" border="0"/></div>
<div id="profilec2"><a href="#"><b>Video Name</b></a></div>
<div id="profilec3">Rating</div>
<div id="profilec4">Date Added</div>
<div id="profilec5">User</div>
</div>
<div id="profilec">
<div id="profilec1"><a href="#"><img src="/image.jpg" width="70px" border="0"/></div>
<div id="profilec2"><a href="#"><b>Video Name</b></a></div>
<div id="profilec3">Rating</div>
<div id="profilec4">Date Added</div>
<div id="profilec5">User</div>
</div>
<div id="profile2c">
<div id="profilec1"><a href="#"><img src="/image.jpg" width="70px" border="0"/></div>
<div id="profilec2"><a href="#"><b>Video Name</b></a></div>
<div id="profilec3">Rating</div>
<div id="profilec4">Date Added</div>
<div id="profilec5">User</div>
</div>

Thanks for your time

It looks like you are trying to create tabular data. It is perfectly acceptable to use the HTML <table> tag for actual data as long as you mark the headers with <th>.

Ummm so where is your table code? You said you needed help with a table, but all I see are multiple divs.

I'm not sure, I've read everywhere to avoid using tables so I decided to use CSS divs.
Also stooshie, where would I put the <th> tags?

Thanks for your help

Edit: I found out how to use <th> tags,

Just one question, so when you're using tables for data, should you always use an HTML table customized with CSS?

Thanks again!

I'm not sure, I've read everywhere to avoid using tables so I decided to use CSS divs.
Also stooshie, where would I put the <th> tags?

Thanks for your help

Edit: I found out how to use <th> tags,

Just one question, so when you're using tables for data, should you always use an HTML table customized with CSS?

Thanks again!

Well you are correct, tables should never be used for page layout. But your question said you had a table problem, and since I didnt see a table in your code, I was confused..lol

Now if you are wanting to display columnar data then tables are fine. Dynamic lists such as product detains and images pulled from a database is perfectly fine using a dynamic table.

The code you have how with the divs, you dont need <th> with, and I would think if those table headers werent with the <table></table> tags, you might get some errors...might not even display at all...never tried it myself.

Sorry, been away.


<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>

Yes that would be a table. You can give the table a border with specified widths. You can also add cell padding and spacing and background colors to cells and rows/columns.