（教学思路 HTML之四）表格的应用

   这节课我们来学习HTML中最重要的知识点表格的制作，之所以说它重要主要是因为在制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或者进行页面布局。在页面制作过程中要确定一个页面的布局，表格能将网页分成多个任意的矩形区域，表格在网页制作中是最常用的一种简单布局工具。这几课我们就来从以下几个方面学习表格:

       首先我们来学习一下 插入表格， 一个表格由<table>标记开始，</table>结束，这是在网页上插入一个表格，表格也是有行和列的，它的行是用<tr></tr>这对标记，没对标记代表一行，行中出现的单元标记就嵌套在<tr>标记中间，单元格的标记有两种<td>对和<th>对他们有什么区别呢？我们来看下面的例子：

      <table Border=1 align="center" width=300>

     <caption>学员明细表</caption>
        <Tr>
     <Th>姓名</Th>
    <Th>国籍</Th>
    <Th>口头禅</Th>
         </Tr>
<Tr align=right>
<Td>小新</Td>
<Td>日本</Td>
<Td>老婆</Td>
</Tr>
        </table>

   学员明细表

姓名	国籍	口头禅
小新	日本	老婆

      现在我们看这个表格，首先在table标记中出现了一个属性border=1，这是指边框的粗细，表格的边框还有其他是属性我们一会再讲，在table标记内部第一个出现的嵌套标记是表格的 标题标记<caption></caption>,我们可以在这对标记中间写表格的标题。我们主要来看一下行和单元格的使用，这个表格有两对tr标记，说明这是一个两行的表格，第一行有三对th标记，标记对中间的文字是显示在网页中的表格第一行中每个单元格的文字，第二行也有三对td标记，标记对中间的文字是显示在网页中的表格第二行中每个单元格的文字 ，但是出显示的效果来看，第一行的文字是自动加粗居中显示的，而第两行的文字是默认居左对齐的，这就是区别，所以我一般习惯称 <th></th>这对标记叫做表头标记。

     如果我们现在想再增加一行，内容是白云，铁岭，你太有才了，只需要在</table>标记前加入如下代码，就会增加第3行。

<Tr>
<Td>白云</Td>
<Td align=right>铁岭</Td>
<Td>你太有才了</Td>
</Tr>  

 学员明细表

姓名	国籍	口头禅
小新	日本	老婆
白云	铁岭	你太有才了

       我们来看一下 水平对齐方式的align属性，不用多说了指的是表格在页面中的水平位置，有居中、居左、居右三种格式，我们可以在table中规定align=center，效果是表格出现在网页的中间，接着我们看第二行，在<tr>标记中规定了整行的对齐方式是局单元格的右边框，第三行中第二个单元格特殊规定了是居右，其他两个还是默认的居左效果，这样我们可以根据自己想要的文字水平对齐方式来自己定义。除了在水平方向上我们可以定义表格属性外，我们还可以定义行内容 垂直对齐方式Valign=#，常用的有4中对齐方式：top：内容顶端对齐；middle：内容居中对齐；bottom：内容底端对齐；baseline：内容基线对齐。我们可以将垂直对齐方式如Valign=top，放入tr标记中，规定此行内容局顶端，也可以放入单个的td标记中，规定此单元格的也是内容局顶端。

     接着我们来学习如何设置类似于excel和word那样合并单元格呢？HTML中也提供了设置跨行和跨列的属性，分别是rowspan和colspan。 有横向通栏的表格用<td colspan=#>属性说明 ，有纵向通栏的表格用<td rowspan=#>属性说明，#代表通栏占据的网格数。看下面的例子：

      <table Border=1 align="center" width=300>

    <tr>

<td colspan=4>学员明细表</td>

</tr>   

    <Tr>

     <Th>班级</Th>
     <Th>姓名</Th>
    <Th>国籍</Th>
    <Th>口头禅</Th>
         </Tr>
    <Tr align=right>

<td rowspan=2>搞笑班</td>
     <Td>小新</Td>
     <Td>日本</Td>
    <Td>老婆</Td>
</Tr>

<Tr>
<Td>白云</Td>
<Td align=right>铁岭</Td>
<Td>你太有才了</Td>
</Tr>   
        </table>            页面效果图如下： 

   

学员明细表
班级	姓名	国籍	口头禅
搞笑班	小新	日本	老婆
	白云	铁岭	你太有才

      请同学们对照代码大家体会一下跨行和跨列的用法，我们在第一行中到了行通栏，因为表格的最大单元格数是4，所有如果想第一行只显示一个单元格就必须让rowspan=4，第3行和第4行的第一个单元格利用了列通栏，相当于合并了两列所有colspan=2。接下来我们来看一学习 设置单元格间距cellspacing，这样可以使网页中的表格显得不是过于紧凑，由于我今天的实例没有页面截图方式，而是直接在博客中画表格，所以有些效果无法演示出来，比如cellspacing属性和 设置单元格边距属性cellpadding，单元格边距是指单元格中内容与单元格边距的距离，这两个属性都是在table标记中定义的，如<table cellspacing=1 cellpadding=1>,（博客中在总结出演示效果了，大家可以自己试一试，并且更改他们的值感觉不同效果。）

      设置单元格还有一个重要的学习点就是 边框的显示效果，我们可以通过border=#属性定义#为像素值来定义边框的粗细，bordercolor=#定义边框的颜色，还可以定义亮边框的颜色利用bordercolorlight=#，暗边框颜色bordercolordark=#，因为在实际网站开发过程中，会用到更专业的美化工具，所以这部分最后两个属性同学们只需要大体了解即可，重点是前两个属性，表格的默认颜色就是<table bordercolor=black>,这是可以省略的，除非我们想规定其他颜色，同时表格也是可以设置 背景颜色的，属性bgcolor=#如<table bgcolor=yellow>是将表格的背景颜色设为黄色。（博客中在总结出演示效果了，大家可以自己试一试，并且更改他们的值感觉不同效果。）

      边框的显示效果中除了边框的颜色外还有 边框的样式，这就用到了另外两个属性，frame属性可以设置表格边框的样式，利用rules属性可以设置表格内部边框的属性，我们编写的代码如<table frame=# rules=#>规定了边框的样式，下面我们来罗列出这两个属性的值都有哪些，分别代表什么显示效果：

     frame属性的值：

         above--显示上边框；border--显示上下左右边框（默认此值）；below--显示下边框；hsides--显示上下边框；lhs--显示左边框；rhs--显示右边框；void--不显示边框；vsides--显示左右边框

     rules属性的值：

         all--显示所有内部边框（默认此值）；group--显示介于行列边框；none--不显示内部边框；

        cols--仅显示列边框；rows--仅显示行边框

       这些属性的直观效果和word设计出来的基本相似，（博客中在总结出演示效果了，大家可以自己试一试，并且更改他们的值感觉不同效果。）我们在实际运用时，可以根据需要选择不同的值，填充到table边距中。接着我们来学习今天最后一个内容， 表格的嵌套，在网页制作过程中，为了使页面的排版更加的精细，所以会用到在一个的单元格中放入一个表格，然后在加入的表格的单元格中添加要显示的内容，比如图片、新闻、flash等，嵌套的方式很简单，就是将<td></td>这个表格的中间加入一个表格就可以了。如<td><table>……</table></td>，嵌套在td标记内部的的table标记是要嵌套的表的代码。我们把上一个例子加工一下，用到我们所讲到的标记属性将表格的嵌套作为今天的结束。

    我们看一下，在第11行中我们加入了一个表格，这个表格的属性是背景颜色为黄色，单元格的间距为1像素，单元格的行间距也是1像素，只显示上下边框，并且表格内部也是没有分割线的，这个例子基本把今天所包括是知识点总结了一下，效果图如下：

      在这里我再次强调一下，表格在网页制作中非常重要，灵活的试用他们的属性和标记可以增加工作效率及页面效果，所以同学们一下要掌握住，下一节我们将要来学习页面框架。

本文转自叶子文文博客51CTO博客，原文链接http://blog.51cto.com/leafwf/185759如需转载请自行联系原作者

叶子文文