473,326 Members | 2,061 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

HTML table header over cell borders

I'm wondering if it's possible within HTML markup (or possibly CSS) to
specify that an HTML table's headers should be placed 'over' the cell
borders rather than 'within' the cells.

For example (requires monospace font):

Default:
+--------------------+
| H1 H2 H3 |
+--------------------+
| C1 | C2 | C3 |
+--------------------+

Desired:
+--------------------+
| H1 H2 |
+--------------------+
| C1 | C2 | C3 |
+--------------------+

Jun 6 '07 #1
17 5812
Grant Kelly wrote:
I'm wondering if it's possible within HTML markup (or possibly CSS) to
specify that an HTML table's headers should be placed 'over' the cell
borders rather than 'within' the cells.

For example (requires monospace font):

Default:
+--------------------+
| H1 H2 H3 |
+--------------------+
| C1 | C2 | C3 |
+--------------------+

Desired:
+--------------------+
| H1 H2 |
+--------------------+
| C1 | C2 | C3 |
+--------------------+
One way would be to make C1, C2 and C3 have a COLSPAN of 2 and give H1 and
H2 a COLSPAN of 2 as well but include a single table cell at the beginning
and end of the header row.
Jun 6 '07 #2
Scripsit PDannyD:
Grant Kelly wrote:
>I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.
- -
One way would be to make C1, C2 and C3 have a COLSPAN of 2 and give
H1 and H2 a COLSPAN of 2 as well but include a single table cell at
the beginning and end of the header row.
You don't need dummy cells. Instead, you could write:

<table>
<tr><th colspan="3">A</th><th colspan="3">B</th></tr>
<tr><td colspan="2">C1</td><td colspan="2">C2</td><td
colspan="2">C3</td></tr>
</table>

Some styling might be needed to position the A and B headers right above the
borders.

But what could possibly justify this confusion? It would not make it clear
what is a header for which, and it would confuse speech-based user agents
(at least unless you add some extra markup, with id and headers attributes).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 7 '07 #3
On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
I'm wondering if it's possible within HTML markup (or possibly CSS) to
specify that an HTML table's headers should be placed 'over' the cell
borders rather than 'within' the cells.
The only conceivable situation I can think of that justifies this as
reasonable semantic markup would be for three "states" in the cells
and two "transitions" between them in the headers. In that case I'd
use 5 columns, dummy cells and some colspan attributes. Verbose, but
jusifiable for most interpretations.

As a much simpler and pragmatic approach, I'd use two cells in the
header, colspan=2 on the second one and just use some left padding to
"offset" the headers away from their normal position. You might even
do it just by using text-align:right; on them and no colspan.
Jun 7 '07 #4
Scripsit Andy Dingley:
On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
>I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.

The only conceivable situation I can think of that justifies this as
reasonable semantic markup would be for three "states" in the cells
and two "transitions" between them in the headers. In that case I'd
use 5 columns, dummy cells and some colspan attributes.
I was not able to imagine _any_ situation where the idea would be backed up
with a semantic structure. Your imagination seems to be better than mine. In
the situation you describe, the logical structure would seem to consist of a
table with with five real columns - three for the states and two for
expressions (e.g., special symbols) that indicate transitions. In that case,
the heading cells would logically correspond to the transition indicators.

For the visual presentation, the heading cells might have colspan="3",
making the table a 6-column table in markup, so that the middle state column
is actually split into two columns. This would somewhat mess things up.

But maybe we should wait for a URL.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 7 '07 #5
On 7 Jun, 11:30, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
For the visual presentation, the heading cells might have colspan="3",
making the table a 6-column table in markup, so that the middle state column
is actually split into two columns.
I considered that, but couldn't justify splitting the central data
column in two. Stretching the headers (one-off) seemed less ugly than
splitting the (probably multiple) data rows, and certainly less ugly
than splitting only one data cell of the three.
This would somewhat mess things up.
Indeed

Jun 7 '07 #6
Jukka K. Korpela escribió:
Scripsit Andy Dingley:
>On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
>>I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.

The only conceivable situation I can think of that justifies this as
reasonable semantic markup would be for three "states" in the cells
and two "transitions" between them in the headers. In that case I'd
use 5 columns, dummy cells and some colspan attributes.

I was not able to imagine _any_ situation where the idea would be backed
up with a semantic structure.
Perhaps the OP wants something like a timetable:

+-----------------------------+
| 12:00 13:00 |
+-----------------------------+
| Meeting | Lunch | Meeting |
+-----------------------------+

Regards.
--
Manuel Collado - http://lml.ls.fi.upm.es/~mcollado

Jun 7 '07 #7
In comp.infosystems.www.authoring.html message <y6R9i.174892$v31.101361@
reader1.news.saunalahti.fi>, Thu, 7 Jun 2007 13:30:14, Jukka K. Korpela
<jk******@cs.tut.fiposted:
>On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
>>I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.
>I was not able to imagine _any_ situation where the idea would be
backed up with a semantic structure.
Look up "Critical Table", where that is in effect a single noun rather
than an adjective applied to a noun. Examples can be found in old
printed sets of mathematical tables.

In a critical table, entries in the indexing row/column need to be half-
way between entries in the indexed row/column[s].

Default <dl<dt<ddgive about the right effect, but only vertically;
and they are semantically inappropriate.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Delphi 3? Turnpike 6.05
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/&c., FAQqy topics & links;
<URL:http://www.bancoems.com/CompLangPascalDelphiMisc-MiniFAQ.htmclpdmFAQ;
<URL:http://www.borland.com/newsgroups/guide.htmlnews:borland.* Guidelines
Jun 8 '07 #8
On Jun 7, 4:03 am, Manuel Collado <m.coll...@see-
signature.ls.fi.upm.eswrote:
Jukka K. Korpela escribió:
Scripsit Andy Dingley:
On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
>I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.
The only conceivable situation I can think of that justifies this as
reasonable semantic markup would be for three "states" in the cells
and two "transitions" between them in the headers. In that case I'd
use 5 columns, dummy cells and some colspan attributes.
I was not able to imagine _any_ situation where the idea would be backed
up with a semantic structure.

Perhaps the OP wants something like a timetable:

+-----------------------------+
| 12:00 13:00 |
+-----------------------------+
| Meeting | Lunch | Meeting |
+-----------------------------+

Regards.
--
Manuel Collado -http://lml.ls.fi.upm.es/~mcollado

Yes, pretty close here. The application is an online version of this
form:
http://www.nws.noaa.gov/om/coop/forms/b-91.PDF
which is used for reporting the hours in which precipitation occurred.
The hours are above the cell borders, rather than above the cells.
However, having an hour over a cell also makes sense to me. If there
is not a clean, standard way to specify this in HTML, then I will just
say it's not possible.

Thanks for everyone's input.

Jun 12 '07 #9
On Tue, 12 Jun 2007, Grant Kelly wrote:
The hours are above the cell borders, rather than above the cells.
However, having an hour over a cell also makes sense to me. If there
is not a clean, standard way to specify this in HTML, then I will just
say it's not possible.
Depends on what you call "clean". What you can do is to define twice as
many columns and coalesce two and two of them with a "colspan" attribute":
in the headline 1,2,2,1, and in the other rows 2,2,2.

--
Helmut Richter
Jun 13 '07 #10
Grant Kelly wrote:
On Jun 7, 4:03 am, Manuel Collado <m.coll...@see-
signature.ls.fi.upm.eswrote:
>Jukka K. Korpela escribió:
>>Scripsit Andy Dingley:
On 7 Jun, 00:09, Grant Kelly <gke...@gmail.comwrote:
I'm wondering if it's possible within HTML markup (or possibly CSS)
to specify that an HTML table's headers should be placed 'over' the
cell borders rather than 'within' the cells.
The only conceivable situation I can think of that justifies this as
reasonable semantic markup would be for three "states" in the cells
and two "transitions" between them in the headers. In that case I'd
use 5 columns, dummy cells and some colspan attributes.
I was not able to imagine _any_ situation where the idea would be backed
up with a semantic structure.
Perhaps the OP wants something like a timetable:

+-----------------------------+
| 12:00 13:00 |
+-----------------------------+
| Meeting | Lunch | Meeting |
+-----------------------------+
Love a challenge, just one extra element, a nested DIV:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Centered TH's</title>

<style type="text/css">
* { color: black; background-color: white; }
table { border-collapse: collapse; border: 2px solid black; }
th, td, th div { width: 6em; text-align: center; }
td, th { border: 1px dotted black; }
th div { position: relative; left: 3em; }
</style>

</head>
<body>
<table>
<tr>
<th><div>12:00</div></th>
<th><div>13:00</div></th>
<th><!-- unused --></th>
</tr>
<tr>
<td>Meeting</td>
<td>Lunch</td>
<td>Meeting</td>
</tr>
<table>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 13 '07 #11
On 13 Jun, 15:54, "Jonathan N. Little" <lws4...@centralva.netwrote:
Love a challenge, just one extra element, a nested DIV:
....And setting the explicit width too 8-( I can't see any better
way, but that doesn't make me like it any better.

Jun 13 '07 #12
Andy Dingley wrote:
On 13 Jun, 15:54, "Jonathan N. Little" <lws4...@centralva.netwrote:
>Love a challenge, just one extra element, a nested DIV:

...And setting the explicit width too 8-( I can't see any better
way, but that doesn't make me like it any better.
Yep, unfortunately I cannot see a way to offset the DIVs easily. But in
most applications it might not be a problem...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 13 '07 #13
Scripsit Grant Kelly:
Yes, pretty close here. The application is an online version of this
form:
http://www.nws.noaa.gov/om/coop/forms/b-91.PDF
which is used for reporting the hours in which precipitation occurred.
First of all, an attempt to imitate a printed form in an HTML document is a
bad idea. The medium is very different, especially in a form. That
particular form requires much more horizontal space than reasonable on
typical screens.

Printed forms suffer from accessibility problems. How do you fill out one if
you are blind or have difficulties in the motorics of hands? An HTML form,
despite all the primitiveness and drawbacks, can be much more accessible.
The hours are above the cell borders, rather than above the cells.
I find that confusing. The hours aren't even placed right above the borders
(and such placement would be rather difficult in an HTML document too).
However, having an hour over a cell also makes sense to me.
It makes much more sense and is more common. Moreover, it at least makes it
possible to associate the hours with the cells in HTML markup in a manner
that can, in principle, be utilized by speech browsers.

But it's questionable whether the whole idea in the form is a good one, from
the viewpoint of filling out the form in an easy and accessible way. Instead
of having many cells to be filled out with letters or left unfilled, it
would be more natural and more accessible to type in hours or ranges of
hours and letters.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 13 '07 #14
On 13 Jun, 21:05, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
First of all, an attempt to imitate a printed form in an HTML document is a
bad idea. The medium is very different, especially in a form.
"Printed forms" are a great idea, as there's a large commercial market
for doing it. Even as a print-only medium that's never going to be
looked-at on screen, HTML+CSS is often easier to generate than PDF
etc. and is a viable choice for many business processes looking for a
way to dynamically create paper forms.

The crucial aspect is the "printed" part. Once you accept that, then
you implicitly accept the acceptability of a whole number of
limitations around physical rendering. In particular, absolute
positioning in cm units is now a sensible technique to use -- you're
going straight to a printed page of known size.

The OP's problem though is different, and significantly so. They have
a "form" and not a "printed form". Any of us could do it trivially for
print-only work by using absolute positioning. The hard part is to
achieve the required results _and_ simultaneously to be a fluid
design, as is usual good practice for generalised HTML targetted at a
broad and unknown range of user agents.

Jun 14 '07 #15
Scripsit Andy Dingley:
"Printed forms" are a great idea, as there's a large commercial market
for doing it.
Non sequitur. They were a great idea once. There is still market for them,
during a (longish) transition period. But there's nothing great in the idea
of printing a form on paper, filling it out with a pen, sending it
somewhere, and someone typing in the data in a data processing system (with
no way of checking what is really meant), when automation can make things so
much easier, cheaper, and more reliable.
Even as a print-only medium that's never going to be
looked-at on screen, HTML+CSS is often easier to generate than PDF
That's comparable using a hammer as a toothbrush just because you have a
hammer and cannot use a real toothbrush.
The crucial aspect is the "printed" part. Once you accept that,
I don't. Especially in the context of HTML authoring for the WWW, which is
what we discuss here, the idea is pointless. If printed forms are still
needed, they should be created by people who are competent in such matters,
using tools that are suitable for the purpose.
The OP's problem though is different, and significantly so. They have
a "form" and not a "printed form". Any of us could do it trivially for
print-only work by using absolute positioning.
No, it's far from trivial. How do you find the horizontal midpoint of a
digit or a pair of digits so that you can position it right above a specific
vertical line? But this has nothing to do with HTML. It suffices to say that
if you wanted to try to achieve that in an HTML document using CSS, you
would need contrived markup that causes serious accessibility problems.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 14 '07 #16
On Thu, 14 Jun 2007 17:18:18 +0300, "Jukka K. Korpela"
<jk******@cs.tut.fiwrote:
>Scripsit Andy Dingley:
>"Printed forms" are a great idea, as there's a large commercial market
for doing it.

Non sequitur.
Not at all. There _is_ a market, I can get paid money to serve it.

Maybe this market is entirely due to crazy Luddites, but their money has
no smell either.

>But there's nothing great in the idea
of printing a form on paper, filling it out with a pen, sending it somewhere,
Of course not. Unles someone is already going to do it anyway, and you
sell pens and ink.
>Even as a print-only medium that's never going to be
looked-at on screen, HTML+CSS is often easier to generate than PDF

That's comparable using a hammer as a toothbrush just because you have a
hammer and cannot use a real toothbrush.
PDF is a pretty nasty toothbrush though. I understand HTML, I certainly
don't understand PDF. I never have any idea how big a file it's going to
produce, or whether something will find itself rendered as vector art or
bitmaps (today I was making database ERDs into PDFs, so this mattered).
I can throw stuff into XSL:FO and then FOP as good as the next, but I
still don't like what comes out of the end of Bismarck's sausage
grinder.

Nor do I like PDF viewing tools. I can't print more than half of them
double sided, because the very expensive Adobe tools can't talk to the
very expensive Sharp copier with the double-sided feed and stapler if
it's Tuesday, a high tide or if Sooty is in the House of Aquarius.

>The crucial aspect is the "printed" part. Once you accept that,

I don't. Especially in the context of HTML authoring for the WWW, which is
what we discuss here,
We discuss what the OP posted. Maybe he shouldn't post his somewhat
print-related issue to a "www" group, but he did. So now, for the
purposes of this problem, we talking about how to solve a simpler
specific case where we're already working on paper of known size
If printed forms are still
needed, they should be created by people who are competent in such matters,
using tools that are suitable for the purpose.
Maybe you don't reckon yourself competent to do this, I just take the
money of those who find me perfectly satisfactory for doing it.

You don't have to get it right, you have to get it _paid_.
>No, it's far from trivial. How do you find the horizontal midpoint of a
digit or a pair of digits so that you can position it right above a specific
vertical line?
Absolute position a centred box over it and use centred text alignment.
We can still let the client user agent worry about the font rendering
problem.

>you would need contrived markup that causes serious accessibility problems.
So you advocate PDF instead? A format with proprietary readers that
still can't get page-by-page reading to work right, after 10 years of
trying.

--
Cats have nine lives, which is why they rarely post to Usenet.
Jun 14 '07 #17
Scripsit Andy Dingley:
We discuss what the OP posted.
The topic of this group is HTML authoring for the WWW. Within that field, we
discuss what we like. Of course there are people who babble about other
things (and tend to get wrong advice on them), but we can ignore them.
>you would need contrived markup that causes serious accessibility
problems.

So you advocate PDF instead?
Where did I say anything like that? I wrote that on the web, we should use
forms designed for the web, to be filled out on screen and then submitted.
If, however, you need a signed form, make a PDF version and a Word version,
but that's off-topic for this group. What's on-topic is the observation that
HTML is very poor and clumsy for printable forms (and was never meant for
them).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 14 '07 #18

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: James Smith | last post by:
How do I get rid of a table border? This is more a HTML question but I recon some one here would know. I have used a table in the design of my page, I have a top logo, but it has a line that...
7
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
21
by: BT | last post by:
I inherited a simple page that needs to be Strict HTML and I'm not very familiar with this standard. What I'm trying to do _should be_ pretty simple so I hope someone can point me in the right...
2
by: googley | last post by:
I'm starting a new thread for a problem that I ran into.. I'm trying to use STYLE SHEETS/CSS to update multiple table widths across many pages. I did get it working with one small problem that...
4
by: Konrad Viltersten | last post by:
As it isnow i have to use a syntax for my tables as: <table class = "some" border> and/or <table class = "some" noborder> Now, what i'd like to do is to make that border-thingy...
0
by: landon.chelf | last post by:
I'm working with a RichTextBox control and am loading the following rtf into it. {\rtf1\ansi\deff0 {\fonttbl {\f0\fswiss Arial;} } \deflang1033\plain\fs20 {\pard...
3
by: Peter Kellner | last post by:
I've got my problem down to a very simple example that shows it. Basically, I have an html table in a header file, and an html in my body. Both have the same width, and the same number of columns....
10
by: phil-news-nospam | last post by:
I have a table with 3 columns in 1 row. I want to increase the spacing _between_ the columns (gutter) _without_ increasing the spacing between those columns and the table itself. Is there a way...
2
by: Albin | last post by:
Hi, I have a html page where in the table spans for two pages the first page's last row doesn end properly and the 2nd page's first row also isnt proper.The code i use is given below,the no of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.