Making a table layout look exactly like my table-less layout.

Discussion in 'HTML & Website Design' started by lemony, Mar 1, 2008.

0
  1. #1
    Hey guys,

    Having a bit of a problem here. Best way to explain is by showing an example so here it goes:

    I have a table-less layout:
    http://devpage.50webs.com/07428/div.html

    It's pretty basic. 3 divs floated to the left with a 100% height.

    I'm trying to make a table version of this layout but I ran into a problem.

    Here is my table version:
    http://devpage.50webs.com/07428/table.html

    As you can see, that orange part that surrounds each cell (looks like a border but it is not). I cannot seem to get rid of that. I need it to look exactly like my table-less version.

    Anyone have any answers to this?

    Thanks guys!
     
    lemony, Mar 1, 2008 IP
  2. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #2
    Don't know why you want it in tables, but the answer is

    table {
    background-color: orange; /* <--- I G0T RID OF THIS THING THAT LOOKS LIKE A BORDER! */
    border-collapse: collapse;
    }
     
    shallowink, Mar 1, 2008 IP
  3. lemony

    lemony Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well that was quick! It did exactly what I needed.

    Thanks for the help shallowink, I appreciate it.

    I've never heard of border-collapse before. Good to know.

    And well, to answer your question, I don't plan on using the table layout but I'm in a learning phase right now and I'm trying to learn and understand how everything works. So this was just a learning experience. And I definitely learned something, so it was worth it.

    Thanks again for helping me out :)
     
    lemony, Mar 1, 2008 IP