HTML - 3 Column Table With Fixed Width Center

Hi!
I've been trying to figure out why columns in my HTML-table get weird widths.

ie. this code:
HTML Code:

        <table width="950" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="5">
                    column1
                </td>
                
                <td colspan="5">
                    column2
                </td>
            </tr>

            <tr>
                <td colspan="5">
                    <input type="text" value="column3" maxlength="20" style="width:165px;" />
                </td>
                
                <td colspan="5">
                    column4
                </td>
            </tr>
            
            <tr>
                <td>1</td>
                
                <td>2</td>
                
                <td>3</td>
                
                <td>4</td>
                
                <td>5</td>     
                
                <td>6</td>
                
                <td>7</td>
                
                <td>8</td>
                
                <td>9</td>
                
                <td>10</td>                                                                            
            </tr>
        </table>

gives me the result:


Is there any way I can fix this so each of the columns get's equal size? Preferably without actually having to have to set the width on each of the bottom columns.

If not, could anyone explain to me why it's acting this way?

Thanks.

Hi ,

I am trying to make a plugin for Mybb Forums and I needed to get the last 10 threads scrolling up , so I used the Marquee Tag .
When I tried to view the plugin , I found that half the thread subject only appears while the rest is invisitble(because they don't fit in the box) , so I guessed that the Marquee's width exceeded the width of the table(box) . I tried to make a table inside the Marquee but still didn't work . I need to limit the table's width or the marquee's width so that when the thread's subject is too wide , it starts a new line , not just make the table wider .

I hope you can understand what I mean , because I feel I can't understand it .

Thanks
Alwahsh

Hello,

I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup:

HTML Code:

	<div style="width: 100%">
		<div style="width: 200px; float:left;">Left column</div>
		<div style="width: 100%; float:left;">Middle Column</div>
		<div style="width: 200px; float:left;">Right Column</div>
	</div>

It's not working for me . Please help.

I have created a website, and its aligned in a table Is there anyway I can make the height and width determined by the size of the screen without distorting the image? I'm fairly new to this, Thanks.

hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink

Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window

HI all,

Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders.

Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages.

HMTL attached

Any ideas?

Thanks

in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me.
But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line.

if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks

I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong.

I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller.

If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%.

Can anyone help me?

Hey all,

http://www.lindesigns.us/rma/rmaonline.php

If you go to that site on Firefox, the "Return Code #" expands. But if you use IE, you'll see that it doesn't.

I could add a fix in there for the fields if they were static, but if you see my javascript, they are dynamically loading fields.


This "class":"wide" is not working:

Code:

invoiceInput.appendChild(createElement("input", {"type":"text", "name":"invoice[]", "size":"8", "class":"wide;"}));

I am using a script I found on a jQuery board (http://jsbin.com/acado/6), and it works for them, but not for me because my syntax is probably wrong. And they also are just using 1 field and not near-unlimited dynamically loading fields like I am.


How would I add in a fix to have the browser 'only' use the expansion if the user is using IE6 or IE7?

I searched on the boards but couldn't find the solution to this problem. Thanks in advance!

Hi all,

i have table with 3 columns, this is the code:

<body>
<center><table frame="vsides" cellspacing="0" border="2" width="1000" cellpadding="10" >

<tr>
<td bgcolor="white" width="200" valign="top">
<br><br>This is some text.
</td>

<td bgcolor="white" width="600" valign="top"><br>
This is some text.
</td>

<td bgcolor="white" width="200" valign="top">
<br> This is some text.
</td>

</tr>
</table></center>
</body>

but when i enter some more txt table expand, is it possible to create table that columns can expand(height) but rows not(width)?

thx

Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed.

Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder?

Hi there,
I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks

the site: http://guild-paragon.com/indexframe

edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though

Hi,

I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside.

the fourth row of the table has three cells side by side that I use as the header design.
1) picture 2) space 3) title
I want all these to have fixed widths and heights.

underneath is a cell that spans the length of all three of those.
This is where I want my content.
4) content
The length of this stays fixed but the height changes as more content is addes.

The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell.
Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell.
And this really messes up the nice spacing I had.


Any thoughts on why this would happen???

I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help!

Thanks so much,


heres my code:





[font="Courier New"]
<body>
<table width="875" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td>
</tr>


<tr align="center">
<td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666">
<h1 class="menu">
<ul>
<li><a href="#" class="mainmenu">Home</a></li>
<li><a href="#" class="mainmenu">Party in the Park</a></li>
<li><a href="#" class="mainmenu">Info</a></li>
</ul>
</h1></td>
</tr>


<tr>
<td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td>
</tr>





<tr align="left" valign="top">
<td width="190" rowspan="2">
<img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td>
<td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td>


<!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! -->

<td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td>
<td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td>
<td width="370" height="275">
<p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party
<br />
in the Park</strong></font><br />
<h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br />
<font color="#666666">DATE </font>Saturday, October 13 2008 <br />
<font color="#666666">TIME</font> From 8am until late afternoon<br />
<font color="#666666">INFO</font> Call 704.463.1308</h2></p>
</td>
</tr>


<!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! -->

<tr>
<td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33>
<img src="../images/10spacer.png" width="10" heigh="10"><br />
<h2 class="text">Party in the Park is an annual Richfield tradition started
in 199X to gather the town's residents and their friends together to enjoy
good food, fun entertainment and each other's company. This year we'll
have blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah. The morning will end right with our famous Cush cookoff!
Party in the Park is an annual Richfield tradition started in 199X to
gather the town's residents and their friends together to enjoy good food,
fun entertainment and each other's company. This year we'll have blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah. The morning will end right with our famous Cush cookoff! </h2>
<br /><img src="../images/25spacer.png"><br />
<p><h1 class="menu2">Features</h1></p>
<p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p>
<p><h1 class="menu2">Flyer</h1></p>
<p><h1 class="menu2">Directions</h1></p>


</td>
</tr>

<!-- And everything from here on out seems to be fine from what I can tell -->



<tr>
<td height="75" colspan="5">&nbsp; </td>
</tr>
<tr>
<td colspan="5" valign="top"><hr width="100%" padding-bottom="1px">
<div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email
us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td>
</tr>



</table>

</body>



thanks again for any help guys!