- 动网先锋论坛 (http://2007.hnzqw.com/index.asp)
-- 都是菜鸟 (http://2007.hnzqw.com/list.asp?boardid=31)
---- [推荐] 学习制作表格（基础练习） (http://2007.hnzqw.com/dispbbs.asp?boardid=31&id=24926)
-- 发布时间：2007/4/20 17:02:41
-- [推荐] 学习制作表格（基础练习）
(第一课 )学习制作表格（基础练习） |
第一课学员应按老师提供的教材制作10个以上的各种表格,HTML学堂的老师会及时给你指导.学习时间定3天第一课非常重要,大家一定要认真的学做.
1、表格的制作（第一层边框）
(1)点开
发表话题
(2)写上标题(如:XX作业)
(3)点开"插入表格"图表(这个是插入表格按钮
.)
(4)将"边框粗细"设置10,单元间距设置20
(5)我们现在设置边框颜色和背景颜色,点开调色版
(6)在调色版中自由选取边框和背景颜色,看我选的颜色代码,选择边框颜色 =#09097F 背景颜色=#A3B3F5
(7)按确认键(或回车键)
看效果~~~~~这是第一层表格
第1层表格 编辑栏下面有一组设置,你看一下,在以后编辑中常用到: "Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态 |
(8)我们进入HTML看代码:
<TABLE borderColor=#09097f cellSpacing=20 cellPadding=3 width="100%" align=center bgColor=#a3b3f5 border=10>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE>
(9)根据上面的方法我们做第2层表格
第2层表格 第2层表格 |
(10)你做好后点发表
2、学习修改表格的宽度
先我们做的第一层边框,(进入HTML看代码)
<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
现在我们将width="100%"宽度改width="60%"
<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
看效果:
3、制作两层边框
这是上面我做的第一层
<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
现在我们做第二层，方法跟1层一样。
| 添加内容 |
我们将两层添加在一起，看是什么效果。
方法：用鼠标选中你做的边框，点右键复制，在第一层边框中粘贴上，跟文字粘贴一样
|
代码：
<TABLE borderColor=#1169ee cellSpacing=2 cellPadding=3 width="100%" bgColor=#b0bef9 border=10>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#22ddb8 cellSpacing=2 cellPadding=3 width="100%" bgColor=#9dfcd5 border=5>
<TBODY>
<TR>
<TD>
<P align=center></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
怎样添加表格呢?
鼠标放在这个边框的边缘处,(出现一个十字标记),右击--复制,然后在边框外空的地方点一下,再把鼠标放进表格内最靠左边的位置,(鼠标进去后,可以用退格键试试,把多余的空格退掉,免得边框内有空格,边框会变高.)右击---粘贴,就出现双层边框.重复这样的操作,做成一个5层边框如下:
|
|
代码
<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><BR>
颜色代码： http://xz1.2000y.net/831437/index.asp?xAction=xReadNews&NewsID=169 点击进入，自由选择 制作多列行表格:修改行列数字. 2行:
代码: <TABLE borderColor=#8e1d77 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f4b5e7 border=10> 4行:
代码: <TABLE borderColor=#88225f cellSpacing=10 cellPadding=0 width="100%" bgColor=#ebaddf border=12> 2列:
代码: <TABLE borderColor=#b11b57 cellSpacing=10 cellPadding=0 width="100%" bgColor=#f5a3c4 border=10> 5列:
代码: <TABLE borderColor=#991147 cellSpacing=15 cellPadding=0 width="100%" bgColor=#f7b3ce border=10> 行列合并,2行2列
代码: <TABLE borderColor=#7a1f56 cellSpacing=10 cellPadding=0 width="100%" bgColor=#fcbdad border=10> 8行3列:
代码:将空格码删除掉,太多我就不一个个的删除了,你做时一定要在代码中删除空格码然后再添加内容. <TABLE borderColor=#f68080 cellSpacing=15 cellPadding=0 width="100%" bgColor=#fee4de border=10> |
-- 发布时间：2007/4/21 2:32:43
--
==
-- 发布时间：2007/4/25 11:05:04
--
第一层表格 编辑栏下面有一组设置,你看一下,在以后编辑中常用到: "Design"是设计状态, "VIEW"是预览状态, "HTML"是代码状态 |
-- 发布时间：2007/4/25 11:06:31
--
楼主介绍的这种方法很好，省去很多不懂代码的麻烦，谢谢，顶了。
莫悲切，待从头、收拾旧山河，朝天阙。
-- 发布时间：2007/4/26 22:16:10
--
莫等闲、白了少年头，空悲切。是呀有这么好的老师不学,真是可惜.可悲.
-- 发布时间：2007/5/1 10:48:21
--
|
-- 发布时间：2007/5/1 17:58:29
--
-- 发布时间：2007/5/2 2:03:13
--
| |
-- 发布时间：2007/5/15 21:16:51
--
日落斑竹：学生前来报名，不过正式听课还得过段时间才能来，还在打工。过段时间不做了，把工作甩脱后，一定安安心心、认认真真当个好学生。我这电脑盲早就想请教师傅了，还总感找不到拜师的门路。竟然连“菜鸟”这实惠的版块都不知晓，连找门路都不会，可见我如何之盲了。
昨天才听斜阳兄推荐这个版块,告诉我到此可学到电脑知识。只怪自己太弱智，新学上知青网还不久，到了自己家园版块，也不晓得要出去窜窜门，就象现实生活中一样，都不时新窜门了，也不敢乱窜门了。只晓得守在小家里打转转，偶尔去茶座坐坐，冒想到隔壁隔壁的不少邻居都是好有本事的。这下我知道了以后要多在知青乐园里到处逛逛，学电脑知识、学摄影、学其他......有你们这些好老师义务辛勤执教,老学生我勤奋学习，也一定会有出息的。
-- 发布时间：2007/5/16 0:33:00
--
呵呵！浏阳许多知青都基本学会用框架发帖！其实都很简单，关键是你学不学的问题。