HTML - Add A Background Image With No Repeat Into Table Cell

Hi,

How can I set a background gradient for a cell in a table? (i.e., start colour:#222222; end colour:#000000) The size of the cell may vary so a tiled image wouldn't work.

Thanks.

OK I am so new to HTML I can't even spell it.

I have a industrial HMI the has some custom webpage features to it and I would like to learn how to build the attached Table. I am not looking for someone to do this for me I am looking for some pointers.

Here is a link to the device that I am going to use and a quick breakdown of how they do things. This statement that I fully understand, I am out of my knowledge base so that is why I am here "Although the HTML code will be explained or commented through this document, a basic understanding is required to create a proper web site."

http://www.redlion.net/Support/TechN...ace/TNOI33.pdf

I don't know what CSS is ? I got a few examples from all over the web some from http://www.quackit.com. and just can't figure out the layout and cell colors. I plan on changing the background color on the cell to the right of the descriptor depending on the cell value. Red if <100, Green >100

I would like to start with a cell layout that I can then link values to and from the HMI per the instructions in the Tech Note above. I have played with this device just basically copy and paste the above note I have gotten that working before.

Thanks for taking your time to at least read this post from a NOOB.

Okay, here's what I've got: two nested tables next to each other, both with two cells in them. The bottom cell on the left table is just a filler, and has a background image to complete the layout of the site -- however, since there's no content in it, it doesn't show up. Giving it a set pixel height makes it show up, but I can't do this, as the content in the other table changes. So, I need this cell (the bottom one on the left) to automatically size itself to whatever the other table is. A height="100%" attribute also doesn't work...

Help? Thanks. :]

Hello everyone,

I am trying to partially hide an image in a table cell. In other words, I don't want the part that is supposed to be hidden to show on the adjacent cells. How do I do that

Any help would be greatly appreciated.

I have an image I want to insert into a simple table Cell. My code is as follows:

<table>
<tr><td align ="left"> img src = "/modules/Quotes/cqilogo.gif"></td></tr>
</table>

When I access the page I get:

img src = "/modules/Quotes/cqilogo.gif">

I know the image is in the right place and it will work if I set it inside a paragraph.

What have I got wrong??

Thanks alot

Hi everyone. I need some help with one thing. However as it is for an ebay page, I cannot use the head tag.
I have seen it on ebay before so I know it can be done just not sure how.
Basically I need a table with a row of thumbnail images at the bottom and in the top of the table, there will be an enlarged image. When an thumbnail is either clicked on, or the mouse is placed over he image, a bigger image will be displayed in the top cell.
I cannot use anything in the head tag though as its ebay, like css or javascript
Thanks for any help received

I am trying to create a table with one cell that contains an image. The image must fill the table vertically from top to bottom. The same code works fine in Firefox, but in IE, it always leaves a gap on the bottom right after the image. Any ideas?

Here's the code:

<table width="100%" border="1" cellspacing="0" cellpadding="0" height="100" vspace="0" >
<tr valign="bottom" height="100" >
<td height="100" bordercolordark="000000" >
<img src="images/test.jpg" width="600" height="100" vspace="0" hspace="0" border="1">
</td>
</tr>
</table>

Thanks a bunch.

I've searched around quite a bit, read various articles and so-on and only really come to the conclusion that this is a lot harder than it should be!

What I have is a simple page for a PHP script, it has a little form for entering keywords, and displays an image above this form. Now, what I want to do is place these in a table, and have that table resize to fit the viewable area of the user's browser-window.

So, what I have is a table with three-rows: The title of the image The image itself The form for entering image keywords
Now, what I would like to do is have the image scale to fill the middle cell, which by default eats up all available space leftover by the form and title cells. However, this isn't happening, I enter a height of 100% for the image but it seems to be using some other container to get its height.

I'm generally well-versed in HTML, but this one has me stumped! Any help is appreciated, here is the basic HTML I'm using for what I had thought would be a simple page

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
		<meta name="author" content="Haravikk.com" />
		<title>Add keywords</title>

		<style type="text/css">
			body, html {
				height: 100%;
				margin: 0;
				text-align: center;
			}

			tr, td, textarea { width: 100%; }
			table {
				width: 99%;
				height: 100%;
				margin: 0 auto 0 auto;
			}

			table, td {
				border-width: 0;
				border-spacing: 0;
				padding: 0;
			}

			#image { height: 100%; }

			#tdTitle { height: 5%;  }
			#tdImg { height: 75%; }
			#tdForm  { height: 20%; }

			#formText { width: 100%; height: 75%; }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td id="tdTitle"><b>placeholder.png</b></td>
			</tr>
			<tr>
				<td id="tdImg">
					<img id="image" src="http://haravikk.com/placeholder.png" alt="" />
				</td>
			</tr>
			<tr>
				<td id="tdForm">
					<form action="keywords.php" method="post">
						<textarea name="keywords" id="fmrText"></textarea><br />
						<input type="submit" />
					</form>
				</td>
			</tr>
		</table>
	</body>
</html>

Now, I don't know if I could eliminate the table in favour of divs and do this, any suggestions to make the above html work, or to re-write it are welcome! The image provided is just to illustrate the problem

hi,
i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript.
i.e
if cell value is "late" then display that cell in red color
else
display the cell in green color
please help me.

Thanks ad Regards
Akash

I am trying to create a frame for a page content as shown in the attachment.

As you can see, each column has a pilaster (background which is not repeated) and actually a column which is repeated. Generaly I want to create a code which would work for a content of any length, so I want the columns to be repeated as many times as it is required automatically.

Here is what I tried to do. Of course, this does not work, otherwise I wont ask Do you have Ideas how to make it working?

HTML Code:

<table cellpadding=0 cellspacing=0 border="0">
<tr>
  <td colspan=3 style="background-image:url('top_beam.jpg');background-position:bottom;background-repeat:no-repeat;">
  </td>
</tr>
<tr>
  <td style="background-image:url('left_pilaster.jpg');background-position:right;background-repeat:no-repeat;">
  </td>
  <td rowspan=2>
	ACTUALLY THE CONTENT
  </td>
  <td style="background-image:url('right_pilaster.jpg');background-position:left;background-repeat:no-repeat;">
  </td>
</tr>
<tr>
  <td style="background-image:url('left_column.jpg');background-position:right;background-repeat:repeat-y;">
  </td>
  <td style="background-image:url('right_column.jpg');background-position:left;background-repeat:repeat-y;">
  </td>
</tr>
<tr>
  <td colspan=3 style="background-image:url('brick_floor.jpg');background-position:top;background-repeat:no-repeat;">
  </td>
</tr>
</table>

I'm new to the forum and hope i'm asking in the right place.

I have modified some code to break one image into seperate images and display them at different places on a page, but i would like to use one of the images as a background to a table, below is the code (excluding javascript) to seperate one item that i've called Logo and show it on it's own;

<body onload="crop('images/New_Logo.png', 'Logo', 0, 0, 960, 99); >

<div id="Logo" style="width:960px; height:99px; margin-bottom:20px;"></div>

I've tried different variations to show as background but it wouln't work, i was thinking along the lines of

<table background="Logo">
....
</table>

Hello Everyone. The problem I am having and always wanted to know the correct way is . When adding text within a table with a background image and if the text excedes the background image thus increasing the height of the table, the background image repeats. What I want to do is have a solid color repeat at the bottom of the image so the table does not break the image, I want the image not to Repeat but to take on that solid color and repeat that color through the bottom of the Table so I can add as much text as I need.

I appreciate any help. I know this is quite common when working with table.

Thank!

Hello everyone,

I'm new here and currently reaquainted with HTML as I'm trying to help out a friend with his website. I am trying to randomize a background image in a table and I can't seem to get anything to work. I have searched up and down this forum and others, have tried several scripts that seem to work for others, and I'm still at square one.

I most recently tried a script I found here on this forum with no success.

Here is my code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
...
<script type="text/javascript">
<!--

  var pic=new Array();
       pic[0]="img/home_back1.jpg";
       pic[1]="img/home_back2.jpg";
       pic[2]="img/home_back3.jpg";

  var num=Math.floor(Math.random()*pic.length);

window.onload=function() {
     document.getElementById('wrapper').style.backgroundImage='url('+pic[num]+')';
}

//-->
</script>


</head>

<table id="wrapper" width="955" height="600" align="center" border="0" cellpadding="0" cellspacing="0" >
...
...
...
</table>

</body>
</html>

If anyone has any insight as to what I may be doing wrong or how I can fix this it would be much appreciated as I'm pulling my hair out trying to get this to work. Thanks!

Unclejunebug

Hey all!

I would like to create a 3 row table with a background color in each row.

On the right side of the table I would like to display an image that sits on top of the background color and spans all 3 rows.

When I try to do this it seems that the row bg colors go OVER the image.

How can I get the image to sit on top of the 3 row bg colors?

I don't know any other way to do this but I'm definitely open to suggestions!
Thanks for any help!

This is the code I've been trying:
Code:

<TABLE cellpadding="0" width="200" cellspacing="0" border="0" style="
background-image:url(ask.gif); 
background-position: top right; 
background-repeat: no-repeat;">
   <tr  bgcolor="#FBE9D1">
      <td>&nbsp</td>
   </tr>
   <tr  bgcolor="#F7D5A7">
      <td height="20">ask a question</td>
   </tr>
   <tr  bgcolor="#FBE9D1">
      <td height="28">&nbsp;</td>
   </tr>
</TABLE>