[thelist] Marking up the right way

Thu Mar 24 03:26:26 CST 2005

Hello all,

I'm working on a sort of phonelist thing and I'm spending time thinking 
about how best to mark this thing up so it makes sense.

Some background: User will enter search criteria, system returns an 
abbreviated set of results (i.e. shows Name, Telephone, Title, Dept and 
Room) for each person in the result set. The user can then click on the 
name and it will open up and reveal extended information on that 
person.

So I'm thinking that although the result sets fall neatly  enough into 
table data, the expansion thing is problematic. At the moment I'm 
looking to replace the contents of the row with a single <td> which 
colspans the length. Inside that row I've put a <dl> which defines the 
person more closely.  Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
			@import url(test_layout.css);
		</style>
	</head>
	<body>

		<table id="tableResults" summary="This table holds the results which 
are returned after searching for people." border="1">

			<thead>
				<tr>
					<th>Favourites</th>
					<th>Name</th>
					<th>Extension</th>
					<th>Title</th>
					<th>Department</th>

					<th>Room</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>?</td>
					<td>Jim Bur</td>

					<td>5555</td>
					<td>Senior Lecturer</td>
					<td>Sports Science, Tourism &amp; Leisure</td>
					<td>xx</td>
				</tr>
				<tr>

					<td>?</td>
					<td colspan="5">
						<dl>
							<dt>Jim Ho</dt>
							<p>Send email, Save vCard</p>
							<dd>
								<dl class="personDetails">

									<span class="image">
										<dt>Image</dt><dd>[here]</dd>
									</span>
									<span class="left">
										<dt>Job Title</dt><dd>IT Support Specialist</dd>
										<dt>Ext</dt><dd>2222</dd>

										<dt>Dept</dt><dd>Computing Services</dd>
										<dt>Room</dt><dd>Rf34</dd>
									</span>
									<span class="right">
										<dt>Building</dt><dd>Ray</dd>
										<dt>Email</dt><dd>j.f.ho@</dd>

										<dt>Site</dt><dd>Main</dd>
										<dt>Username</dt><dd>jim</dd>
									</span>
								</dl>
							</dd>
						</dl>
					</td>

				</tr>
				<tr>
					<td>?</td>
					<td>Jim St</td>
					<td>1111</td>
					<td>Mobile Support Specialist</td>
					<td>Computing Services</td>

					<td>x</td>
				</tr>		
			</tbody>
		</table>

	</body>
</html>

Obviously it's not ideal, but it's not the worst solution. The question 
is that given there will be a change in the scope of the data being 
viewed by the user (less to more) is there a neater answer than the one 
above. The other one I've played with is to abandon tables and create 
everything as definition lists which carry more or less data. Maybe a 
nest of definition lists within an ordered list? I don't know - any 
thoughts would be appreciated at this point.

Justin