By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,121 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

?Ideal HTML markup to display record list

P: n/a
What would be the ideal HTML markup for the following list of records
(except table)?

Student-1:
Marks:
Math : 100
Science : 100
History : 100

Student-2:
Marks:
Math : 90
Science : 90
History : 90

Student-3:
Marks:
Math : 80
Science : 80
History : 80

what I tried:

<ol>
<li>
<h2>Student-1</h2>
<h3>Marks</h3>
<ul>
<li>Math : 100</li>
<li>Science : 100</li>
<li>History : 100</li>
</ul>
</li>
...
</ol>

Problem with the above:
The use of colon in the list (i.e, History : 100) looks weird

Any comments is highly appreciated. TIA

--
<?php echo 'Just another PHP saint'; ?>
Email: rrjanbiah-at-Y!com Blog: http://rajeshanbiah.blogspot.com/

Jun 15 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
In article
<11**********************@i13g2000prf.googlegroups .com>,
"R. Rajesh Jeba Anbiah" <ng**********@rediffmail.comwrote:
What would be the ideal HTML markup for the following list of records
(except table)?

Student-1:
Marks:
Math : 100
Science : 100
History : 100

Student-2:
You mean like a judge might wonder, where apart from jail, would
be the best place to keep a murdering thieving no-good low-down
criminal who has been caught and tried and convicted?

It is a table. There is the student, the subjects and the marks.
Are you trying to stop the students feeling hurt by comparisons
with their fellows by displaying the results in too easily read a
manner?

--
dorayme
Jun 15 '07 #2

P: n/a
On 15 Jun, 08:09, "R. Rajesh Jeba Anbiah"
<ng4rrjanb...@rediffmail.comwrote:
What would be the ideal HTML markup for the following list of records
(except table)?
Table is good! Why do you have a problem with it?

You have two or three levels of structure here: a list of students and
some structure for each student. For the students' marks, you're using
a two-dimensional grid-like structure of subjects and name/value
pairs. That "grid like" structure is very much a candidate for a
<table-- it's the simplest way to achieve "grids" in HTML + CSS.

That's a solution with a <tableper student. Another approach would
be one table overall, and probably using colspan on the student
"header" rows. Again, this is perfectly respectable web design.

If you _must_ avoid <table>s (and this is pointless, except as an
exercise), then you can still do it. Try something like this:

<ul class="students" >
<li>
<h2>Student-1</h2>
<h3>Marks</h3>
<ul class="marks" >
<li><span class="subject" >Math</span: <span class="result"
>100</span></li>
<li><span class="subject" >Science</span: <span
class="result" >100</span></li>
<li><span class="subject" >History</span: <span
class="result" >100</span></li>
</ul>
</li>
...
</ul>

You'd need to set widths on .subject, so as to get the marks table to
align correctly.

You could use CSS generated content and .subject:after to replace the
colon too, which is neat but not too widely supported by the browsers.
I'd probably do it that way - it's not crucial that all users see it.

Note that I've put classes on the <ul>

I'd also avoid <olin favour of <ul>. Add your own numbers explicitly
if you need them - generated numbers from CSS are rarely adequate for
anything.

You could make the HTML here more compact, at the cost of more
complexity and less flexibility. I wouldn't though, keep it simple,
even if that's a bit verbose.

Jun 15 '07 #3

P: n/a
R. Rajesh Jeba Anbiah wrote:
What would be the ideal HTML markup for the following list of records
(except table)?

Student-1:
Marks:
Math : 100
Science : 100
History : 100
....

As others have said, you have tabular data there. There seems to be some
misconception that tables are invalid, this is completely incorrect.
Tables are just fine, for tabular data. What is discourage, but not
"illegal" is using table as a framework to layout the whole page.

Got a table then use a table...

<table>
<tr>
<th>Student-1</th>
<th>Marks</th>
</tr>
<tr>
<td>Math</td>
<td>100</td>
</tr>
<tr>
<td>Science</td>
<td>100</td>
</tr>
<tr>
<td>History</td>
<td>100</td>
</tr>
</table>
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 15 '07 #4

P: n/a
On Jun 15, 2:44 pm, Andy Dingley <ding...@codesmiths.comwrote:
On 15 Jun, 08:09, "R.RajeshJebaAnbiah"
<ng4rrjanb...@rediffmail.comwrote:
What would be the ideal HTML markup for the following list of records
(except table)?

Table is good! Why do you have a problem with it?
<snip>

(Many thanks for everyone who is replied in this thread)

You cannot let it display like shopping sites' grid like iterface
(Instead of student DB, if you could think it like products DB with
product name, price, rank, etc)

<snip>
Note that I've put classes on the <ul>

I'd also avoid <olin favour of <ul>. Add your own numbers explicitly
if you need them - generated numbers from CSS are rarely adequate for
anything.
<snip>

I prefer <olover <ulas without CSS it provides, clean and
readable look, YMMV.

Thanks again.

--
<?php echo 'Just another PHP saint'; ?>
Email: rrjanbiah-at-Y!com Blog: http://rajeshanbiah.blogspot.com/

Jun 16 '07 #5

P: n/a
On Sat, 16 Jun 2007 00:50:52 -0700, "R. Rajesh Jeba Anbiah"
<ng**********@rediffmail.comwrote:
You cannot let it display like shopping sites' grid like iterface
Then use CSS
Jun 16 '07 #6

P: n/a
On Jun 16, 5:16 pm, Andy Dingley <ding...@codesmiths.comwrote:
On Sat, 16 Jun 2007 00:50:52 -0700, "R.RajeshJebaAnbiah"
<ng4rrjanb...@rediffmail.comwrote:
You cannot let it display like shopping sites' grid like iterface

Then use CSS
I suppose, you mean <olor <ulwith CSS--not <tablewith CSS

--
<?php echo 'Just another PHP saint'; ?>
Email: rrjanbiah-at-Y!com Blog: http://rajeshanbiah.blogspot.com/

Jun 16 '07 #7

P: n/a
On 16 Jun, 15:14, "R. Rajesh Jeba Anbiah"
<ng4rrjanb...@rediffmail.comwrote:
On Jun 16, 5:16 pm, Andy Dingley <ding...@codesmiths.comwrote:
On Sat, 16 Jun 2007 00:50:52 -0700, "R.RajeshJebaAnbiah"
<ng4rrjanb...@rediffmail.comwrote:
You cannot let it display like shopping sites' grid like iterface
Then use CSS

I suppose, you mean <olor <ulwith CSS--not <tablewith CSS
No, I mean to use CSS to style the <tableso that it's no longer like
"shopping sites' grid like iterface"

You could also use CSS to style a <ullist.

I don't understand your preference for <ol"as without CSS it
provides, clean and readable look" either. How much of a real problem
is lack of CSS support going to be to you? That's a pretty rare
problem these days.

Jun 18 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.