Tables in an ordered list

[Lee Brotzman]

Hi,

I have a sequence of data tables in an ordered list, like this:

<ol>
<li><table>[table data]</table></li>
<li><table>[more table data]</table></li>
</ol>

However it renders on the page with the list item number next to the
bottom of the table, like this:

line 1 of table data
line 2 of table data
1. line 3 of table data

line 1 of more table data
line 2 of more table data
2. line 3 of more table data

What I want is the list item number next to the first line of table data,
not the last line. I've tried various vertical-align settings on the ol,
li, and table styles with no success. Any help would be appreciated.

Thanks,
Lee

[Jukka K. Korpela]

Re: Tables in an ordered list

Scripsit Lee Brotzman:

I have a sequence of data tables in an ordered list

That's technically possible, and one might say that it's a logical
structure, if the tables constitute a numbered sequence with nothing between
them. On the other hand, we don't usually use or see such constructs.
Instead, the tables may carry numbering in their captions or - in the case
of consecutive tables with the same column structure - the tables are
combined into one table.

As usual, a URL would make it possible to analyze what the best markup is.
From the styling viewpoint, we can just say that a numbered ("ordered") list
of tables is difficult to style, and if you want tables to appear as
numbered the way items are numbered in a normal <ollist, the practical
approach is to use some workaround like an outer table with numbers in one
column (as explicit data) and the data tables in another.

However it renders on the page with the list item number next to the
bottom of the table

That's somewhat unexpected, but apparently browsers treat the table as if it
were one big letter, and the number is vertically aligned to the baseline of
the "text".

What I want is the list item number next to the first line of table
data, not the last line. I've tried various vertical-align settings
on the ol, li, and table styles with no success.

I'm afraid the positioning of the list number (marker) is beyond the scope
of CSS as currently defined, since the marker properties in CSS 2.0 were not
implemented and are being phased out from the specifications.

But here's some ugly trickery (oh how I hate myself...) that seems to have
the desired effect on IE 7:
- put <brat the start of each <lielement, before the <table>
- use a negative margin corresponding to one line of text for the tables,
e.g.
body { line-height 1.2; }
li table { margin-top: -1.2em; }

(I guess the trick "works" by introducing an empty line at the start of the
list item.)

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[zzpat]

Re: Tables in an ordered list

Lee Brotzman wrote:

Hi,
>
I have a sequence of data tables in an ordered list, like this:
>
<ol>
<li><table>[table data]</table></li>
<li><table>[more table data]</table></li>
</ol>
>
However it renders on the page with the list item number next to the
bottom of the table, like this:
>
line 1 of table data
line 2 of table data
1. line 3 of table data
>
line 1 of more table data
line 2 of more table data
2. line 3 of more table data
>
What I want is the list item number next to the first line of table data,
not the last line. I've tried various vertical-align settings on the ol,
li, and table styles with no success. Any help would be appreciated.
>
Thanks,
Lee
>

Look at it the other way around. Instead of raising the numbers, try
lowering the table. You might try table {position: relative; top: ...

You'd have to put the table in another container to bring it back to
where it's supposed to be div {position: relative; top: -...

table {position: relative;
top: 60px;
}
td {border : 1px solid #ccc;
}
div {position: relative;
top: -60px;
}

<div>
<ol>
<li>
<table>
<tbody>
<tr>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<tbody>
<tr>
<td>4321</td>
</tr>
<tr>
<td>4321</td>
</tr>
<tr>
<td>4321</td>
</tr>
</tbody>
</table>
</li>
</ol>
</div>

Now that's a hack! ;-)

[Lee Brotzman]

Re: Tables in an ordered list

On Wed, 07 Feb 2007 17:28:14 +0200, Jukka K. Korpela wrote:

Scripsit Lee Brotzman:
>

>I have a sequence of data tables in an ordered list

....

As usual, a URL would make it possible to analyze what the best markup
is.

Sorry, but the application is not available to the public, so no URL.
It's a computer incident reporting system and the list of tables
represents the list of systems involved in the incident.

From the styling viewpoint, we can just say that a numbered ("ordered")
list of tables is difficult to style, and if you want tables to appear
as numbered the way items are numbered in a normal <ollist, the
practical approach is to use some workaround like an outer table with
numbers in one column (as explicit data) and the data tables in another.

Yeah, that's the way we're doing it now, using a incremental counter
generated on a JSP page. It just seemed that an ordered list was more
logical and clean.

But here's some ugly trickery (oh how I hate myself...) that seems to
have the desired effect on IE 7:
- put <brat the start of each <lielement, before the <table- use a
negative margin corresponding to one line of text for the tables, e.g.
body { line-height 1.2; }
li table { margin-top: -1.2em; }
>
(I guess the trick "works" by introducing an empty line at the start of
the list item.)

I'll give that a try, Thanks. And thanks for the additional information.

Lee

[BootNic]

Re: Tables in an ordered list

Lee Brotzman <leb@fuggettabo utit.orgwrote:

news: pan.2007.02.09. 04.39.28.57980@ fuggettaboutit. org
On Wed, 07 Feb 2007 17:28:14 +0200, Jukka K. Korpela wrote:

>Scripsit Lee Brotzman:

[snip]

Sorry, but the application is not available to the public, so no URL.
It's a computer incident reporting system and the list of tables
represents the list of systems involved in the incident.
>

Are there specific browsers for display?
[snip]

A vary basic example:

http://home.earthlink.net/~bootnic/OrderedTableList.html

browsershots:

http://browsershots.org/website/204475/

--
BootNic Friday, February 09, 2007 1:44 AM

All things come to him who waits - provided he knows what he is
waiting for.
*Woodrow T. Wilson*

[Johannes Koch]

Re: Tables in an ordered list

Lee Brotzman schrieb:

On Wed, 07 Feb 2007 17:28:14 +0200, Jukka K. Korpela wrote:

>As usual, a URL would make it possible to analyze what the best markup
>is.

>
Sorry, but the application is not available to the public, so no URL.

Then create a minimal example page showing your problem and post the URL
to this, as usual.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)