We Keep Coding

put the image in the entire cell

I want to show multiple tables in a web page with header and the image displayed inside the table cell.
To achieve that i have created one table and used <div> tag to assign the width and height of the <td>.
Please find the code below
<table width="100%" height="100%"><tr><td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header1</header>
</section>
<img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
</div></td>
<td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header2</header>
</section><br><br>
<br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</div></td>
</tr></table>
I want to display that image in the whole cell of <td>. The header section should be displayed follwed by the image in the whole space. Please suggest what code do i need to add to make it work. Currently i could not able to set properly the image inside the border of the <td>. Or is there any good approach to achieve this.
jsfiddle:http://jsfiddle.net/4S6gR/103/
I want to achieve this using html/css.

After looking at you fiddle I think you meant you want the image to cover rest of the area in the cell other than header.
If so:
Check this Fiddle
Added a new div to cover the div, gave a height to the header 18px, as was rendered by browser and then gave height of 182px to the div containing image.

I want to display that image in the whole cell of td.
Forget img tags, there is a way easier way.
<td style="background-image:url('asd.jpg');">

you should use th instead of formatting inside td with div to create header, also you'll need to remove the height width from header
.mytable{
width:100%;
height:100%;
}
.mytable header{
background: gray;
text-align: center;
}
.mytable img, header{
width:200px;
}
.mytable td img{
display:block;
}
<table class="mytable">
<tr>
<th>
<section>
<header>Header1</header>
</section>
</th>
<th>
<section>
<header>Header2</header>
</section>
</th>
</tr>
<tr>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
</tr>
</table>

keep suggestion box div relative to input when zooming

I have this form in a table and one of the text inputs has a suggestion box. when the page is zoomed out to 90% the suggestion box div moves about 6 pixels down and right. is there any way to keep the div in the same position when zooming? thanks. here is a jsfiddle to demonstate
html:
table {
border:1px solid grey;
}
#box {
border:1px solid red;
width:150px;
position:absolute;
top:35px;
left:41px;
background-color:white;
}
<table>
<tr>
<td>one</td>
<td><input></td>
</tr><tr>
<td>two</td>
<td><input type = "button" id = "showBox" value = "click then zoom out"></td>
</tr>
</table>
<div id = "box" style = "display:none;">
<ul>
<li>now zoom out</li>
</ul>
</div>
javascript:
$('#showBox').click(function(){
$('#box').show();
});

I've updated your fiddle
Moved the box in the corresponding <td>. There is still some flickering though, but it's better than before. Hope it fits your standards :)

How to change table background onmouseover?

I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James

With :hover.
Sample:
http://jsfiddle.net/stKn3/

With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}

I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html

Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.

Auto max height table in table

<table id="one">
<tr>
<td>
<table id="two">
<tr><td>qqq</td> <td>www</td> </tr>
</table>
</td> <td>12 <br /> 34 <br />56 </td>
</tr>
<tr>
<td> </td> <td> aaa</td>
</tr>
<table>
#one td {
border: solid 1px red;
}
#two {
background-color: green
}
LIVE EXAMPLE: http://jsfiddle.net/QMQ3R/3/
I would like - td with qqq and www have auto max height in table#one tr td.
How can I make it? 12, 34, 56 are generated with PHP. There can be for example 10 BR

It's funny, set #one td and #two to height: 100% and it works in Firefox, not Chrome. Set an arbitrary number (like 1px) to #one td and it works in Chrome, not Firefox. Set the height on #one td to 0 and it works in Firefox and Chrome, not IE. That's hacky though and I don't like it. Here's the (hacky but working) example anyway:
http://jsfiddle.net/QMQ3R/8/
Nested tables SUCK, try not to use them. They aren't valid in HTML5. Also, don't duplicate IDs.

dynamically change css class using js

I'm having a problem while trying to dynamically change a table cell's styling class using JavaScript.
The following issue happens on FF, I opened the page on other browsers too and it worked fine.
I have a html page that contains a 4x4 table. I would like when I click on a cell, to zoom it in and when I click on it again to zoom it out. I defined 2 CSS classes, one for the normal size cell and one for the zoomed cell. I am using JS to change the CSS class when a cell is clicked.
The issue on FF is that when changing from zoomClass to normalClass all the cells to the right of the clicked cell are shifted to the right...
I can't find a solution or a workaround for this problem, if somebody has any ideas please post them here.
Next, I will attach the html, css and js files.
Thanks :)
util.js
function zoom(id) {
if (document.getElementById(id).className == "zoomClass") {
document.getElementById(id).className = "normalClass";
} else {
document.getElementById(id).className="zoomClass";
}
}
calendar.css
table, td, th, tr {
border-color:#D2D3D4;
border-style:solid;
border-width:2px;
}
#main_table {
border-spacing:1px;
height:450px;
margin-left:auto;
margin-right:auto;
position:relative;
top:30px;
width:850px;
}
td.normalClass {
padding:0;
font-size:4px;
color:#3333FF;
}
td.zoomClass {
display:inline;
position:absolute;
width:320px;
height:240px;
z-index:100;
font-size:18px;
}
test.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
<script type="text/javascript" src="js/util.js"></script>
</head>
<body>
<div>
<div>
<table id="main_table">
<tr>
<td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"></td>
<td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"></td>
<td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"></td>
<td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"></td>
<td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"></td>
<td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"></td>
<td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"></td>
<td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"></td>
<td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"></td>
<td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"></td>
<td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"></td>
<td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"></td>
<td id="17" onclick="zoom(17)" align="right" valign="top" class="normalClass"></td>
</tr>
</table>
</div>
</body>
</html>

Unfortunately "position" doesn't work on table cells. You could try putting a div inside the table cell and positioning that.
Edit: Something like this should do the trick:
td.normalClass div {
display: none;
}
td.zoomClass div {
display: block;
position: absolute;
width: 320px;
height: 240px;
}
Make sure the div is the first thing in the td and it'll be positioned at the td's top left corner. You might need to play with relative positioning on the td if you need to change the top and left values further.

This is how tables work. I possible I would try and do the same thing using divs and then you should be able to deal with the problem using position:absolute so the expanded div will overlay the others. This could work the same for a table cell.

A few comments on your code, if I may. I would keep the layout in the CSS file and not in the HTML, so I'd remove all of those align="right" and valign="top". Also, you can reference the cells in your table much more efficiently. Then you won't have to set the class for each cell.
#main_table td{
padding:0;
font-size:4px;
color:#3333FF;
}
I would also keep all of the behaviour of the page in a separate script file (Javascript). So no more onclick="zoom(x)" at every cell. You can use event binding to do that.
Also, if you use event binding, you can just "read" the id of the clicked cell, so you don't have to pass that value in statically in the call of the zoom function.
Lastly: I can highly recommend using jQuery to do this kind of DOM manipulation as it's a lot easier, the code is shorter and more readable and your scripts work across browsers pretty much out of the box.
I don't have a solution for this specific problem but using jQuery it's quite easy to insert a new DOM element, a div for instance, with the content of the clicked cell, float over the table and simulate the zoom effect. That div would be be absolutely positionable and can be styled a lot better than the cell the user clicked on.