Hi guys

 

I have:

 

<TABLE BORDER=1 WIDTH="300" HEIGHT="200" CELLPADDING=0 CELLSPACING=0>
<TR ALIGN=left>
<TH WIDTH="100">user1</TH><TH WIDTH="100">user2</TH><TH WIDTH="100">user3</TH>
</TR>
</TABLE>

 

I trying to change the table width but for some reason, the table width isnt changing when I change the table width?

ie 350px?

 

Not sure what im doing wrong? The table is placed within div tag:

 

#mainleft { width:400px; color: black;  height: 182px; float: left; border: solid 1px #000000; padding-top: 5px; padding-left: 5px;  margin:5px 0px 0 0; }

 

but dont think that would make much difference?

 

Thanks...

When I try what you are doing it works fine for me, and I can't see anything that really stands out as being wrong....could it possibly be because your th widths are over throwing the main table width as they only equal 300 together and not 350? that could possibly effect some browsers.

mmm strange...

 

<div id="mainleft">
				<TABLE BORDER=1 WIDTH="380" HEIGHT="200" CELLPADDING=0 CELLSPACING=0>
				<TR ALIGN=left>
				  <TH WIDTH="100">user1</TH><TH WIDTH="100">user2</TH><TH WIDTH="180">user3</TH>
				</TR>
				</TABLE>
				</div>

 

even when TH added up, its still braking out? Take alook...

 

http://www.ben-smith.net/tablediv/tablediv.html

mmm strange...

 

<div id="mainleft">
				 <TABLE BORDER=1 WIDTH="380" HEIGHT="200" CELLPADDING=0 CELLSPACING=0>
				 <TR ALIGN=left>
				   <TH WIDTH="100">user1</TH><TH WIDTH="100">user2</TH><TH WIDTH="180">user3</TH>
				 </TR>
				 </TABLE>
				 </div>

 

even when TH added up, its still braking out? Take alook...

 

http://www.ben-smith.net/tablediv/tablediv.html

 

 

In your CSS you've set the width of tables to width: 580px; . That overrides the width attribute in your HTML.

I'd recomment you put all your styling in CSS as it reduces the confusion of having styles defined in HTML and CSS. It also means you don't have to put as much markup in your HTML.

 

Also, when using XHTML you should close all element. Your meta elements for instance isn't closed.

All elements and attributes should be lower case.

And all attributes should be quotes.

 

In strict mode attributes defining layout, such as your tables BORDER, WIDTH, HEIGHT, ALIGN etc is depreciated. They should be moved to CSS, or you should use a Transitional doctype.

 

btw, your print stylesheet returns a 404.

 

Is there any reason you use

<style type="text/css" media="all"> @import "main.css";</style>

instead of

<link rel="stylesheet" type="text/css" media="all" href="main.css" />

?

well spotted tt!

 

Also, when using XHTML you should close all element. Your meta elements for instance isn't closed.

 

Not sure I get this bit, why arnt then closed? then end in <>?

Empty element such as IMG, META LINK

<meta name="Description" content="">

should be closed with an / at the end

<meta name="Description" content="" />

 

This is because XHTML is XML and because of that every element needs to be closed.

http://www.w3schools.com/xhtml/xhtml_html.asp

oh I see! Cool!

 

Now if I want to style 2 tables Ive done this bot doesnt work:

 

http://www.ben-smith.net/tablediv/tablediv.html

 

I want to spave the TH 100px apart on the second table

 

#mainleft { width:400px; color: black;  height: 182px; float: left; border: solid 1px #000000; padding-top: 5px; padding-left: 5px;  margin:5px 0px 0 5px; }


table { 
  text-align:center; 
  font:Normal 12px "Verdana", Tahoma, Arial, sans-serif; 
  color:#0066CC; 
  width: 500px; 
  height: auto; 
  border: 0px; 
  } 
tr { 
text-align:left; 
  color:#0066CC; 
  border: 0px solid #ccc; 
  } 
td { 
text-align:left; 
color: #003399; 
  border:0; 
  width:auto; 
  height:auto; 
  } 




  table2 { 
  text-align:center; 
  font:Normal 12px "Verdana", Tahoma, Arial, sans-serif; 
  color:#0066CC; 
  width: 300px; 
  height: auto; 
  border: 1px; 
  } 
tr2 { 
text-align:left; 
  color:#0066CC; 
  border: 1px solid #ccc; 
  } 
td2 { 
text-align:left; 
color: #003399; 
  border:1; 
  width:auto; 
  height:auto; 
  } 

 th2 { 
  text-align:left; 
  color: #003399; 
  border:1; 
  width:100px; 
  height:auto; 
  }

 

<body>
				<div id="mainleft">
				<table2>
				<tr2 align=left>
				  <th2>user1</th2><th2>user2</th2><th2>user3</th2>
				</tr2>
				</table2>
				</div>

				<table>
				<tr align=left>
				  <th>user1</th><th>user2</th><th>user3</th>
				</tr>
				</table>

</body>

If you want to specify a different style for separate table elements use the class attribute. You can not make up new element names.

 

<body>
				<div id="mainleft">
				<table class="table2">
				<tr align=left>
				  <th>user1</th><th>user2</th><th>user3</th2
				</tr>
				</table>
				</div>

				<table class="table1">
				<tr align=left>
				  <th>user1</th><th>user2</th><th>user3</th>
				</tr>
				</table>

</body>

 

table.table1 { ... }
table.table1 th { ... }
table.table1 td { ... }

table.table2 { ... }
table.table2 th { ... }
table.table2 td { ... }

Some more info about the CSS syntax. http://www.w3schools.com/css/css_syntax.asp

Avoid class names that describes the layout or style of the element, but rather name them according to their content.

 

You can also use the colgroup element to define the structure of tables.

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

Thanks TT!

 

Now im trying to set 1 column 180px and the two others 100px but not having much luck?

 

http://www.ben-smith.net/tablediv/tablediv.html

 

<div id="mainleft">
				<table class="table2">
				<tr>
				<th class="row1">user1 datajjjjjjjjjjj</th><th class="row2">user2dddd dddddddddddd</th><th class="row3">user3 dddddd dddddd</th2
				</tr>
				</table>
				</div>

 

table.table2 { 
  text-align:center; 
  font:Normal 12px "Verdana", Tahoma, Arial, sans-serif; 
  color:#0066CC; 
  width: 380px; 
  height: auto; 
  border: 1px;
  background-color:yellow;
  white-space:normal;
  }


 table.table2 th { 
  text-align:left; 
  color: #003399; 
  border:1px; 
  background-color:red;
  width:100px; 
  height:150px;
  white-space:normal;
  } 


  table.table2.row1 th { 
  text-align:left; 
  color: #003399; 
  border:1px; 
  background-color:red;
  width:180px; 
  height:150px;
  white-space:normal;
  }  

  table.table2.row2 th { 
  text-align:left; 
  color: #003399; 
  border:1px; 
  background-color:red;
  width:100px; 
  height:150px;
  white-space:normal;
  }  

  table.table2.row3 th { 
  text-align:left; 
  color: #003399; 
  border:1px; 
  background-color:red;
  width:100px; 
  height:150px;
  white-space:normal;
  }

table.table2.row1 th

this should be

table.table2 th.row1

You see why?

oh yeah , because the class is inside the th! cool!

 

I don't know if you know this already, but to uniquely identify an element you can assign and id to it. Note that all id's on a page must be uniques. If you find yourself wanting to use the id on multiple elements you should use the class property.

 

<ul id="navbar">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
...
</ul>

 

Often the navigation bar on sites are unique elements, they don't share any similarities with any other elements.

So to style only the navigation bar, assign an id to it and refer to it like this:

#navbar {
...
}
#navbar li {
...
}

 

Note that you can write ul#navbar if you want to specify that only UL elements with id of "navbar" should be styled. #navbar simply allows ANY element with id of "navbar" to be styled.