韩顺平的校内网案例中的一个比较典型的table布局

代码如下：

<div class="profile">
<table><!--四行五列  -->
<tr>
<td rowspan="3" width="193px">
<img src="/xiaonei/images/userhead/u1.gif" width="150px" height="150px" /></td>
<td colspan="4" class="word2">三少爷</td></tr>
<tr>
<td colspan="4"><span class="word4" id="sudo">目前什么都没做!</span>
<a class="xh" href="javascript:void(0);" onclick="showDoing()">编辑</a>
</td></tr>
<tr>
<td width="83"><img src="/xiaonei/images/front/status.gif" />
<a class="xh" href="javascript:void(0);" onclick="showDoing()">改状态</a></td>
<td width="83"><img src="/xiaonei/images/front/blog.gif" />
<a class="xh" href="writeBlog.jsp">写日志</a></td>
<td width="83"><img src="/xiaonei/images/front/photo.gif" />
<a class="xh" href="addAlbum.jsp">传照片</a></td>
<td width="83"><img src="/xiaonei/images/front/share.gif" />
<a class="xh" href="">分享</a></td>
</tr>
<tr id="doing" style="display: none;">
<td colspan="5">
<input type="text" value="doing some thing.." id="udo" size="30" />
<input type="submit" value="提交" style="width: 60px" class="sub" onclick="fdoing()" />
<input type="button" value="取消" onclick="hiddenDoing()" class="button2" /></td>
</tr>
</table>
</div>

script代码：

<script type="text/javascript">
function showDoing() {
document.getElementById("doing").style.display = "";
}
function hiddenDoing() {
document.getElementById("doing").style.display = "none";
}
</script>

实现的table布局：

头像	昵称
	状态 编辑
	改状态	写日志	传照片	分享
这一行默认不显示，当点击“编辑”或“修改状态时显示”