HTML - Tables..make 2nd Cell 100% Width?

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.

Hello,

I am having trouble converting the following example table into a nice tableless layout:
Code:

<table width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td><img src="./left_image.gif" border="0" /></td>
		<td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td>
		<td><img src="./right_image.gif" border="0" /></td>
	</tr>
</table>

The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this?

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...

hi guys, how do i move certain things left or right using tables and cell spacing.
this is the code im using so far but i cant see how i can position these components left or right horizontally. -

<style type="text/css">
ul {
margin: 10px;
padding:70px 0px;
list-style-type:none;
text-align:right;
}
ul li {
display: inline;

margin:20 20px;
}
ul a {
padding:4px 10px;
font-family:'trebuchet ms',sans-serif;
font-size:12px;
color:#000;
text-decoration:none;
}
ul a:hover {
border-color:#000;
color:#fff;
background-color:#c6c5c4;
}
</style>

thanks

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

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

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.

Not sure if I worded that right.
But I have a 3 column table with three rows.
And I want a row with no columns at the top that is the full width, so I can put a title in there. how do I do that?
Here is my current title.
Thank you.

Code:

<table id="box-table-b">
    <thead>
    	<tr>
        	<th width="175" scope="col">Website</th>
            <th width="69" scope="col">Lowest <br />
            Price</th>
            <th width="50" scope="col">BUY</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>xxxx</td>
            <td>x</td>
            <td><a href="#">Here</a></td>
        </tr>
        <tr>
        	<td>xxxxx</td>
            <td>x</td>
            <td><a href="#">Here</a></td>
        </tr>
    </tbody>
</table>

Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there!

I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest).

This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens.

So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here.

Code:

<BODY STYLE="margin-top: 0px; margin-left: 0px">
  <TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
    <TR HEIGHT=90>
      <TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
        &nbsp
      </TD>
    </TR>

    <TR HEIGHT=500>
      <TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
        <TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
          **Navigation menu on the left side goes here**
        </TABLE>
      </TD>
      
      <TD WIDTH=800 VALIGN="top">
        <DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
          **All code for the scrollable cell in the lower right goes here**
        </DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you!

Hey all.

This is my first post on this forum and I'm new to HTML and CSS, so please bear with me. I apologize if it's in the wrong forum.

I've got a problem with my HTML code (I combine HTML with CSS).

Imagine I have a navigation bar on the left that takes up 10 'em's. Just to the right of that navigation bar is the space that contains the actual content of the page (separated by <div id="actualcontent"> </div> tags.

Works just fine... till I define a table within that content tags. The table is almost always too large (a horizontal scroll bar appears) or too small. I want the table to fill exactly 100% of the width of the "<div id="actualcontent"> </div>" tags, not 100% of the width of the whole window (which would include the navigation bar).

Code:

 <table width="100%"> </table>

makes the table as wide as the window. Yet, I want it to be only as wide as its parent (the actual content).

I do not want to set the width to something like "80%" and HOPE that the size is okay and no horizontal scroll bar shows up. Because it could be too much or too less once the user resizes the window. However, if I specify the width in pixels or 'em's (in CSS) I'll have the same problem: I can never be sure that the table will fill out EXACTLY 100% of its parent, the width you specify seems to always be the width in relation to the whole window.

Is there a solution to my problem?

Thanks in advance ,
AvoC

Okay, there are probably a bunch of threads on this, but I do not know what to search for it.

What I am looking for is for my website, an iPhone version of a site, to start at the topleft instead of having the little indent type thing.

I did width="100%" but it just doesn't want to work.

Here is my test page http://iphone.auditoriumcrew.webuda.com/test.php
where you can see it has the spacing at the top, left, and right.

Here is the actual site, or what will be the actual site: http://iphone.auditoriumcrew.webuda.com/

All help appreciated,
Alex

Hi All,

Nice site BTW,

my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ?

Can anybody help me out
Thanks