HTML快速入门5——不规则表格、表格背景、边框颜色

转自：http://blog.csdn.net/ysuncn/article/details/2214153

不规则表格

例子：

<table border=1>
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
<tr><td colspan=2>2,1 2,2</td><td>2,3</td></tr>
</table>

显示：

1,1	1,2	1,3
2,1 2,2		2,3

说明：
　　colspan是col span，=2意思是该格占两列。随后的<td>就变成第三列了。

　

例子：

<table border=1>
<tr><td>1,1</td><td rowspan=2>1,2<BR>2,2</td><td>1,3</td></tr>
<tr><td>2,1</td><td>2,3</td></tr>
</table>

显示：

1,1	1,2 2,2	1,3
2,1		2,3

说明：
　　rowspan和colspan完全类似，=2表示该格占两行。
注意第二行第一个td是2,1而第二个td就是2,3了，2,2被第一行的占去了。

　

　　然后大家很容易举一反三了，多么不规则的表格都可以画出来了。
不知道大家是如何设想来实现不规则表格的呢？（这是上课的思考题呦）
是不是觉得很奇妙，就这么简单的实现了！？

而且表格同样符合嵌套规则，比如：

<table border=1 width=100%>
<tr><td>
其他文字１
<table border=1 width=80% align=center>
<tr><td>标题一</td><td>标题二</td></tr>
</table>
其他文字２
</td></tr>
<tr><td>其他正文</td></tr>
</table>

显示：

其他文字１

标题一

标题二

其他文字２

其他正文

而且一般来说用表格嵌套更简单些，colspan,rowspan相对复杂一些。

　

 将border=0会隐藏表格线，就可以实现排版了，实际上象新浪网易这些站点的首页都是用表格排版的。

　

今天内容相对比较少，顺便再把表格的背景颜色讲一下

　

表格背景、边框颜色

例子：

<table border=1 bgcolor=yellow>
<tr><td>文字</td></tr>
</table>

显示：　

文字

聪明的学生马上又可以举一反三了，table有，那tr呢？td呢？
当然也有！

例子：

<table border=1>
<tr bgcolor=yellow><td>文字１</td><td>文字２</td></tr>
<tr><td bgcolor=red>文字３</td><td bgcolor=blue>文字４</td></td>
</table>

显示：

文字１	文字２
文字３	文字４

爱动脑筋的学生可能已经想过如何改变文字背景颜色的问题了。
实际上在引入style(我们会在比较后面讲述他)之前，
用表格几乎是唯一能改变文字背景颜色的方法。

上面的边框颜色显然不太好。可以改一改。

例子：

<table border=1 bordercolor=red>
<tr><td>文字</td></tr>
</table>

显示：

文字

　

练习题

　　尝试用新学的table属性，并结合以前学的，设计一些你想象中的简单的页面。

思考题

　　回顾一下已经学过的东西，想想你现在都可以做什么了？

　

　　基本的外表设计都讲到了，大家发现没有，直到现在所有学的似乎更象MS WORD的功能，而网上一些特有的东西似乎都没提到。

　　其实一点都不用奇怪，下一代的WORD很有可能直接用类似HTML的XML来保存文件。你该知道HTML一个重要的用途就是用简单的纯文本来表达复杂的界面。

　　下一课我们将接触WWW的核心——连接。

　

　

　　似乎今天的内容多了？不让大家交作业，可是学生们该反馈一些信息呀。
比如进度快了慢了？内容深了浅了？有什么感想感触？

　　我很想知道大家是在硬着头皮学，还是满怀着兴奋和激情？