THEAD's, TFOOT's, & TBODY's, oh my!
Moderator: General Moderators
THEAD's, TFOOT's, & TBODY's, oh my!
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 ...
It'd really be cool if they worked a small project I'm working on ... thanks for anyone who can explain ...
-
markbeadle
- Forum Commoner
- Posts: 29
- Joined: Tue Dec 02, 2003 2:50 am
- Location: Aachen, Germany
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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.
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.
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>-
tylerdurden
- Forum Commoner
- Posts: 66
- Joined: Mon Jul 28, 2003 11:52 am
- Location: Austria
Set up the cell like this:
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.
Code: Select all
<td style="overflow: scroll;">stuff</td>Note: The cell must have a set size, or it just keeps expanding with the contents, and you never see the effect.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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>- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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>
Last edited by no_memories on Wed Feb 25, 2004 10:25 pm, edited 1 time in total.
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.
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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.
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.