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.
