How would you markup this?
Posted: 04 September 2008 05:11 AM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  91
Joined  07-04-2007

There’s always 10 ways to achieve the same thing in our jobs… quick straw poll - how would you markup the two lines of results after the calculate button (see image)?

Is it a data table?
Is it a paragraph with spans and a br?
Is it two paragraphs?
Maybe it’s even a definition list?

Don’t worry about the styling - I’m only interested in the semantics here grin

Image Attachments
quickQuote.png
Click thumbnail to see full-size image
Profile
 
 
Posted: 04 September 2008 05:42 AM   [ Ignore ]   [ # 1 ]  
Research Scientist
Avatar
RankRankRankRankRankRank
Total Posts:  6610
Joined  04-15-2006

Me personally I would go with a table. The data is tabular pretty much so that would be the best bet I think.

A <dl> is more for a list of terms and their definitions, much like a dictionary would be. You could style this up in many many different ways but I would personally go with a table seeing as you also look like you want the figures to be aligned to the right as well.

Just my thoughts though, I’m sure others will have other ideas on this.

Best wishes,

Mark

 Signature 

Full List Of Plugins Here!! (16)
 
Retrieve Statuses
Maximum Posts Reached
Neat Link
Redirect
Fetch URI

Profile
 
 
Posted: 04 September 2008 06:26 AM   [ Ignore ]   [ # 2 ]  
Lab Assistant
Avatar
RankRank
Total Posts:  220
Joined  02-01-2007

I’m with Mark. Tabular data = table.

 Signature 

Adam Wiggall.

Profile
 
 
Posted: 04 September 2008 06:35 AM   [ Ignore ]   [ # 3 ]  
Research Assistant
Avatar
RankRankRank
Total Posts:  381
Joined  03-01-2006

I’d actually consider using a definition list. Taken literally a <dl> would only be used for definitions, but its usage has been broadened to encompass all sorts of paired pieces of data where you have the term or attribute followed by a value usually separated (in print) with a colon or dash. Another common example of <dl> usage is for marking up dialogue and that’s not a ‘definition’ either.

 Signature 

John Faulds - Tyssen Design | Member of EE Pro Network

Profile
 
 
Posted: 04 September 2008 11:54 AM   [ Ignore ]   [ # 4 ]  
Lab Assistant
RankRank
Total Posts:  152
Joined  09-28-2002

I’d mark it up as a table, and make the total cost and commission table heads with a scope of row to improve accessibility.

<table>
    <
tr>
        <
th scope="row">Total cost:</th>
        <
td>&#163;1858</td>
    
</tr>
    <
tr>
        <
th scope="row">Commission:</th>
        <
td>&#163;100</td>
    
</tr>
</
table>

Profile
 
 
   
 
 
Post Marker Legend
New Topic New posts Hot Topic Hot Topic with new posts New Poll New Poll Moved Topic Moved Topic Sticky Topic Sticky topic
Old Topic No new posts Hot Old Topic Hot Topic with no new posts Old Poll Old Poll Closed Topic Closed Topic Announcement Announcements
Theme
Change Theme
Visitor Statistics
The most visitors ever was 1149, on July 16, 2007 09:33 AM
Total Registered Members: 65085 Total Logged-in Users: 38
Total Topics: 82223 Total Anonymous Users: 21
Total Replies: 441915 Total Guests: 227
Total Posts: 524138    
Members ( View Memberlist )
Newest Members:  BombermanhaimtuagocsadamVeNeaDoRHildegaardhrtrulzUNFORGIVEN IIIEmmanuelYanYanTomsB