HTML - Text Width In Cell

Hi all, I am a totally new to html, "yesterday I could not even spell it".
I am working on a simple project where I have used a table to store page information (text and pictures), I read it somewhere it is the best way to do it.
I figured out how to set the context width in the cell (<td width="20">) but how do set the width of the cell?
Remember, I am not building "The Windsor Castle" just a little cuby house in the back so everything should be as simple aspossble, not necessarily the fastets and most versatile.
Thanks in advance.

I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one).

How can I go about doing that?

Thanks!!

I have a table that looks like this:

Code:

<table style="height: 100%;" cellspacing=0 cellpadding=0 border=1>

<tr><td colspan=2 style="height: 100px;">
<center>
<span style="font-size: 24pt; text-align: center;">
<img src="H&R banner.jpg" border=0></span></center></td></tr>

<tr>

<td style="width: 200px;">
<center>
<span style="text-align: center;">
MARGIN<br>
(latest news)<br>
(possibly links)
</span>
</center>
</td>

<td>
<table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=1>
<tr>
<td style="height: 50px;">
<center>
<span style="font-size: 14pt;">menu bar</span>
</center></td>
</tr>
<tr>
<td>
<center>
<span style="font-size: 24pt; text-align: center;">
CONTENT
</span>
</center>
</td>
</tr>
</table>
</td>

</tr>
</table>

I'm having trouble controling the width of the first bolded table cell. This happens in IE9. I have it set to 200px, but for some reason it wants to be wider than that (I can tell because the text seems to be centering within the first 200px of its width, but it's not centered within the whole cell). I can fix this by specifying a % width (as in style="width: 25%;"), but I'd prefer to stay away from percentages. I can also fix the problem by specifying the width of the next cell (to its right, in bold above) to some specific value, but then this fixes the size of the whole table, and I would like to keep it variable.

Does anyone know why the width likes to increase to more than I specified, and if so, how do I fix this problem?

I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell...

anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE...

Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is:

HTML Code:

<table>
 <tr>
  <th rowspan=2 style="min-width=120px;">left column header</th>
  <th colspan=2 style="min-width=120px;">column 1 title</th>
  <th colspan=2 style="min-width=120px;">column 2 title</th>
 </tr>
 <tr>
  <td style="min-width=60px;">value1</td>
  <td style="min-width=60px;">value2</td>
  <td style="min-width=60px;">value1</td>
  <td style="min-width=60px;">value2</td>
 </tr>
 <tr>
  <td>row1 name</td>
  <td>row1 col1 value1</td>
  <td>row1 col1 value2</td>
  <td>row1 col2 value1</td>
  <td>row1 col2 value2</td>
 </tr>
</table>

So it should look a bit like this:
Code:

-------------------------------
|  120px  |  120px  |  120px  |
|         |---------|---------|
|         |60px|60px|60px|60px|
|---------|----|----|----|----|
|rowname1 |val1|val2|val1|val2|
|---------|----|----|----|----|
|rowname2 |val1|val2|val1|val2|
-------------------------------

there can be more rows with rowname, and more columns with the colspans...

now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers...

i'm using HTML 4.01 Strict by the way...

I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera.

At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted.

Here's the code - it doesn't get much simpler than this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1">

		<tr>
			<td width="15" height="33">a</td>
			<td>b</td>
			<td>c</td>
			<td width="15" height="33">d</td>
		</tr>
		<tr>
			<td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Appearance in Opera
Appearance in IE7
Appearance in Firefox (this is what I want it to look like in all browsers)

I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape.

The fix I found for IE was to use style="table-layout: fixed" for the table:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed">

		<tr>
			<td width="15" height="33">a</td>
			<td>b</td>
			<td>c</td>
			<td width="15" height="33">d</td>
		</tr>
		<tr>
			<td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels.

IE7 Appearance fixed

Here's my attempt at getting Opera to display it properly by mixing CSS and HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed">

		<tr>
			<td style="width: 15px; height: 33px" width="15" height="33">a</td>
			<td style="height: 33px">b</td>
			<td style="height: 33px">c</td>
			<td style="width: 15px; height: 33px" width="15" height="33">d</td>
		</tr>
		<tr>
			<td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Opera looks even worse now

This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue.

Please don't answer with - "dont use tables" or something silly like that

Thank you
-TableTrTd

im creatinh a box containing a text. The box must be wide enough to fill a text.

menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that?

Hi,

I'm working on an ecommerce website, my problem is that I cannot make some text in a cell wrap. Here's the details:

The text in this particular cell is page numbers, and it is dynamically generated, so it changes depending on what the user selects in the shop. For example, if they are viewing a category that only has a couple pages of product, it's fine. But if they are viewing a category that has a couple hundred pages of product, the page number goes out horizontal in a straight line, and obviously causes some serious horizontal scrolling. I've tried setting a fixed width for the cell both in the <td> with width="whatever" and that didn't work, I tried setting it in the stylesheet with CSS but it still breaks the table. I just want it to wrap down a line when it gets to a certain width. Any ideas?

I'm just getting into making pages again, after 3 years off I'm REALLY rusty!
Here is the code:

<div align="center">
<table border="0" width="635" height="490" cellspacing="0" cellpadding="0">
<tr>
<td height="43" width="635">
<img border="0" src="AURORENOVA.jpg" width="640" height="168"></td>
</tr>
<tr>
<td height="322" width="635">
<h1>Monday January 22nd 2007</h1>
<p>So here is the first update.</p>
</td>
</tr>
</table>
</div>

I just want to know how I can align the text in the cell to the top of the cell instead of having it hovering in the center. When I do add more text the position changes, but I just want it all to align to the top.

Thanks.

I have a cell text linked to a css stylesheet. the style for that "text" is as follows:

.text {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align:left
}

How do I align the text to the top of the cell rather than middle?

I have a site which I regularly update but rather than using a flat colour for some of the cells I am now using images as a cell background. This obviously has ramifications when putting text over the top cause the depth of colour means the text can be hard to read.
What I want to do is create a layer in the cell which means that the text sits on a opaque layer which is lighter than the background image.
My intended desired effect would be similar to what is at http://iankearns.dialnet.com/images/desired_effect.jpg or as attached but rather than doing this as an image I would prefer to do it as HTML or DHTML (is possible) as this would mean changing the text easier
Thanks to anyone who can assist

I am attempting to have a table cell that is outlined. No matter how much text ends up in that table cell, the top part should align to the top, and the bottom part should align to the bottom. The cell size/border needs to be consistent across the row (which is why I didn't just float some divs).

I have spent hours looking online, and have found various "solutions" that do not in fact seem to work.

Here is my 'sample' code. I know that the valign isn't working, I just put it in there so it makes sense "logically" what I am trying to do.

Thank you in advance for any help you can provide.

Code:

<table width="600">
	<tr>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    	<td style="border:1px grey solid; width:150px;">
        	<table valign="top">
            	<tr>
                	<td>Float at the top!Float at the top!Float at the top!</td>
                </tr>
            </table>
            <table valign="bottom">
            	<tr>
                	<td>Float at the bottom!</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

G'day guys,

This will probably be a simple one for you.

I have a table set to 150px, it has to be this width, and I need to have text indented in each cell. Trouble is, when the text wraps to the next line in the cell, it doesn't stay inline or indented.

How do I get the text to stay indented when it travels to the next line?

Thanks very much for any help you can give me.

Cheers,
Jamie

Hi, I can make basic websites but I am not very skilled in web design. I am in need of help.

Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images.

I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean...



I have included a zip file containing my html pages and image folder. Please download it he

http://homepage.ntlworld.com/stephan.../Portfolio.zip

The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website.

When you format some text in a table cell (at least with <p> or <li> tags), some browsers drop it down one line, so that it can't fully valign top. Apparently Safari and Firefox do this. (IE seems to not do it - it valigns it to the top). Others may exhibit this behaviour, but these are all I've tested. Here is an example (view with Safari or Firefox to see problem):
http://www.fisheyemedia.net/test/
Is there any way around this? Maybe with CSS? I have a more complex table in 2 columns and am trying to get vertical alignments to match. Thanks.

Hi,

In my site:

www.theticketsguide.com

I am trying to set the width of the text "This is a test. Sample content..." to only span about half the page. This is the code I have so far:

<font style="color: rgb(204, 204, 204);" size="6" width="440" ><span style="font-family: Arial,Helvetica,sans-serif;">This is a test. Sample content will go here. Sample content will go here. Sample content will go here.</span></font></h1>

The width function isn't working. What am I doing wrong?

Thanks,

Brandon