problem with tables

[Frost]

hi,
this seems to be a simple problem, but i'm having a hard time solving it...
i have something like this:
css:
.tbl_Div{width:100%;}
.tbl{}
.blue{background-color:blue;}
.white{background-color:white;}

html:
<div class="tbl_Div">
<table class="tbl">
<tr class="blue">
<td>item1</td><td>item2</td>,etc
</tr>
<tr class="white">
<td>item1</td><td>item2</td>,etc
</tr>
</table>
</div>

what i want is to have the background-color of the <tr> to occupy 100% of the div and the <td>'s with minimum size (or a fixed size) aligned to the left.
problem is, if i put the table to 100% width it streches the <td>'s in order to occupy all the width, and i don't want it "strechting"...

greatly apreciate any help on this...

[Paul O'B]

Hi,

I hate working with tables so I let Dreamweaver do it and it does it by adding a spacer gif to fix the size of the cell as follows.

<div class="tbl_Div"> 
<table width="100%" class="tbl">
	<!--DWLayoutTable-->
	<tr class="blue"> 
	 <td width="31" height="21" valign="top">item1</td>
	 <td width="100%" valign="top">item2</td>
	</tr>
	<tr class="white"> 
	 <td height="21" valign="top">item1</td>
	 <td valign="top">item2</td>
	</tr>
	<tr>
	 <td height="5"><img src="spacer.gif" alt="" width="31" height="1"></td>
	 <td></td>
	</tr>
</table>
</div>

This seems to have the desired effect and I think it's the only cross-browser way of doing this otherwise the cells expand differently in each browser.

Why use tables anyway?

Paul

[Frost]

Hi,

I hate working with tables so I let Dreamweaver do it and it does it by adding a spacer gif to fix the size of the cell as follows.

<div class="tbl_Div"> 
<table width="100%" class="tbl">
	<!--DWLayoutTable-->
	<tr class="blue"> 
	 <td width="31" height="21" valign="top">item1</td>
	 <td width="100%" valign="top">item2</td>
	</tr>
	<tr class="white"> 
	 <td height="21" valign="top">item1</td>
	 <td valign="top">item2</td>
	</tr>
	<tr>
	 <td height="5"><img src="spacer.gif" alt="" width="31" height="1"></td>
	 <td></td>
	</tr>
</table>
</div>

This seems to have the desired effect and I think it's the only cross-browser way of doing this otherwise the cells expand differently in each browser.

Why use tables anyway?

Paul

hi paul
how are you?
won't work... before i used tables i had unordered lists, didn't work because using fixed width for <li>,if the width of the <ul> exceeded the width of the screen, it would "jump" to the next line,wich is undesirable ... in this case the fields to be placed in the table are generated dinamicly and could be one, could be several.

the way i see it... i'll have to digg out some java to identify the last <td> and set it's width to 100%...by the way, is there any "property" that alows to do this without placing a specific id tag on the <td>?

thanks


thanks

[Paul O'B]

by the way, is there any "property" that alows to do this without placing a specific id tag on the <td>?

Not that I know of.

in this case the fields to be placed in the table are generated dinamicly and could be one, could be several.

Looks like a table will be the solution then Unless you have an example of what you want then I could try and offer a css solution although I think you are right in that a list will wrap etc.

Paul

[Frost]

thanks paul, but there is no need for you to worry about that...

for now , i have a class tag on the last <td> with "width:100%",not as "clean" as i wanted,but it does the trick, and probably will stay like this...

[MatthewR1985]

First of all tables to organize information (and perhaps image layout) are the old school of thought (to me at least). The new school of thought being <DIV> tags with the "float:left" and "float:right" properties in the CSS (this makes a 2 column page). It took me a while to perfect, but you can look at my site which simulates tables with <DIV>s.

http://matthewr1985.freeservers.com

[Paul O'B]

Hi MatthewR1985,

I notice it is your first post so welcome to Sitepoint Forums and I hope you enjoy your stay here.

Thank you for your post and without seeming ungrateful I feel I must point a couple of things out that hopefully will help you anyway .

Try to offer a suggestion that is relevant to the question and a little more specific to the task in hand.

Also when you link to your page as an example try to ensure that the page is valid code so that we don't pass on bad information to other beginners.

Lastly make sure that the code you link to works in at least ie and mozilla browsers.

The page you linked to doesn't display correctly in mozilla or opera and has about 30 errors in the mark up and css.
e.g.

 STYLE=float:below;

I'm afraid there is no value for the float property of "below". The only values it accepts are left | right | none | inherit |.

Having said all that don't let me disuade you from posting again as all help is appreciated (and sometimes my code doesn't work either ).

Sorry if that all sound ungrateful but it's not meant like that

Paul

PS : If you want to know why your page isn't working in mozilla then make a post in the css section and we'll soon have it working for you

[MatthewR1985]

Yes that float:below was a failed and pathetic attempt to make my DIVs float below. I have since figured it out LOL. You seem to know alot about CSS so maybe you can help me correct some of the other stuff that is wrong with my site. And the reason I hijacked the authors thread was to try to show him that there are alternatives to tables that take up less space and require less typing. Also, whats wrong with the page in Mozilla and is it possible for it to be fixed without changing the IE compatible coding? If its not possible, will I have to write a seperate index.html just for Mozilla?

[Paul O'B]

Hi,

will I have to write a seperate index.html just for Mozilla?

No you just need to use the correct css for browsers that adhere to standards more than ie does

To centre an element you need to use margin:auto on an element with a specified width. More explicitly you need margin-left:auto and margin-right:auto (which means adjust the margins so that they are equal therefore centreing the element that has a width defined).

Unfortunately IE5 and 5.5. use text-align:center in a parent element in order to center so you need to use both for cross-browsers compatability.

Also you have used to floats in your #main element and have given then widths of 50% and left margins of 2px each. An elements width can only be 100% so how can you expect to fit 2 x50% + 4px inside it .

Therefore you need to increase the size of #main to accomodate this. IE works beacause it doen't obey the rules and stretches #main to fit the content. (It treats width as though its min-width.)

Here is the code to make it display in mozilla.

	 .column1 {
			float:left;
			width:49%;
			margin-right:2px;
			}
	 .column2 {
			float:right;
			width:49%;
			margin-left:2px;
			}
 
	 .main {
			background:#ffffff;
			border:1px dashed #000000;
			text-align:center;
			width:571px;
			padding:10px 10px;
			filter:alpha(opacity=95); 
			margin:auto;
}

You would still be better of using px for your floats or if you are using % then use % for the margin also. In this way you can add them up correctly. You can never make %+px = 100% (not exactly anyway).

Once you've done that you should clear out the inline styles as they are almost as bad as tables. You want all your styles in one place in an external sheet preferably.

One last thing is that you will need to add clear:both to your last div on the page so that the content starts on a new line:

<DIV STYLE=width:100%;clear:both> <SPAN CLASS=heading>/END_DATA <IMG SRC=image/heading.GIF><IMG SRC=image/heading.GIF></SPAN> 
</DIV>

You should remove that inline style to the head of the document and you can also get rid of those unnecessary spans and apply the classes to the surrounding divs instead. (Then validate your code to finish tidying up )

If you need more help then I suggest you post in your own thread so that we don't hi-jack frost's thread

Hope that helps.

Paul

[MatthewR1985]

Thanks very much for the help. In the morning (its 12:30AM), I will start a new thread.