CSS Table Formatting to a HTML Table

Question

I am attempting to provide CSS formatting to two HTML tables, but I cannot. I am setting up a webpage in HTML & CSS (with the CSS in an external sheet) and the layout of the website depends on the tables.

There are 2 tables, one for the head and another for the body. They are set up whereas content is situated in one middle column of 60% width, with one column on each side of the center with 20% width each, along with other table formatting.

My question is - how can I format the tables in CSS? I successfully formatted them in HTML, but this will not do. This is the CSS code for the tables - each table has the id layouttable:

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

The tables in the html document both each have, in respective order, these elements (with content inside not shown):

<table id="layouttable"><tr><td></td><td></td><td></td></tr></table>

Does anyone have any idea why this CSS is not working, or can write some code to fix it? If further explanation is needed, please, ask.

Tables are meant to display tabular data, not to setup the layout of your page. — Paolo Bergantino
– Paolo Bergantino, Commented May 25, 2010 at 3:26

Ryano · Accepted Answer · 2010-05-25 16:27:39Z

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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!

Kevin Le - Khnle · Accepted Answer · 2010-05-25 03:30:39Z

2

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.

answered May 25, 2010 at 3:30

Kevin Le - Khnle

10.9k11 gold badges57 silver badges85 bronze badges

1 Comment

Relentless Over a year ago

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.

Collectives™ on Stack Overflow

CSS Table Formatting to a HTML Table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related