Page 1 of 1
THEAD's, TFOOT's, & TBODY's, oh my!
Posted: Wed Feb 25, 2004 9:14 am
by zick
I was reading in an old HTML book that I have about THEAD's, TFOOT's, & TBODY's and it says that it's supposed to behave like framesets ... with the HEAD and the FOOT stationary at the top and the bottom of the page and a scrollbar for the BODY. Is my book outdated or am I going slightly mad? Or do browsers just not support this feature real well?
It'd really be cool if they worked a small project I'm working on ... thanks for anyone who can explain ...
Posted: Wed Feb 25, 2004 10:09 am
by markbeadle
Unfortunately your book looks into the future. At present I do not know of a browser that supports these features. I think most people on this board would wish browsers did as it is a common requirement.
Posted: Wed Feb 25, 2004 11:19 am
by no_memories
Here a roughed out table like what you described. Of course this is rough and to properly be marked up, you need to add other accessibility features to it.
Code: Select all
<table border="1">
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td height="100">Cell 1</td>
<td height="100">Cell 2</td>
<td height="100">Cell 3</td>
</tr>
</tbody>
</table>
And the scroll bar issue is not supported by Internet Explorer (WOW, that's a shock). You would need to probably insert an I-frame into the body with some type of java script. Arrg, then it complicates the whole thing that should be simple.
Posted: Wed Feb 25, 2004 4:12 pm
by tylerdurden
no_memories wrote:And the scroll bar issue is not supported by Internet Explorer (WOW, that's a shock).
Hmm. I never bothered with these features since I know that browsers are incompatible bastards, but which browser does support scrolling in tables? Thanks.
Posted: Wed Feb 25, 2004 4:46 pm
by uberpolak
Set up the cell like this:
Code: Select all
<td style="overflow: scroll;">stuff</td>
I think that works on the latest version of everything.
Note: The cell must have a set size, or it just keeps expanding with the contents, and you never see the effect.
Posted: Wed Feb 25, 2004 5:48 pm
by no_memories
The mystery deepens. I tried every combo of injected style too. Even with the cells being a set size, no go. This deserves some research on the W3C.
Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
<!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-US">
<head>
<title>Overflow Table</title>
<style type="text/css" media="screen">
.tableborder1 {
border: 1px dashed #000;
}
.tdborder1 {
border: 1px solid #f00;
}
.tdborder2 {
border: 1px solid #00f;
}
#tdoverflow1 {
overflow: scroll;
}
#tdoverflow2 {
overflow: scroll;
}
#tdoverflow3 {
overflow: scroll;
}
</style>
</head>
<body>
<table height="300" cellspacing="5" cellpadding="5" class="tableborder1">
<thead>
<tr>
<td class="tdborder2">Head 1</td>
<td class="tdborder2">Head 2</td>
<td class="tdborder2">Head 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="tdborder2">Foot 1</td>
<td class="tdborder2">Foot 2</td>
<td class="tdborder2">Foot 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td height="100" id="tdoverflow3" class="tdborder1">Cell 1<br><br><br><br><br><br><br><br>Cell 1<br><br><br><br><br><br><br><br>Cell 1</td>
<td height="100" id="tdoverflow3" class="tdborder1">Cell 2<br><br><br><br><br><br><br><br>Cell 2<br><br><br><br><br><br><br><br>Cell 2</td>
<td height="100" id="tdoverflow3" class="tdborder1">Cell 3<br><br><br><br><br><br><br><br>Cell 3<br><br><br><br><br><br><br><br>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Posted: Wed Feb 25, 2004 6:44 pm
by no_memories
Works in Mozilla. It would probably take a java or php script for it to work properly in I.E.
Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
<!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-US">
<head>
<title>Overflow Table</title>
<style type="text/css" media="screen">
.tableborder1 {
border: 1px dashed #000;
}
.tdborder1 {
border: 1px solid #f00;
}
.tdborder2 {
border: 1px solid #00f;
}
#tbodyoverflow {
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5" class="tableborder1">
<thead>
<tr>
<th class="tdborder2">Head 1</th>
<th class="tdborder2">Head 2</th>
<th class="tdborder2">Head 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="tdborder2">Foot 1</th>
<th class="tdborder2">Foot 2</th>
<th class="tdborder2">Foot 3</th>
</tr>
</tfoot>
<tbody id="tbodyoverflow">
<tr>
<td class="tdborder1">Cell 1<br><br><br><br><br><br><br><br>Cell 1</td>
<td class="tdborder1">Cell 2<br><br><br><br><br><br><br><br>Cell 2</td>
<td class="tdborder1">Cell 3<br><br><br><br><br><br><br><br>Cell 3</td>
</tr>
<tr>
<td class="tdborder1">Cell 1<br><br><br><br><br><br><br><br>Cell 1</td>
<td class="tdborder1">Cell 2<br><br><br><br><br><br><br><br>Cell 2</td>
<td class="tdborder1">Cell 3<br><br><br><br><br><br><br><br>Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Posted: Wed Feb 25, 2004 8:56 pm
by zick
no memories ... I think you bring up the best workaround available. To bad that feature doesn't work properly yet, it would be a cool way to eliminate frames from my repitiore. I'll be sad when that happens, though

. There like that faithful old dog that you should just take behind the woodshed, but can't bring yourself to do.
Posted: Wed Feb 25, 2004 11:34 pm
by no_memories
Thanx for the compliment.
Personally, IMO - and that doesn't make it the gospel, I think tables should be used for data tables.
Let css take over the markup with extended standards deep into CSS 3 and beyond.
Combined with PhP, the web will become an efficient and smooth xml based place. Most of it standardized and open source.
That's what I am about.