ansaurus

Question

Answer 1

+2 A:

Try the following:

<table id="layouttable">
    <tr>
        <td class='col1'></td>
        <td class='col2'></td>
        <td class='col3'></td>
    </tr>
</table>

#layouttable{border:0px;width:100%;}
#layouttable td.col1{width:20%;vertical-align:top;}
#layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
#layouttable td.col3{width:20%;vertical-align:top;}

What you had before didn't work because they overwrote each other.

Khnle 2010-05-25 03:30:39

I tried that - it doesn't work. I'm starting to believe it could be something wrong in my html, though I've checked it very thoroughly. Thanks for the help, though.

Relentless 2010-05-25 03:38:00

Answer 2

+3 A:

Khnle's method worked fine for me, try putting some content inside the <td></td>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #header { width:100%; background-color:#CCCCCC; text-align:center;}
    #layouttable{border:0px;width:100%; text-align:center;}
    #layouttable td.col1{width:20%;vertical-align:top;}
    #layouttable td.col2{width:60%;vertical-align:top;background-color:#E8E8E8;}
    #layouttable td.col3{width:20%;vertical-align:top;}
</style>
</head>

<body>
<table id="header">
    <tr>
        <td>This is the header</td>
    </tr>
</table>
<table id="layouttable">
    <tr>
        <td class='col1'>20% column</td>
        <td class='col2'>60% column</td>
        <td class='col3'>20% column</td>
    </tr>
</table>
</body>
</html>

Unless its something completely different you want! Hope that helps!

Ryano 2010-05-25 16:27:39

ansaurus

tags:

views:

answers:

CSS Table Formatting to a HTML Table

related questions