[Mono-list] Team.html, suggested table layout

John BouAntoun John.BouAntoun@rogen.com.au
Fri, 11 Apr 2003 15:02:55 +1000


Guys, below is an approach that is a compramise between using css and =
tables.

Instead of the current nested tables it uses 1 table and a few =
width/row/cell tricks i learnt over the years.

Note that it is also commented and these can be removed.

JBA

<style type=3D"text/css">
	.BoldLabel
	{
		font-weight: bold;=20
		font-size: 12pt;
	}
=09
	.PersonEmail
	{=09
		font-size: 12pt;
	}
=09
	.FirstRow
	{
		background-color: #c3cda7;
	}
=09
	.DetailsRow
	{
		background-color: #f5f8e4;
	}
</style>
<table cellpadding=3D"1" cellspacing=3D"1" width=3D"100%">
	<!-- first line of the person details -->
=09
	<tr valign=3D"top" class=3D"FirstRow">
		<!-- first person's picture -->
	=09
		<td valign=3D"top" width=3D"10%">
			<!-- note white space after an image is significant, white space =
before isn't. This sometimes causes spacing problems -->
			<img align=3D"top" border=3D"0" height=3D"48" width=3D"48" =
src=3D"team/none.png" /></td>
	=09
		<!-- first person's name column and email-->
	=09
		<td width=3D"40%">
			<div class=3D"BoldLabel">Alan, Siu Lung Tam</div>
			<a href=3D"mailto:Tam@SiuLung.com" =
class=3D"PersonEmail">Tam@SiuLung.com</a>
		</td>
	=09
		<!-- second person's picture -->
	=09
		<td valign=3D"top" width=3D"10%">
			<!-- note white space after an image is significant, white space =
before isn't. This sometimes causes spacing problems -->
			<img align=3D"top" border=3D"0" height=3D"48" width=3D"48" =
src=3D"team/none.png" /></td>
	=09
		<!-- second person's name column and email-->
	=09
		<td width=3D"40%">
			<div class=3D"BoldLabel">Alp Toker</div>
			<a href=3D"mailto:alp@atoker.com" =
class=3D"PersonEmail">alp@atoker.com</a>
		</td>
	</tr>
=09
	<!-- location line -->
=09
	<tr valign=3D"top" class=3D"DetailsRow">
=09
		<!-- first person's location label -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Location:
		</td>
	=09
		<!-- first person's location -->
	=09
		<td>
			Hong Kong SAR, People's Republic of China
		</td>
	=09
		<!-- second person's location label -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Location:
		</td>
	=09
		<!-- second location -->
	=09
		<td>
			London, UK
		</td>
	</tr>
=09
	<!-- description line -->
=09
	<tr valign=3D"top" class=3D"DetailsRow">
=09
		<!-- first person's Description label -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Description: &nbsp;
		</td>
	=09
		<!-- first person's Description -->
	=09
		<td>
			Programmer-type dude
		</td>
	=09
		<!-- second person's Description  -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Description:  &nbsp;
		</td>
	=09
		<!-- second Description -->
	=09
		<td>
			&nbsp;
		</td>
	</tr>
=09
	<!-- tasks line -->
=09
	<tr valign=3D"top" class=3D"DetailsRow">
=09
		<!-- first person's task label -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Tasks:
		</td>
	=09
		<!-- first person's tasks -->
	=09
		<td>
			<ol type=3D"I">
				<li>ADO.NET</li>
				<li>Chinese encodings</li>
				<li>Misc bug fixes</li>
			</ol>
		</td>
	=09
		<!-- second person's tasks label -->
	=09
		<td valign=3D"top" class=3D"BoldLabel">
			Tasks:
		</td>
	=09
		<!-- second tasks -->
	=09
		<td>
			<ol type=3D"I">
				<li>Debian packaging</li>
				<li>Gtk# hacks</li>
				<li>Random fixes</li>
			</ol>
		</td>
	</tr>
=09
</table>