老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 网络营销相关 > 文章正文

HTML基础教程第三讲,单元格的合并和拆分

2011/4/21 20:59:06
 

      在上一章中我们介绍了table的简单用法,如何新建一个表格,如何多添加一列,如何多添加一行,以及如何改变表格的边框颜色,我们用到最多的三个标记分别是table标记,tr标记和td标记。如果对这三个标记还不太了解的话可以看一看上一讲的教程。

      今天我们主要讲解如何拆分单元格和如何合并单元格。

      今天我们将借助Dreamweaver这款软件来配合讲解我们所要学习的内容。

如何合并单元格?

      比如我们创建了一个表格,标记如下:

#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

        以上代码创建了一个两行三列的表格,顺便说一下 这个东西,在网页里我们需要加一个空格的时候需要用 而不是直接敲一个空格,否则浏览器是不认识的。

        以上表格的宽度为200,边框为1,如图:

     
     


         那么我如果我们想把第一行和第二行的第一个单元格合并就需要用到rowspan这个属性,我们看下图:

     
   


代码如下:
#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td rowspan="2"#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

我们只需要把第一行中第一列的单元格加一个rowspan="2",然后再把第二行第一列删除掉,第一列的单元格就合并了下一行的单元格。

以上的例子只是说明单元格之间行的合并,下面说一下列的合并。

还是拿前面的例子来说,如果我想把第一行的第二列和第三列合并,效果如图:

   
     


代码如下:

#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td colspan="2"#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

我们把第一行第二列加上了一个colspan="2",这样的话,这一列就跨度到了第三列,所以第三列的代码我们就可以删除了,结果就和上图一样,第二列和第三列合并了。

思考:如果我需要合并三列,四列或更多列应该怎么办?如果合并三行四行应该怎么办?

Dreamweaver做法

       如果我们有安装Dreamweaver那做这两个操作就非常简单了,我们首先新建一个页面,然后按下图操作:

点击文件--新建,然后选择右侧的html页面,确认,我们就新建一个html页面出来了,我的Dreamweaver是英文的,如果大家安装的话建议安装中文版的,不然对这个软件有点陌生。

新建一个页面我们会看到这样的页面:

上面分别有三种视图方式,第一种是代码第二个是代码和设计对半第三个是设计视图,我现在的页面是code,所以是代码视图,我们需要点击第三种视图(设计)上,会发现一片空白,然后我们点击工具栏上的表格工具,也可以点击插入--表格

然后会弹出一个对话框,我们在里面输入行和列,我选择三行三列:

点击Ok之后,我们会看到一个表格出现了:

这时候我们再点击代码视图就可以看到已经为我们创建好了现成的代码:

我们先不管这些代码,看设计视图,我们用鼠标选中这个表格,可以看到表格的四周出现了一些粗线,而且还出现了小方块,我们把鼠标放上去之后就可以拖动表格的大小高和宽了,如图:

而当我们选择两个单元格的时候:

这时我们看dreamweaver下面的工具栏:

这里有很多的属性,稍后我们会在制作公告栏代码中详细介绍,这里只告诉大家cell下面那两个小东西,就是我们刚才用的合并和拆分单元格工具,现在我已经选中了第一行第一列和第二行第一列,我点击那个长方形的小方块:

这时可以看到:

单元格已经被合并了,同理我们把右下角两列也给合并了:

以上讲解的是如何合并单元格,下面说一下拆分单元格,其实拆分单元格和合并是相对应的,对于你刚才合并的单元格,再次把colspan="2"和rowspan="2"属性删除掉从而把删除的代码加上去那就是合并,比如我们上面的例子,如果再把那个跨两列的单元格拆分成两列,那我们的表格就又还原回来了。

Dreamweaver做法

下面我需要把刚才合并的单元格再拆分回来,如图:

先把光标定位在需要拆分的单元格里:

然后点击合并单元格边上的拆分按钮:

这时候会出现一个对话框询问需要拆分成几行几列:

我选择两行,确定,如图:

然后同理,把下面那两个刚才合并的单元格再拆分回来,最后我们的表格就又恢复原样了:

      在上一章中我们介绍了table的简单用法,如何新建一个表格,如何多添加一列,如何多添加一行,以及如何改变表格的边框颜色,我们用到最多的三个标记分别是table标记,tr标记和td标记。如果对这三个标记还不太了解的话可以看一看上一讲的教程:HTML基础教程第二讲(Table标记)

      今天我们主要讲解如何拆分单元格和如何合并单元格。

      今天我们将借助Dreamweaver这款软件来配合讲解我们所要学习的内容。

如何合并单元格?

      比如我们创建了一个表格,标记如下:

#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

        以上代码创建了一个两行三列的表格,顺便说一下 这个东西,在网页里我们需要加一个空格的时候需要用 而不是直接敲一个空格,否则浏览器是不认识的。

        以上表格的宽度为200,边框为1,如图:

     
     


         那么我如果我们想把第一行和第二行的第一个单元格合并就需要用到rowspan这个属性,我们看下图:

     
   


代码如下:
#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td rowspan="2"#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

我们只需要把第一行中第一列的单元格加一个rowspan="2",然后再把第二行第一列删除掉,第一列的单元格就合并了下一行的单元格。

以上的例子只是说明单元格之间行的合并,下面说一下列的合并。

还是拿前面的例子来说,如果我想把第一行的第二列和第三列合并,效果如图:

   
     


代码如下:

#lt;table width="200" border="1"#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td colspan="2"#gt; #lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
    #lt;td#gt; #lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

我们把第一行第二列加上了一个colspan="2",这样的话,这一列就跨度到了第三列,所以第三列的代码我们就可以删除了,结果就和上图一样,第二列和第三列合并了。

思考:如果我需要合并三列,四列或更多列应该怎么办?如果合并三行四行应该怎么办?

Dreamweaver做法

       如果我们有安装Dreamweaver那做这两个操作就非常简单了,我们首先新建一个页面,然后按下图操作:

点击文件--新建,然后选择右侧的html页面,确认,我们就新建一个html页面出来了,我的Dreamweaver是英文的,如果大家安装的话建议安装中文版的,不然对这个软件有点陌生。

新建一个页面我们会看到这样的页面:

上面分别有三种视图方式,第一种是代码第二个是代码和设计对半第三个是设计视图,我现在的页面是code,所以是代码视图,我们需要点击第三种视图(设计)上,会发现一片空白,然后我们点击工具栏上的表格工具,也可以点击插入--表格

然后会弹出一个对话框,我们在里面输入行和列,我选择三行三列:

点击Ok之后,我们会看到一个表格出现了:

这时候我们再点击代码视图就可以看到已经为我们创建好了现成的代码:

我们先不管这些代码,看设计视图,我们用鼠标选中这个表格,可以看到表格的四周出现了一些粗线,而且还出现了小方块,我们把鼠标放上去之后就可以拖动表格的大小高和宽了,如图:

而当我们选择两个单元格的时候:

这时我们看dreamweaver下面的工具栏:

这里有很多的属性,稍后我们会在制作公告栏代码中详细介绍,这里只告诉大家cell下面那两个小东西,就是我们刚才用的合并和拆分单元格工具,现在我已经选中了第一行第一列和第二行第一列,我点击那个长方形的小方块:

这时可以看到:

单元格已经被合并了,同理我们把右下角两列也给合并了:


以上讲解的是如何合并单元格,下面说一下拆分单元格,其实拆分单元格和合并是相对应的,对于你刚才合并的单元格,再次把colspan="2"和rowspan="2"属性删除掉从而把删除的代码加上去那就是合并,比如我们上面的例子,如果再把那个跨两列的单元格拆分成两列,那我们的表格就又还原回来了。

Dreamweaver做法

下面我需要把刚才合并的单元格再拆分回来,如图:

先把光标定位在需要拆分的单元格里:

然后点击合并单元格边上的拆分按钮:

这时候会出现一个对话框询问需要拆分成几行几列:

我选择两行,确定,如图:

然后同理,把下面那两个刚才合并的单元格再拆分回来,最后我们的表格就又恢复原样了:

注意观察在你每一次操作的时候代码的变化

总结:这一章讲解的内容是为以后我们做出特别好的公告效果做铺垫,如果学的好的同学还可以为自己做个人主页,以后为自己做一个独立店铺,还可以设计出自己的个性店铺模板或为自己做一个独立网店。

还没有安装Dreamweaver的同学请在百度里搜索一下Dreamweaver下载一个安装上,简单好用,本人推荐一个下载地址:
http://www.duote.com/soft/639.html  下面连序列号都有的,下载下来直接用就可以了。

这一讲就讲到这里,有问题请留言。(老杂毛/文)

阅读: (4001)  评论(7)  
 
网友评论:
 
 1.Cheryl 2011/12/29 8:41:36 
强大!
 2.Brianne 2012/3/17 20:49:53 
有才!
 3.2016/7/11 23:15:22 
 4.2016/11/30 13:02:09 
 5.2017/12/29 18:45:27 
 6.2018/1/13 20:29:57 
 7.2018/1/28 23:47:49 
 
相关文章:
 什么是微信公众帐号?
 怎样利用QQ群推广网店?
 如何寻找活跃的QQ群?
 网络广告的形式有哪些?
 淘宝站内搜索的一些排名靠前方法。
 什么是软文?怎样利用软文推广?
 网店推广之最准确定位客户的合作推广法
 简单的几句话可以总结我们成功的全过程
 网店推广之博客推广法
 网店推广之新浪博客免费广告推广法
 
 
     
联系作者: QQ: 657603425 Email: 657603425@qq.com
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842