Stop Tables/Cells from Stretching

[YohimbeArts]

Is there a way to restrict the size of a table and make it non-negotiable? I keep running into a problem with the width of the table stretching. I've tried setting the tables width, per cell, and tried using the max-width style.

I am in development of my work's website and during the process I have been checking its layout in 4 different browsers (Firefox, Chrome, Opera and IE) and at first I was only having problems on occasion with IE. Now depending on the computer I am having problems with tables stretching in Firefox too (The content section is fine here at work but on my laptop at home the table stretches).

[URL="http://metagraphics.net/home.html"] Metagraphics URL]

[Fang]

Place the cells contents in a div with a defined width.

Tables are for data, not layout.

[sohguanh]

Tables are for data, not layout.

Actually I feel the above statement is not really true. There are a group of ppl who says all positioning is CSS. But there will also be another group of ppl who prefer to play around with table tags and attributes to achieve the layout.

Who is right or wrong is pretty much subjective IMHO.

[Fang]

Who is right or wrong is pretty much subjective

No, objective: http://www.hotdesign.com/seybold/

[YohimbeArts]

WOW, what an eye opener for me! I took a web design class in community college about 10 years ago to get me by and I hadn't done much with it; just personal sites for my art (and my boss only has Dreamweaver MX to boot)... When I took the class CSS was more of a side note than a building tool! I've heard that CSS was so cool but all I heard in my head was "blah blah, CSS rocks for changing the color of my header text, and look what I can do with my links." I hadn't realized how dynamic this could be... and now with animation properties of CSS3!


Now that the door is open I want more! I've been looking around the web a bit and been checking out peoples source and CSS but can't figure out how the designers are assigning div location of buttons/rollovers/images since I'm not seeing height properties. Are they using image spacers (A no no per seybold)?


Thank you for your help Fang. I loved the comic strips too. It looks like its time for an update on the website!

[Fang]

but can't figure out how the designers are assigning div location of buttons/rollovers/images since I'm not seeing height properties

Can you give an example?

[YohimbeArts]

I stand corrected. As I am looking further into it I am seeing the height properties are located under the CSS... I was looking for it with the div tags. So, if I'm understanding this correctly I'd want to use a wrapper for the over all size, then separate bulk areas and then break up tabs or whatever within bulk areas.

Why can't tables be locked? Is it browser compatibility?

[Designer525]

so i put the div on my table and it stopped the table from expanding but the type that is echo into the table is still running out of the table please help here is my code.

<td width="50%" colspan="2" style="border: .05em solid #000"><p><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #000; width:100px" class="table"><div style="width:260px">[PHP]<?php echo $_SESSION['comments'];?>[/PHP]</div></span></p>
  <p>&nbsp;</p></td>

[thraddash]

I rarely use tables for anything these days, but this is what I used to do in the past...

<table style="table-layout: fixed; width: 700px;" border="1" cellspacing="0" cellpadding="0">
<col width="160" /><col /><col width="120" />
	<tr>
		<td>Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus</td>
		<td>Content</td>
		<td>Advertising Advertising Advertising Advertising Advertising Advertising Advertising Advertising Advertising</td>
	</tr>
</table>

Using table-layout: fixed in the <table> tag, the table will equally divide its width between the columns, but then specifying <col> tags and widths within them you can control the exact sizes you want. You will notice I didn't specify a width for one of the <col> tags, that tag will get the remaining width after the other two columns are sized, this is useful if you have a table layout that stretches the full length of the screen.

Note: This only works for widths, the height is determined by the content of the cells.

[Designer525]

the table isnt expanding any I was able to get that to stop, however the type that is in the echo session that I have within the table, its text is not wraping so its going outside the table instead of staying in it.

[J0106Preston]

I usually use a height and width attribute in my <td> tags when doing email ads. That keeps it from stretching when you look at it in Liveview, although Dreamweaver CS5 will still display things weird sometimes when you're looking at it in normal.