不规则表格

例子:

<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>


其他文字1

<table border=1 width=80% align=center>
 <tr><td>标题一</td><td>标题二</td></tr>
 </table>


其他文字2

</td></tr>
 <tr><td>其他正文</td></tr>
 </table>

显示:

其他文字1


其他正文

标题一

标题二

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

 

html5 设置table的背景颜色_html5 设置table的背景颜色

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

 

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

 

表格背景、边框颜色

例子:

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

显示: 

文字

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

例子:

<table border=1>
 <tr  bgcolor=yellow><td>文字1</td><td>文字2</td></tr>
 <tr><td  bgcolor=red>文字3</td><td  bgcolor=blue>文字4</td></td>
 </table>

显示:

文字1

文字2

文字3

文字4

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

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

例子:

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

显示:

文字

 

练习题

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

思考题

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

 

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

简单的纯文本来表达复杂的界面。

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

 

 

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

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