logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

代码入门教程（20）

 春天没来 2012-12-09

第 二 章 标 签 应 用

第二十五节 表格标签应用（1）

文章分割线——“春天没来”欢迎您

 
        从本节开始，讲解表格标签的应用。本节讲解的内容为：认识表格的一套标签、认识单元格、认识边框线、认识间距与边距、认识列的合并与行的合并。
        一、认识表格的一套标签：
        表格标签，是一套标签。它包括表格标签、表格的主体标签、表格的行标签、表格的列标签以及它们的尾标签，在使用的时候，相互配合，缺一不可。
        表格的一套标签：
表格标签：<TABLE>　表格的主体标签：<TBODY>　表格的行标签：<TR>　表格的列标签：<TD>
表格的列尾标签：</TD> 表格的行尾标签：</TR> 表格的主体尾标签：</TBODY> 表格尾标签 ：</TABLE> 。
在表格标签中，我们常常添加一些属性和属值。
        表格常用属性有：
cellspacing （单元格间距，是指单元格之间的距离。） 　cellpadding （单元格衬距，也叫边距。是指单元格中的内容与单元格的边线之间的距离。）bgcolor（背景颜色） background（表格的背景图片）　border（边框线宽度）　bordercolor（表格的边框颜色）　border-style（边框线样式）　width（表格的宽度）　height（表格的高度）
        1、表格标签：<TABLE>这是表格标签。它的作用大概有两点：其一，设置表格的各种属性与属值。表格的属性与属值，大多数的情况下，是在表格标签中设置的。当然了，在表格的行标签、列标签中也可以设置。其二，提示作用。告诉浏览器，下面的内容是表格。
        2、表格的主体标签：<TBODY>这是表格的主体标签。表格的主体标签，用于包裹表格的行与列。表格中能够在网页上显示的内容，基本上都是表格的主体标签包裹的内容。
        3、表格的行标签：<TR>这是表格的行标签。表格的行标签，用于设置表格的行。表格中有几行，就用几个表格的行标签与它的尾标签。表格的行是指表格中横向的格子。
        4、表格的列标签：<TD>这是表格的列标签。表格的列标签，用于设置表格的列。表格中有几列，就在一行内用几个表格的列标签与它的尾标签。表格的列是指表格中竖向的格子。横向的格子与竖向的格子相互交叉，就形成了单元格。
        因为在“表格的列标签”前面已经有了“表格的行标签”，所以在某种意义上来讲，表格的列也可以理解为单元格。
        5、表格的一套尾标签，包括：表格的列尾标签</TD> 、表格的行尾标签</TR>、表格的主体尾标签</TBODY>、表格尾标签</TABLE> ，都是起收尾作用、包裹作用的。有了这些尾标签，表格中的内容才能够正常显示出来。
        6、表格的行与表格的列是相辅相成的。有行必有列，有列必有行。不能只设置行标签不设置列标签，也不能只设置列标签不设置行标签。只有一个格子的表格是一行一列的表格。
        7、一个单元格的内容结束处，要用</TD>标签结尾；一行的内容结束处，要用</TR>标签结尾；一个表格的内容结束处，要用</TBODY>标签和</TABLE>标签结尾。
        二、认识单元格：
        表格中的内容，大部分是在单元格内放置的。也就是在“代码编辑”页面中，把内容的代码放置到<TD>标签与</TD>标签之间。即：<TD>内容的代码</TD>。或者在“文字图片编辑”页面中，把内容“粘贴”在单元格的小方框内。单元格实例如下：
        1、一行一列的表格代码：（只有一个单元格）
<table border="1">
<tbody>
<tr>
<td>1</td></tr></tbody></table>
效果图：
1
        代码解析：
      （1）代码<TD></TD>就是一个单元格的代码。表格中的内容，要放置到这两个标签的中间。
      （2）表格标签中设置了一个属性与属值，边框线的宽度：“BORDER＝1”。只有设置了边框线的宽度不等于0，才能够看清楚单元格。单元格内放置的内容是数字“1”。
        2、一行三列的表格代码：
<TABLE border=1>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD></TR></TBODY></TABLE>
效果图:
123
        代码解析：
      （1）表格标签中设置了一个属性与属值，边框线的宽度：“BORDER＝1”。每个单元格内放置了一个数字，分别是“1”、“2”、“3”。
      （2）一行三列的表格代码：表格的行标签<TR>与其尾标签</TR>内，包裹着三对<TD></TD>。
        3、二行三列的表格代码：
<TABLE border=1>
<TBODY>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD></TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR></TBODY></TABLE>
效果图：
123
456
        代码解析：
        1、表格标签中设置了一个属性与属值，边框线的宽度：“BORDER＝1”。每个单元格内放置了一个数字，分别是“1”、“2”、“3”、“4”、“5”、“6”。
        2、二行三列的表格代码：有两对<TR></TR>，每对行标签<TR>与其尾标签</TR>内，包裹着三对<TD></TD>。
        三、认识边框线：
        边框线的常用属性有：边框线的宽度、边框线的颜色和边框线的类型。
        边框线的宽度：
        边框线宽度的表示方法：BORDER=？ 等号后面的“？”是具体的数值。如上面举例的表格，边框线的宽度为“1”。
        边框线的颜色：
        边框线的颜色表示方法如： borderColor=#ffd700
        边框线的类型：
        边框线的类型一般有九种类型：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid （实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边 框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅）。
        注意：如果系统不支持这些 边框的属性值，那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被 “solid”代替。
        边框线类型表示方法：border-style: groove
        边框线的设置，常常用css样式表示。
例1：style= "border:thin solid red"；“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型： solid（实线）；边框线的颜色：red（红色）。
例2：STYLE="border-style:Double;border-width:6pt; border-color: #ff0000"
例2代码注释：样式＝“边框线类型：双线；边框线宽度：6px；边框线颜色：红色
边框线类型图例如下：
1、点虚线型：
2、线虚线型：

3、实线型：

4、双线型：

5、3D沟槽状：

6、3D脊状：

7、3D内嵌：

8、3D外嵌：

9、无边框线：
        四、认识间距与边距：
        表格的边距cellpadding是指单元格中的内容与单元格的边线之间的距离；表格的间距cellspacing是指单元格之间的距离。
        cellspacing属性的参数值是数字，表示单元格之间的间隙所占的像素点数。
        在表格的属性中，表格的间距cellspacing是个不大好理解的内容，特别是在只有一个单元格的多重表格（即多重边框）中，表格的间距越是不容易弄清楚的。下面我用比较长的篇幅来讲解一下表格的间距。
        我们先来看下面的代码：
<table border="5" cellSpacing="10" borderColor="#990000"
cellPadding="0" width="400" background="http://image52.
360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg"
bgColor="#00ff00" height="150">
<tbody>
<tr align="center">
<td>
<div align="center"><font color="#00ffff">a</font></div></td>
<td>
<div align="center"><font color="#00ffff">b</font></div></td>
<td>
<div align="center"><font color="#00ffff">c</font></div></td></tr>
<tr align="center">
<td>
<div align="center"><font color="#00ffff">a</font></div></td>
<td>
<div align="center"><font color="#00ffff">b</font></div></td>
<td>
<div align="center"><font color="#00ffff">c</font></div></td></tr>
<tr align="center">
<td>
<div align="center"><font color="#00ffff">a</font></div></td>
<td>
<div align="center"><font color="#00ffff">b</font></div></td>
<td>
<div align="center"><font color="#00ffff">c</font></div></td>
</tr></tbody></table>
        上面的代码是一个三行三列的表格的代码，表格的间距cellSpacing="10"，其效果如下：
a
b
c
a
b
c
a
b
c
        如果把间距修改为cellSpacing="0"，我们再来观察一下其效果：
a
b
c
a
b
c
a
b
c
        比较一下这两个表格的效果：间距为cellSpacing="10"的表格，单元格之间有很大的距离，单元格与整个表格的边框线之间也有很大的距离；间距为cellSpacing="0"的表格，单元格的边线连在一起了，距离为“0”，单元格与整个表格的边框线之间也没有空白距离，距离为“0”。
        我们再来看下面的代码：
<table border="3" cellSpacing="10" borderColor="#990000"
 cellPadding="0" width="100" background="http://image52.
360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg"
bgColor="#00ff00" height="100">
<tbody>
<tr align="center">
<td>
<div align="center"><font color="#00ffff">a</font></div>
</td></tr></tbody></table>
         此代码是一个一行一列的表格的代码，表格的间距cellSpacing="10"，其效果如下：
a
        如果把间距修改为cellSpacing="0"，我们再来观察一下其效果：
a
        比较一下这两个表格的效果：间距为cellSpacing="10"的表格，单元格与整个表格的边框线之间有很大的距离；间距为cellSpacing="0"的表格，单元格与整个表格的边框线之间没有空白距离，距离为“0”。
由此可见，只有一个单元格的表格间距，是指单元格与表格的边框线之间的距离。
        cellpadding属性的参数值也是数字，表示单元格内容与单元格边线之间空白距离的高度所占像素点数。举例如下：
我们来看下面的两个表格：
网页陶吧
网页陶吧
　　 第一个表格单元格的内容与单元格边线之间没有空白距离，而第二个表格单元格的内容与单元格边线之间有空白距离，我们来比较一下他们的源代码：
        第一个表格的代码：
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="0">
<TBODY> <tr>
<td width="120">网页陶吧</td>
<td></td>
</tr></TBODY>
</table>
        第二个表格的代码：
<table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15">
<TBODY>
<tr>
<td width="120">网页陶吧</td>
<td></td></tr>
</TBODY></table>
        两个表格只有红色部分代码不同。第一个表格中"网页陶吧"这几个字离它所在的单元格边线距离为为0，那是因为设置了cellpadding="0"的原因。第二个表格中的"网页陶吧"这几个字离它所在的单元格边线距离比较远，那是因为设置了cellpadding="15"的缘故，也就是说"网页陶吧"离它所在的单元格的边线的距离为15个像素。简单地说，cellpadding的值等于多少，那么表格内的单元格从自身边线开始向内保留多少个空白像素点，单元格里的元素永远都不会进入那些空白间隙里。
        在表格制作中经常会用到这两个属性，所以我们一定要弄清楚这两个属性。为了形象的理解，请参考下图：
　
　　
        五、认识列的合并与行的合并：
        在我们设置表格时，有时候需要“合并列”或者“合并行”。“合并列”与“合并行”又用什么代码呢？
        1、列的合并（第一行合并为一个单元格）的表格代码：
<TABLE border=1>
<TBODY>
<TR>
<TD colSpan=3>1</TD></TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD></TR></TBODY></TABLE>
效果图：
1
456
        代码解析：
        在上面的代码中，第一行的列（单元格）标签中，添加了一个代码colSpan=3 ，它表示把横向的三个单元格合并为一个单元格。也就是把第一行的三列合并为一列。
        2、行的合并（第一列合并为一个单元格）的表格代码：
<TABLE border=1>
<TBODY>
<TR>
<TD rowSpan=2>1</TD>
<TD>2</TD>
<TD>3</TD></TR>
<TR>
<TD>5</TD>
<TD>6</TD></TR></TBODY></TABLE>
效果图：
123
56
        代码解析：
        在上面的代码中，第一行的列（单元格）标签中，添加了一个代码rowSpan=2，它表示把竖向的两个单元格合并为一个单元格。也就是把第一列的两行合并为一行。
        作业：
        1、认真阅读本篇文章，弄清楚本节讲解的表格的五个方面的内容。
        2、弄清楚表格的一套标签，弄清楚表格的一套标签的设置顺序（也就是谁“包裹”谁的问题。）
答案：由外到内，顺序是：表格标签与其尾标签、表格主体标签与其尾标签、表格的行标签与其尾标签、表格的列标签与其尾标签。
        3、弄清楚单元格、边距和间距的概念。
        4、学会用代码设置表格的单元格，并在单元格中放入内容。
        5、学会合并表格的行与列。
        6、用代码设置一个三行五列的表格。
        7、将6题设置的表格的第一行合并为一个单元格。
        8、将6题设置的表格的第一列合并为一个单元格。
2012年12月9日于北京
 
 

第 二 章 标 签 应 用

第二十六节 表格标签应用（2）

☆ 精美文章.图片分隔线 ☆ - 浪漫人生 - .

 

        本节继续讲解表格标签的应用。本节讲解的内容为：认识多重表格、设置多重表格、设置背景颜色与背景图片、在表格的“列标签”中设置属性等四个方面的内容。
        一、认识多重表格：
        在撰写文章的时候，我们常常会用到边框，把文章放置到一个漂亮的边框内。用一层的边框是不够美观的，用多重的边框就漂亮多了（边框是特殊形式的表格）。什么是多重表格？多重表格就是叠加在一起的表格，嵌套在一起的表格。那么，什么样的表格是“叠加”的或者“嵌套”的表格呢？请看下面的例子：
        多重表格代码举例：
<table style="width: 600px; height: 50px;" border="0" cellSpacing="15"
cellPadding="0" background="
cellSpacing="20" cellPadding="0"
cellSpacing="5" cellPadding="0"
<font style="font-size: 24px;" color="#00ccff"><strong>文字处
</strong></font>
</p></td></tr></tbody></table></td></tr></tbody></table></td>
</tr></tbody></table>
效果图：

文字处

        代码解析：
        上面的表格，是一个叠加的“三重表格”（或者叫做三层表格）。什么是三重表格呢？用一套表格标签制作的表格是一层表格，用两套表格标签制作的表格是二层表格（也叫二重表格），用三套表格标签制作的表格是三层表格（也叫三重表格），用几套表格标签制作的表格就是几层表格（也叫几重表格）。无论制作几重表格，都要把这几套表格的尾标签，都集中起来，放置到最后面。这就是“叠加”的表格，或者叫“嵌套”的表格。上面的三重表格代码，代码的结尾处就是三套表格的尾标签（每套表格的尾标签有四个）。
        二、设置多重表格：
        多重表格的设置一般以3——4层的表格最为适用。层数太少，表格不够美观。层数太多也不好：一是层数太多会增加表格的宽度，要么会挤掉表格中放置内容的地方，要么会在文章的发表页面中，出现横向的滚动条，在表格中放入内容以后，还会觉得有点儿喧宾夺主的感觉。
        设置多重表格的时候，在表格标签中，最好把表格的下列属性都设置进去：表格的宽度width、边框线宽度border、边框线颜色borderColor、间距cellspacing、边距cellpadding、
背景图片background。表格的高度，可以设置也可以不设置（因为在表格中输入内容以后，系统会自动调整表格的高度。）表格的其它属性，可以根据表格中要放置的内容决定设置还是不设置。
        表格标签举例：
<table border="5" cellSpacing="10" borderColor="#990000"
cellPadding="1" width="620" background="
        用上面的表格标签设置多重表格的方法：
        1、上面的表格标签代码为第一层表格代码；
        2、复制上面的表格标签代码，粘贴到第一层表格的这两个标签<td></td>之间，这是第二层表格代码；
        3、继续把第一层表格标签代码，粘贴到第二层表格的这两个标签<td></td>之间，这是第三层表格代码；
        4、继续把第一层表格标签代码，粘贴到第三层表格的这两个标签<td></td>之间，这是第四层表格代码；
        5、继续把第一层表格标签代码，粘贴到第三层表格的这两个标签<td></td>之间，……（这就设置成为任意层次的多重表格代码）
        6、修改各层表格标签代码中的有关属性：
      （1）替换背景图片地址：各层表格中的背景图片，一般使用不同的背景图片地址；
      （2）修改表格宽度：表格的宽度，最好把第一层表格的宽度或者最后一层表格的宽度设置为绝对宽度，用具体的数值表示（例如600px），其它层的表格宽度设置为相对宽度，用百分数100％表示。
      （3）其余的属性与属值，修改不修改均可。
        三、设置背景颜色与背景图片：
        1、背景颜色的设置：背景颜色的设置有三种表示方法：（1）英语颜色名称表示法如：bgcolor="orange" （2）十六进制颜色名称表示法如：bgcolor="#CCFFCC" （3）十进制颜色名称表示法如：bgcolor="rgb(255,0,0)"
        颜色的选择，请参阅文章：
        2、背景图片的设置：
        如果表格内要放置文章，设置背景图片时，最后一层表格的背景图片最好用素色的图片，不要用闪光的背景图片，也不要用图案鲜艳的背景图片。其它层的背景图片，可以用闪光的背景图片，也可以用图案鲜艳的背景图片。
背景图片的设置方法：找好要设置的图片，右击图片，点击属性，复制图片地址（形如：
        下面的表格是我用上面的表格代码修改以后制作的三重表格：
        背景图片的选择，请参阅文章：
221251225.shtml
148461034.shtml
        设置多重表格应注意：
        设置多层表格时，各层的表格都要设置背景图片或者背景颜色；最里层的表格要设置宽度与高度；除了最里层的表格以外，各层的表格只设置“间距”或者“边距”的显示效果是一样的。     
        四、在表格的“列标签”中设置属性：
        表格的各种属性与属值，一般是设置在“表格标签”中的。这并不能说明，表格的各种属性与属值必须在表格标签中设置，表格的“列标签”中也可以设置表格的一些属性。现举例如下：
        代码1：（“列标签”中设置了高度和背景图片）
 
        代码2：：（“列标签”中设置了“左右翻转样式”、单元格的高度和宽度、背景图片）
 
        作业：
        1、认识并熟记表格的一套标签（8种标签）。
        2、熟练掌握制作多重表格的方法并制作几个多重表格。（二重以上的表格叫做多重表格）
        3、学会设置表格的背景颜色与背景图片。
        4、试着在表格的列标签中设置一些属性。
 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 春天没来 > 《代码入门教程》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多