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

HTML基础教程第二讲(Table标记)

2011/4/21 20:45:07
 
     table标记在html中是一个很常用的标记,基本限定文字的规范全用table,从字面意思我们可以知道,这个词是表格的意思,今天这一讲我们讲仔细讲解table的用法。

table的三个子标记,th,tr,td

      这三个标记中,我们只学习后两个,一个是tr,一个是td,我们需要记住的是tr代表行,td代表单元格,需要加深记忆的是,任何内容都应该出现在td标记之间,而不应该出现在tr或table之间,我下面画一个一行一列的表格:

#lt;table#gt;
  #lt;tr#gt;
      #lt;td#gt;这里是内容#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

这就是一个完整表格的具体代码,我们可以看到,table是一个大标记,他标识了我们行集合的开始和结束,一个表格是由多个行组成的,所以就出现了tr这个标记,tr永远都出现在table标记的里面,而td永远都出现在tr的里面。

我们看一下效果:

这里是内容


Ok,我们下面需要为上面这个表格增加一行,代码如下:
#lt;table#gt;
  #lt;tr#gt;
      #lt;td#gt;这里是第一行#lt;/td#gt;
  #lt;/tr#gt;
  #lt;tr#gt;
      #lt;td#gt;这里是第二行#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

怎么样,这样你就明白tr的用法了吧,如果你想再加一行的话那就再加一个#lt;tr#gt;#lt;td#gt;#lt;/td#gt;#lt;/tr#gt;就可以了。
效果如下:

这里是第一行
这里是第二行

如果我们再需要增加一列怎么办?

前面说了td是控制单元格的,那么我们只需要在每一行多加一个单元格,那就是多增加了一列,好的,代码如下:
#lt;table#gt;
  #lt;tr#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;

看了这个例子之后你就明白td的用法了吧,如果想再增加一列,那就在每一行后面再多加一个单元格就可以了。
效果如下:

这里是第一行第一列 这里是第一行第二列
这里是第二行第一列 这里是第二行第二列

border属性

      上面说到了表格的基本用法,为了让我们的表格更美观一些,我们需要增加一些修饰,稍后会讲解更多的属性,我们现在先从最简单的讲起,这里讲的第一个属性就是border属性,他的意思是边框,属性都是需要赋值的,所以我们的写法是这样的 border="1",我们用的时候需要加在table的标记里面,#lt;table border="1"#gt; 这就是他的用法了,不仅这个属性是这样用,以后我们学到的所有属性都是写在标记里面的,下面我们看一个例子,我需要画出一个边框是5的表格。

#lt;table border="5"#gt;
  #lt;tr#gt;
      #lt;td#gt;这里是内容#lt;/td#gt;
  #lt;/tr#gt;
#lt;/table#gt;

效果如下:

这里是内容

看起来有了一点美感,嗯,我们在把那个两行两列的也加一个大点的边框试试

效果如下:

这里是第一行第一列 这里是第一行第二列
这里是第二行第一列 这里是第二行第二列


bordercolor属性

          上面我们学的是border属性,是为表格增加边框,下面这个属性是为边框加颜色,用法如下:
#lt;table border="5" bordercolor="#009900"#gt;   下面要说说#009900这玩意了,这个是颜色的代码,记是记不住的,之前让大家装的Dreamweaver里面有这些数值,每一种颜色对应一种代码,把这些代码直接拿过来用就可以了,计算机中任何软件都通过的代码,在photoshop里面也是可以用的,如果你没有装Dreamweaver那就去photoshop里面找到颜色看看这个代码放到这里也是可以用的。

        当然,如果你英文好的话,用英文单词完全可以,比如:bordercolor="green"或bordercolor="red"等等。

下面看一个例子:

欢迎大家光临我的店铺
 

这样看起来就比之前好看多了,好了,我们每一讲尽量少讲一些内容,等消化完之后再进行下一讲,免得一次性看太多消化不了,之前的推广教程仿佛就有点这个意思了,导致很多人看了不是特别明白,所以我们吸取教训,这次从一点一滴慢慢讲起,一直讲到你会为止。

阅读: (840)  评论(8)  
 
网友评论:
 
 1.2016/6/1 3:37:06 
 2.2016/6/10 3:40:29 
 3.2016/6/16 13:44:09 
 4.2016/6/21 5:18:32 
 5.2016/6/25 16:03:40 
 6.2016/7/23 9:36:27 
 7.2016/11/11 21:14:08 
 8.2018/2/2 20:23:16 
 
相关文章:
 什么是微信公众帐号?
 怎样利用QQ群推广网店?
 如何寻找活跃的QQ群?
 网络广告的形式有哪些?
 淘宝站内搜索的一些排名靠前方法。
 什么是软文?怎样利用软文推广?
 网店推广之最准确定位客户的合作推广法
 简单的几句话可以总结我们成功的全过程
 网店推广之博客推广法
 网店推广之新浪博客免费广告推广法
 
 
     
联系作者: QQ: 657603425 Email: 657603425@qq.com
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842