您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络教程>>>表格的制作
表格的制作
发表日期:2007/12/1 16:21:00 出处:未知 作者:未知 发布人:tangyue 已被访问 1341

编辑:柔情沙

 


第一课  表格的制作

    欢迎朋友们进入《柔情沙》学习,请朋友们根据我们编辑的教材进行分步学习,还没注册的朋友先到这儿注册为本站会员(免费注册发文),并在学员练习区发表您的练习作业,本站老师会及时给你指导.

1、表格的制作(第一层边框)

(1)登陆网站点开添加文章

(2)在文章标题处写上标题(如XX作业)

(3)作者名处注明您的网名

(4)点开"插入表格"图表(这个是插入表格按钮.)

(4)将"边框粗细"设置10,单元间距设置20

(5)我们现在设置边框颜色和背景颜色,点开调色版

(6)在调色版中自由选取边框和背景颜色,选取自己喜欢的颜色

(7)按确认键(或回车键)

OK,可以看看效果了,这是第一层表格

这是第一层的表格

   如何看效果呢?编辑栏下面有一组设置,你看一下,在以后编辑中常用到:

"编辑"是设计状态, "源代码"是HTML代码状态, "预览"是看发表出来的效果.

我们进入源代码看代码:

  <table borderColor=#2a2af8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#9dd5fc border=10 heihgt="">
    <tr>
      <td></td>
    </tr>
  </table>

(9)根据上面的方法我们做第2层表格

第二层表格

 

源代码如下:

  <table borderColor=#eeeeee cellSpacing=10 cellPadding=3 width="100%" bgColor=#c48ee9 border=2 heihgt="">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>

(10)你做好后点发表

2、学习修改表格的宽度

先看看我们做的第一层边框,(进入“源代码”看代码)

<table borderColor=#2a2af8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#9dd5fc border=10 heihgt="">
    <tr>
      <td></td>
    </tr>
  </table>

 

 

 

现在我们将width="100%"宽度改width="60%"

<table borderColor=#2a2af8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#9dd5fc border=10 heihgt="">
    <tr>
      <td></td>
    </tr>
  </table>

看效果:

 


3、制作两层边框

这是上面我们做的第一层边框:

<table borderColor=#2a2af8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#9dd5fc border=10 heihgt="">
    <tr>
      <td></td>
    </tr>
  </table>

这是第一层的表格

 

现在我们做第二层,方法跟1层一样。

 

 

 

 

我们将两层添加在一起,看是什么效果。

方法:用鼠标选中你做的边框,点右键复制,在第一层边框中粘贴上,跟文字粘贴一样

欢迎光临柔情沙

代码:

  <table borderColor=#2a2af8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#9dd5fc border=10 heihgt="">
    <tr>
      <td>
        <table borderColor=#b859b8 cellSpacing=20 cellPadding=3 width="100%" bgColor=#fdcef4 border=10 heihgt="">
          <tr>
            <td>
            <P align=center><FONT color=#e61a6b size=3>欢迎光临柔情沙</FONT></P></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

怎样添加表格呢?

鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,做成一个5层边框如下:

能看明白吗?

鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,

退出空格还有一种方法:你进入"源代码"是状态.将将&nbsp; 这种空格码删除掉.

 

你进入代码中,将&nbsp; 这种空格码去掉

内容

代码

<TABLE cellSpacing=5 borderColorDark=#f460b9 cellPadding=20 width="100%" borderColorLight=#f460b9 border=10>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#fc9dd5 cellPadding=0 width="100%" borderColorLight=#fc9dd5 border=5>
<TBODY>
<TR>
<TD width="100%"></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

4、制作多种表格:

制作多列行表格:修改行列数字.

2行:

内容

内容

代码:

<TABLE borderColor=#8e1d77 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f4b5e7 border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

4行:

内容

内容

内容

内容

代码:

<TABLE borderColor=#88225f cellSpacing=10 cellPadding=0 width="100%" bgColor=#ebaddf border=12>
<TBODY>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>

2列:

 

内容

内容

代码:

<TABLE borderColor=#b11b57 cellSpacing=10 cellPadding=0 width="100%" bgColor=#f5a3c4 border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

5列:

 

内容

内容

内容

内容

内容

代码:

<TABLE borderColor=#991147 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f7b3ce border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

行列合并,2行2列

 

内容

内容

内容

内容

代码:

<TABLE borderColor=#7a1f56 cellSpacing=10 cellPadding=0 width="100%" bgColor=#fcbdad border=10>
<TBODY>
<TR>
<TD>内容</TD>
<TD>内容</TD>
<TR>
<TD>内容</TD>
<TD>内容</TD></TR></TBODY></TABLE>

8行3列:

 

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

HTML语言说明:(从最基本代码开始认识)

 <TABLE>是表格的起始符,与</TABLE>是一对的使用

borderColor=#7a1f56  边框的颜色

cellSpacing=10:表格格线的厚度

cellPadding=0:边框的距离

width="100%" :表格宽度,接受绝对值(如 80)及相对值(如 80%)。

border=10>:表格边框的厚度,不同浏览器有不同的内定值,故请指明。

borderColorDark=#f460b9:暗边框

borderColorLight=#f460b9:亮边框

<TOBODY>:标题 与</TOBODY> 一对使用

<TR>:行 </TD>一对使用

<TD>:列</TD>一对使用

 

 

 

 

 

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

天际天蓝 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:406038085 联系人:唐寅