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 &#123;
border: 1px dashed #000;
&#125;
.tdborder1 &#123;
border: 1px solid #f00;
&#125;

.tdborder2 &#123;
border: 1px solid #00f;
&#125;

#tdoverflow1 &#123;
overflow: scroll;
&#125;
#tdoverflow2 &#123;
overflow: scroll;
&#125;
#tdoverflow3 &#123;
overflow: scroll;
&#125;
</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 &#123;
border: 1px dashed #000;
&#125;
.tdborder1 &#123;
border: 1px solid #f00;
&#125;

.tdborder2 &#123;
border: 1px solid #00f;
&#125;

#tbodyoverflow &#123;
height: 200px;
overflow: scroll;
&#125;
</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.