CODEWITHSUNDEEP
htmlcssformattinghtml-table
Relentless
Relentless

Reputation: 15

CSS Table Formatting to a HTML Table

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.

Upvotes: 0

Views: 5661

Answers (2)

Ryano
Ryano

Reputation: 2120

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!

Upvotes: 4

Kevin Le - Khnle
Kevin Le - Khnle

Reputation: 10887

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.

Upvotes: 2

Related Questions