在网页制作中,早期的网页比较喜欢用表格来进行页面布局,使得页面看上去也更整洁。在本文中,我们介绍的是一个用表格来布局的一个菜谱页面,效果如下:
可以看到,大体上,这是一个由五行三列的表格所构成的菜谱。所以,在初始设定时,我们可以把表格设成五行三列,然后再进行一些行和列的合并,就可以得到我们想要的效果。在本例中,我们将第一行的所有列合并,并将第一列的第二第三行合并,第一列的第四第五行合并。
代码如下:
<html>
<head>
<title>菜谱</title>
</head>
<body>
<table bordercolor=#E674FA cellspacing=0 height=180 align=center width=400px border=1>
<tr align=center><td colspan=3>星期一菜谱</td></tr>
<tr align=center><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒土豆</td></tr>
<tr align=center><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr align=center><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>
<tr align=center><td>海参鲍鱼</td><td>东坡肉<img width=70 src="dpr.jpg"/></td></tr>
</table>
</body>
</html>
表格的格式:
<table 属性=“属性值” 属性=“属性值” ...>align=center 表示居中
<tr></tr>表示行
<td></td>表示列
colspan="N" 表示将N列合并
rowspan="N"表示将N行合并