(第一课 )学习制作表格（基础练习） |
第一课学员应按老师提供的教材制作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> |
