I am attempting to provide CSS formating 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.