473,498 Members | 2,021 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Tables in an ordered list

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

Feb 7 '07 #1
5 14108
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/

Feb 7 '07 #2
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! ;-)
Feb 7 '07 #3
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
Feb 9 '07 #4
Lee Brotzman <le*@fuggettaboutit.orgwrote:
news: pa***************************@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/O...TableList.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*

Feb 9 '07 #5
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.)
Feb 9 '07 #6

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

Similar topics

33
3866
by: Jim Cobban | last post by:
I cannot get Netscape 4.79 to properly display the ordered list in the following fragment. <P>Get a specific portion of the date. Depending upon the value of index: <ol start=0> <li>complete...
3
19734
by: maricel | last post by:
Is there a way to list (using db2 command or catalogs) to list hierarchy of table parent & child relationship: 1) A list that shows which table should be deleted first,second,third... 2) A list...
210
10263
by: Christoph Zwerschke | last post by:
This is probably a FAQ, but I dare to ask it nevertheless since I haven't found a satisfying answer yet: Why isn't there an "ordered dictionary" class at least in the standard list? Time and again...
8
1648
by: Fuzzyman | last post by:
Sorry for this hurried message - I've done a new implementation of out ordered dict. This comes out of the discussion on this newsgroup (see blog entry for link to archive of discussion). See...
7
1999
by: onetitfemme | last post by:
Hi, for some reason Firefox is apparently inserting a new line somehow after some IPA symbols which I have written in their hexadecimal notation. Also, I would like to have two spaces by...
22
2334
by: bearophileHUGS | last post by:
>From this interesting blog entry by Lawrence Oluyede: http://www.oluyede.org/blog/2006/07/05/europython-day-2/ and the Py3.0 PEPs, I think the people working on Py3.0 are doing a good job, I am...
1
3310
by: rllioacvuher | last post by:
I need help with a program. I have implemented that following header file with an unordered list using one array, but i need to be able to use an ordered list and 2 arrays (one for the links and one...
1
2586
by: Magnus | last post by:
I'm testing walkthrough saving data to a Database (Multiple Tables). http://msdn2.microsoft.com/en-us/library/4esb49b4(VS.80).aspx In the famous Customer/Order example, I'm getting referential...
0
7121
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6993
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7197
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
7375
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5456
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
4899
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4584
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3088
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
1411
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

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.