zoukankan      html  css  js  c++  java
  • 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

    说明:
      colspancol 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

    说明:
      rowspancolspan完全类似,=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
    标题一 标题二
    其他文字2
    其他正文

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

     

     将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的功能,而网上一些特有的东西似乎都没提到。

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

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

     

     

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

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

  • 相关阅读:
    vue-cli router的使用
    vue element new vue const
    mac terminal update management pack
    关于MAC升级后,vim更新插件报错
    flex入门----基础知识
    常用的flex知识 ,比起float position 好用不少
    npm 安装nodesass 或者包含nodesass的脚手架工具报错问题
    anglar cli的 rxjs_1.of is not a function
    npm node sass 安装报错
    axios ajax fetch 区别
  • 原文地址:https://www.cnblogs.com/cugwx/p/3655121.html
Copyright © 2011-2022 走看看