网通请访问|国际域名注册|一天学会FLASH制作 |一天学会做网页音画|一天学会PS大图音画|一天学会可写名字网页| 一天学会做网站 168上网导航|开心驿站 |168网站|动画欣赏
个人网站申请|我要学建站|个人空间申请|透明动画1|透明上传|MP3上传|上传FLASH|舞曲上传下载|非黄钻代码获取|播放器申请|大图音画|音画驿站|进入论坛|加入收藏
百度下一天学会FLASH网 百变围巾视频 一键转发软件下载 照片书制作  
 当前位置:首页 >> 学习园地 >> 学做网页 >> 第九课 表格标志
    
  双击自动滚屏  
第九课 表格标志

发表日期:2005年11月22日  出处:致富娱乐网  本页面已被访问 4319 次    百度收录

第九课 表格标志

HTML表格,是由行和列组成,行和列构成了一个个单元格,单元格内可以放文本和图形等元素。表格有两个作用,第一:格式化信息;第二可以用表格把HTML元素放到WEB页面中,帮助我们控制HTML中的元素的显示的位置。
一、 生成基本表格:
  1. 生成表格结构,输入表格标志,指定行和列。
  2. 在行、列组成的单元格间输入数据。
先生成表格结构再输入数据,可以避免表格标志错误,避免产生不希望的表格。表格的基本标志如下:
标志名称 标 志 名 称 含 义
<TABLE> </TABLE> 用来创建一个表格
<TR> </TR> 用来创建表格中的每一行,只能放在<TABLE> </TABLE>中才有效,在此标志对中加入文本将是无效的
<TD> </TD> 用来创建表格中一行里的每一列的单元格,放在<TD> </TD>标志对中才是有效的
下面生成一个"三行二列"表格,生成的步骤如下:
  1. 首先在要表现表格的位置输入表格标志<TABLE></TBALE>
          <table>
         </table>
  2. 其次每一行输入表格的行标志<TR>
          <table>
         <TR>
         </TR>
         <TR>
         </TR>
         <TR>
         </TR>
         </table>
  3. 然后在行标志对中输入表格的列标志
         <table>
         <TR>
         <TD></TD>
         <TD></TD>
          <TD></TD>
         </TR>
         <TR>
         <TD></TD>
         <TD></TD>
          <TD></TD>
         </TR>
         <TR>
         <TD></TD>
         <TD></TD>
          <TD></TD>
         </TR>
         </table>
  4. 最后在行、列组成的单元格中输入你要表现的内容
        <table>
         <TR>
         <TD>第一行第一列</TD>
         <TD>第一行第二列</TD>
          <TD>第一行第三列</TD>
         </TR>
         <TR>
         <TD>第二行第一列</TD>
         <TD>第二行第二列</TD>
          <TD>第二行第三列</TD>
         </TR>
         <TR>
         <TD>第三行第一列</TD>
         <TD>第三行第二列</TD>
          <TD>第三行第三列</TD>
         </TR>
         </table>
表格效果如下:
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列
第三行第一列 第三行第二列 第三行第三列
一个表格生成后,可以根据需要随时改变表格的行和列数
  1. 增加行数:
      为了在表格中增加行数,只要在新行出现的位置处插入行、列标志(<TR><TD>)即可完成。例如,针对上面的表格,再在最后表格底部加入一行。
          <table>
         <TR>
         <TD>第一行第一列</TD>
         <TD>第一行第二列</TD>
          <TD>第一行第三列</TD>
         </TR>
         <TR>
         <TD>第二行第一列</TD>
         <TD>第二行第二列</TD>
          <TD>第二行第三列</TD>
         </TR>
         <TR>
         <TD>第三行第一列</TD>
         <TD>第三行第二列</TD>
          <TD>第三行第三列</TD>
         </TR>
    <TR>
         <TD>插入行第一列</TD>
         <TD>插入行第二列</TD>
          <TD>插入行第三列</TD>
         </TR>
         </table>
    效果如下:
    第一行第一列 第一行第二列 第一行第三列
    第二行第一列 第二行第二列 第二行第三列
    第三行第一列 第三行第二列 第三行第三列
    插入行第一列 插入行第二列 插入行第三列
  2. 增加列数
      当在表格中需要增加列数时,需要在表格要增加列的位置插入列标志(<TD></TD>)。增加列时,要在每一行都要进行对列的插入操作。例如:对上面表格在每行的最后一列再加入一列。
    <table>
         <TR>
         <TD>第一行第一列</TD>
         <TD>第一行第二列</TD>
         <TD>第一行第三列</TD>
         <TD>第一行插入列</TD>
         </TR>
         <TR>
         <TD>第二行第一列</TD>
         <TD>第二行第二列</TD>
          <TD>第二行第三列</TD>
          <TD>第二行插入列</TD>
         </TR>
         <TR>
         <TD>第三行第一列</TD>
         <TD>第三行第二列</TD>
          <TD>第三行第三列</TD>
          <TD>第三行插入列</TD>
         </TR>
    <TR>
         <TD>插入行第一列</TD>
         <TD>插入行第二列</TD>
          <TD>插入行第三列</TD>
          <TD>插入行插入列</TD>
         </TR>
         </table>
    效果如下:
    第一行第一列 第一行第二列 第一行第三列 第一行插入列
    第二行第一列 第二行第二列 第二行第三列 第二行插入列
    第三行第一列 第三行第二列 第三行第三列 第三行插入列
    插入行第一列 插入行第二列 插入行第三列 插入行插入列
  3. 删除表中的行:
    在表中进行行删除时,要把整行(<TR></TR>)标志对包括内容进行删除,例如:对上表中的最后一行进行删除
         <table>
         <TR>
         <TD>第一行第一列</TD>
         <TD>第一行第二列</TD>
         <TD>第一行第三列</TD>
         <TD>第一行插入列</TD>
         </TR>
         <TR>
         <TD>第二行第一列</TD>
         <TD>第二行第二列</TD>
          <TD>第二行第三列</TD>
          <TD>第二行插入列</TD>
         </TR>
         <TR>
         <TD>第三行第一列</TD>
         <TD>第三行第二列</TD>
          <TD>第三行第三列</TD>
          <TD>第三行插入列</TD>
         </TR>
         <TR>
         <TD>插入行第一列</TD>
         <TD>插入行第二列</TD>
         <TD>插入行第三列</TD>
          <TD>插入行插入列</TD>
         </TR>
         </table>
    实际效果如下:
    第一行第一列 第一行第二列 第一行第三列 第一行插入列
    第二行第一列 第二行第二列 第二行第三列 第二行插入列
    第三行第一列 第三行第二列 第三行第三列 第三行插入列
  4. 列的删除:
    对表中列的删除,要对每行中相同列进行删除。例如:针对上表,对最后一列进行删除
         <table>
         <TR>
         <TD>第一行第一列</TD>
         <TD>第一行第二列</TD>
         <TD>第一行第三列</TD>
         <TD>第一行插入列</TD>
         </TR>
         <TR>
         <TD>第二行第一列</TD>
         <TD>第二行第二列</TD>
          <TD>第二行第三列</TD>
          <TD>第二行插入列</TD>
         </TR>
         <TR>
         <TD>第三行第一列</TD>
         <TD>第三行第二列</TD>
          <TD>第三行第三列</TD>
          <TD>第三行插入列</TD>
         </TR>
         </table>

    实际效果如下:
    第一行第一列 第一行第二列 第一行第三列
    第二行第一列 第二行第二列 第二行第三列
    第三行第一列 第三行第二列 第三行第三列
对表进行了常规的行、列的添加和删除,如果要对表进行边框、背景颜色等设置,就要用到表格的一些常用的属性设置。下面是它的常用修饰属性,见下表:
表格属性名称 属 性 名 称 含 义
border="n" 设置表格或单元格的边框。当为n=0时,没有边框。n>0j是地,值越大,边框越粗
bordercolor="..." 设置表格或单元格的边框颜色
bgcolor="..." 设置表格或单元格的背景颜色
bordercolorlight="..." 设置边框明亮部分的颜色(当border值大于1才有效)
bordercolordark="..." 设置边框昏暗部分的颜色(当border值大于1才有效)
cellspacing="..." 设置单元格之间的间隔大小
cellpadding="..." 设置单元格内容与单元格边框的间隔大小
width="n" 设置表格或单元格的宽度,单位用绝对像素值和浏览器文档窗口宽度的百分比
height="n" 设置单元格内容和与单元格边框之间的间隔大小
align="..." 设置单元格内容的水平对齐方式(left 、center、right)
valign="..." 设置单元格内容垂直对齐方式
<CAPTION>...</CAPTION> 用来对表格设置标题或名称,它必须在紧跟在表格的起始标记<table>之后
<TH> 定义表格单元格的内容,通常放在表格的第一行,它显示的是黑体居中的文字


下面是一些上述属性的实例:
实例简述 源代码 实际显示效果
设置表格边框宽度 <TABLE border=3>
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置表格边框宽度和颜色 <TABLE border=3 bordercolor="red">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置表格背景颜色 <TABLE border=3 bordercolor="red" bgcolor="yellow">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置表格边框明亮部分的颜色 <TABLE border=3 bordercolorlight="red">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置表格边框昏暗部分的颜色 <TABLE border=3 bordercolorlight="red" bordercolordark="red">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置单元格之间的间隔大小 <TABLE border="3" bordercolor="green" cellspacing="12">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置单元格内的内容与单元格边框之间的间隔大小 <TABLE border="3" bordercolor="green" cellspacing="12" cellpadding="8">
<TR>
<TD>第一行第一列</TD>
<TD>第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置单元格边框颜色及背景颜色 <TABLE border="3" cellpadding="8" cellspacing="8">
<TR>
<TD bordercolor="green" bgcolor="yellow">第一行第一列</TD>
<TD bordercolor="red" bgcolor="blue">第一行第二列</TD>
</TR>
</table>
第一行第一列 第一行第二列
设置表格和单元格宽度和高度 <TABLE border="3" bordercolor="green" width="280" height="100"
<TR>
<TD width="50" height="30">第一行</TD>
<TD>第一行</TD>
</TR>
<TR>
<TD>第二行</TD>
<TD>第二行</TD>
</TR>
</table>
第一行 第一行
第二行 第二行
设置单元格内容对齐方式 <TABLE border="3" bordercolor="green" width="280" height="100"
<TR>
<TD width="50" height="30">第一行</TD>
<TD>第一行</TD>
</TR>
<TR>
<TD>第二行</TD>
<TD valign="bottom" align="right">第二行</TD>
</TR>
</table>
第一行 第一行
第二行 第二行
设置表格标题和<TH>属性 <TABLE border="3" bordercolor="green" width="280" >
<CAPTION>学习表格制作</CAPTION>
<TR>
<TH >姓名</TH>
<TH>成绩</TH>
</TR>
<TR>
<TD>张三</TD>
<TD>60</TD>
</TR>
</table>
学习表格制作
姓名 成绩
张三 60
当遇到表是一个不规则的表,就要对它的行和列进行操作,不规则表的操作方法属性如下
  1. colspan:设置一个单元格跨占的列数
  2. rowspan:设置一个单元格跨占的行数

下面针对上述属性进行实例操作,演示如下:
实例简述 源代码 实际显示效果
设置一个单元格占两列 <TABLE border="3" bordercolor="green">
<TR>
<TD colspan="2" bordercolor="red">一个单元格占两列</TD>
</TR>
<TR>
<TD>第二行第一列</TD>
<TD>第二行第二列</TD>
</TR>
</table>
一个单元格占两列
第二行第一列 第二行第二列
设置一个单元格占两行 <TABLE border="3" bordercolor="green">
<TR>
<TD rowspan="2" bordercolor="red">一个单元格占两行</TD>
<TD>第一行第二列</TD>
</TR>
<TR>
<TD>第二行第二列</TD>
</TR>
</table>
一个单元格占两行 第一行第二列
第二行第二列
设置复杂行列合并 <TABLE border="3" bordercolor="green">
<TR>
<TD>一行一列</TD>
<TD rowspan="2" colspan="2" bordercolor="red">一个单元格占两行两列</TD>
</TR>
<TR>
<TD>二行一列</TD>
</TR>
<TR>
<TD rowspan="2" colspan="2">一个单元格占两行两列</TD>
<TD>三行三列</TD>
</TR>
<TR>
<TD>四行三列</TD>
</TR>
<TR>
<TD>五行一列</TD>
<TD>五行二列</TD>
<TD>五行三列</TD>
</TR>
</table>
一行一列 一个单元格占两行两列
二行一列
一个单元格占两行两列 三行三列
四行三列
五行一列 五行二列 五行三列


本站最新发表文章 本站推荐你的文章 网友正在观看文章

  双击自动滚屏  
  相关评论:    

 没有相关评论

  发表评论:    

用 户 名:
电子邮件:
评论内容:
(最多评论字数:160)

一天学会FLASH网 | 设为首页 | 加入收藏 | 关于我们 | 联系我们 | 进入管理 |

联系地址:山西-太原 版权声明:本站所有资料均来源于网络。只供网友方便浏览学习,所有版权归原作者所有.
   联系电话:0351-2358211 18035142468 18734530188
   联系人:联系QQ:285873193 网警 备案号:4406053010881   

违法信息举报电话:18734530188 国家信息产业部 备案号:晋ICP备13000829号 邮箱:jshqy@126.com