Click here to get back home

HTML table header over cell borders
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
HTML table header over cell borders Grant Kelly 06-06-2007
Posted by Grant Kelly on June 6, 2007, 7:09 pm
Please log in for more thread options

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 |
+--------------------+


Posted by PDannyD on June 6, 2007, 7:16 pm
Please log in for more thread options

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.

Posted by Jukka K. Korpela on June 7, 2007, 1:47 am
Please log in for more thread options


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/


Posted by Andy Dingley on June 7, 2007, 6:06 am
Please log in for more thread options


> 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.



Posted by Jukka K. Korpela on June 7, 2007, 6:30 am
Please log in for more thread options


Scripsit Andy Dingley:

>> 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/


Similar ThreadsPosted
Add text to header cell September 5, 2005, 2:08 am
frozen/locked HTML table header December 15, 2006, 4:53 pm
Aligning content in table cell to top of cell April 26, 2007, 1:56 pm
diagonal line in HTML table cell May 13, 2005, 6:11 pm
How do I add table borders when they are not supported ? December 9, 2006, 1:48 pm
IE table cells: borders overlap at large font settings September 28, 2005, 3:32 pm
Table Cell November 18, 2007, 7:23 pm
table cell size July 21, 2004, 2:50 am
New Crossposted Div in table cell July 29, 2004, 5:42 am
Re: New Crossposted Div in table cell July 29, 2004, 6:38 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap