[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:
</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:
</td>
=09
<!-- second Description -->
=09
<td>
</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>