-
blogbus模板系列教程6---布局之实战表格布局 - [博客大巴代码教程]
2008年04月26日
实战表格布局
前面的教程中，我已经向大家简单地介绍了表格在布局中的作用以及表格的部分属性，但那些内容只是简单地说明，要想完全弄懂表格在HTML语言中的用法，还得靠长期的实战经验^_^。但我先声明一下，我下面的内容只是想让大家在以后的模板修改过程中，能够看懂模板代码的大体意思，并不能让你在几分钟内完全学会table的用法。
下面是代码部分：
<html>
<head>
<title>table&div</title>
</head><body>
<table border="1" width="100%">
<tr >
<td align="center" height="100px">这是第一行的单元格</td>
</tr>
</table><table width="100%" >
<tr>
<td><table width="30%" border="1" align="left">
<tr height="260px">
<td>这是左边的单元格</td>
</tr>
</table><table width="70%" border="1" >
<tr height="360px">
<td>这是右边的单元格</td>
</tr>
</table>
</td>
</tr>
</table><table width="100%" border="1">
<tr height="100px">
<td>这是底下的表格</td>
</tr>
</table></body>
</html>上面的代码中我已经用颜色标记把各个表格的代码区分开了。如果你还没有看过 教程5－－table 一节，请返回查看那节教程。当你看过那节教程后，再来看上面的代码，应该就不会太难了。红色部分标记的代码是HTML语言中经常遇到的代码，大家暂时可以不用去管它了。将上面的代码保存成为TableAndDiv.html之后，在浏览器中运行查看一下显示效果吧……
图片中红色标记部分，表示存在表格嵌套，但因为外围的表格边框没有设置，所以不会显示出边框。所谓的嵌套表格，就是说表格之中还套着表格，大家都能看得出来上面代码中的表格嵌套代码出现在什么地方吗？答案就在下面：
<table width="100%" >
<tr>
<td>
<table width="30%" border="1" align="left">
<tr height="260px">
<td>这是左边的单元格</td>
</tr>
</table>
<table width="70%" border="1" >
<tr height="360px">
<td>这是右边的单元格</td>
</tr>
</table>
</td>
</tr>
</table>我都已经用颜色把各部分代码区分开了，大家应该能看懂了吧。外围的表格只有一个简单的单元格，该单元格内放着两个不同宽度的表格（30%和70%），其中第一个表格中有一小段代码
<table width="30%" border="1" align="left">
红色加粗部分的代码，表示的意思是该表格 靠左对齐，相应的对齐方式还有靠右（align="right"）和居中对齐（align="center"）。好了，这节的实战教程就到这里了，最后再提醒大家一遍，本节的教程只要大家能够看懂就行了，不一定需要自己学会手写代码。因为表格的布局方法，用手写代码是件很费时的事，一般都是用专业的网页制作软件代劳。如果对本节教程有不懂的地方，请留言……
随机文章：
blogbus模板系列教程6---布局之div布局之路(1) 2008年04月26日blogbus模板系列教程5---table与div(2) 2008年04月26日blogbus模板系列教程4---熟悉bus的模板（2） 2008年04月26日blogbus模板系列教程3---熟悉bus的模板(1) 2008年04月26日blogbus模板系列教程2---模板风格与布局 2008年04月26日
收藏到：Del.icio.us
