Forum Moderators: not2easy
Just a quickly to see if anyone can see how to do this? Ill post the images first then tell you what I'm trying to do.
<snip>
This is how I have the results of search displayed on a website I have created for a client. It uses nested tables so far, and looks different in FF IE etc etc. Some of the features dont work in IE, for example when someone runs the mouse over the <tr> the background colour lightens, and the dotted border becomes solid. As usual this only works in FF, so I have decided to see I can do this using CSS.
This next image is the HTML version, but i have shaded the individual <td>'s to show each cell.
<snip>
As you can see from the image, there is basically one large table containing everything. The content is nested in the 3 columns of the table.
The 1st column contains a thumbnail image (80px by 80px) which itself has a padding of 5px (so the height of the whole table is 90px).
The 2nd column has a nested table inside it which itself has 2 columns (the green and purple columns, each column having 5 rows of equal height (16px - this gives 5 rows @ 16px high = 80px in total). Again this table has a padding top and bottom of 5px.
The 3rd table is practically a duplicate of the 2nd column, just holding different data.
Can anyone see if what I am trying to do is achievable?
[edited by: encyclo at 12:15 am (utc) on Jan. 9, 2007]
[edit reason] no screenshot links please, see forum charter [/edit]
There is no table/CSS problem. The whole Zeldman thing has people thinking that tables are evil and incompatible with CSS, which is wrong. Even Zeldman and Meyers don't say this. They are simply saying that tables shouldn't be used as a page layout mechanism. In most cases, they are correct, but I do run into cases where I still need a table to control layout; just not that often.
Tables were designed to display data, and that seems to be what you are doing, so there isn't really a problem with that, unless you want to reflow or rework the presentation of your data a lot. Using lists and divs is a bit more difficult than using a table, so you need a good reason to use them for data presentation and tabulation.
Well, enough of the lecture. a <table> tag is a standard X/HTML element, and, as such, can be affected by CSS. You can apply most CSS effects and appearance controls to a <table> tag. You can give it borders, backgrounds, text alignment, etc. The only caveat is that you should strip out as much of the HTML inline formatting as possible when preparing a <table> for CSS control, like so:
<!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=utf-8" />
<title>Untitled</title>
</head>
<body>
<table cellpadding="3" cellspacing="0" border="1" align="center">
<tr valign="top">
<td align="left" width="100">Left Text</td>
<td align="center" width="100">Center Text<br />More Text</td>
<td align="right" width="100">Right Text</td>
</tr>
</table>
</body>
</html>
Would become something like this:
<!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=utf-8" />
<title>Untitled</title>
<style type="text/css">
/* <![CDATA[ */
html,
body
{
margin:0;
padding:0;
}table.test_table
{
margin-right: auto;
margin-left: auto;
border: 1px solid black;
}table.test_table td
{
width: 100px;
padding: 3px;
}table.test_table tr
{
vertical-align: top;
}td.lefty
{
text-align: left;
border-right: 1px solid black;
}td.centered
{
text-align: center;
}td.righty
{
text-align: right;
border-left: 1px solid black;
}
/* ]]> */
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="test_table">
<tr valign="top">
<td class="lefty">Left Text</td>
<td class="centered">Center Text<br />More Text</td>
<td class="righty">Right Text</td>
</tr>
</table>
</body>
</html>
That seems like a lot of extra work, but the control you experience is much greater. It can also wind up being a lot LESS text in large pages with repeating elements.
Many thanks for your reply. Yeah I understood what you said, or kindly put as your "lecture" lol...
I am currently using the methods you said with CSS styled tables etc, removing the width padding and style elements called in the <td> tags themselves.
My main gripe was that the screenshot I showed you, was as the table appears perfectly in Firefoz / Mozilla etc. And yes you may have guessed it, doesn't appear anything like that in IE. Main reason being that <tr> tags cannot be affected using the :hover classification in CSS. This is a main reason for looking at a different solution to "cracking this walnut".
Is it possible to use Javascript to affect the <tr> class / styling on a mouseover, or since it cant be done using the :hover method, does it also mean the <tr> cannot be affected at all?
<!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=utf-8" />
<title>Test</title>
<script type="text/javascript">
// <![CDATA[
function onMouseOverHandler(inRowID){
document.getElementById(inRowID).className = "active";
}
function onMouseOutHandler(inRowID){
document.getElementById(inRowID).className = "at_rest";
}
// ]]>
</script>
<style type="text/css">
/* <![CDATA[ */
html,
body
{
margin:0;
padding:0;
}table.test_table
{
margin-right: auto;
margin-left: auto;
border: 1px solid black;
}table.test_table td a
{
display:block;
width: 100px;
padding: 3px;
}table.test_table tr
{
vertical-align: top;
}table.test_table tr.at_rest td
{
background-color: #ccf;
}table.test_table tr.active td
{
background-color: #fcc;
}td.lefty
{
text-align: left;
border-right: 1px solid black;
}td.centered
{
text-align: center;
}td.righty
{
text-align: right;
border-left: 1px solid black;
}
/* ]]> */
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="test_table">
<tr id="tr_1" class="at_rest">
<td class="lefty"><a href="" onmouseover="onMouseOverHandler('tr_1')" onmouseout="onMouseOutHandler('tr_1')">Left Text</a></td>
<td class="centered"><a href="" onmouseover="onMouseOverHandler('tr_1')" onmouseout="onMouseOutHandler('tr_1')">Center Text<br />More Text</a></td>
<td class="righty"><a href="" onmouseover="onMouseOverHandler('tr_1')" onmouseout="onMouseOutHandler('tr_1')">Right Text</a></td>
</tr>
<tr id="tr_2" class="at_rest">
<td class="lefty"><a href="" onmouseover="onMouseOverHandler('tr_2')" onmouseout="onMouseOutHandler('tr_2')">Left Text</a></td>
<td class="centered"><a href="" onmouseover="onMouseOverHandler('tr_2')" onmouseout="onMouseOutHandler('tr_2')">Center Text<br />More Text</a></td>
<td class="righty"><a href="" onmouseover="onMouseOverHandler('tr_2')" onmouseout="onMouseOutHandler('tr_2')">Right Text</a></td>
</tr>
</table>
</body>
</html>
HOWEVER - IE7 does support it and it can be assigned to any element.
