郑南峰后来回复的文章:学习制作表式的代码《一》
学习制作表式的代码《一》
一、简单表格的设计制作
在日常事务中,免不了要设置一些表格,现代社会中,也不是用尺子随便划几下,而是要用代码来制作,这首先就要了解一些代码的作用,为此,就找了些资料,从头学起.一边学做表格,一边就认识代码的含意.试试.
首先看一个最简单的表格:
代码如下:
1 识别代码含意
〖注解;<开始制表格=1是指划线的粗细>〗
〖注解;结束表格〗
空格子 格子结束〖注解;<此格子是做表用的>〗任务 结束任务〖注解;这<任务>就是做格子>〗
〖注解;<空格><任务>格子中加的文字空格结束>任务结束>〗 1 以上可见;后一个代码是前一个代码的补充条件
现在就用这组合成的代码,实习如下
1 以上的代码组合制作,其的结果如下:
结果
1
说明一下以上英文《标签》代码总的含意:〖利用
这个标签来告诉电脑,这是一个表格,加于《标签命今》 BORDER=1 这参数是设定此表格的框线粗细为 1。一组
是设定一个列横格的开始和结束。一组 1 则是设定一个栏位的任务。文字可加插在这其中。〗---------------------------------------------
现在再试试增加二个格子:
代码:
1 2 3 可比性-对比一下
其中比上一个增加部份的代码为
2 3 >结果:
1 2 3
以上英文代码的含意是;
格的行次没有增加,因为这是一个行次的开始和结束, 却增加了二组,因为这是任务,是增加了二个任务. ----------------------------------------------------------------
如果我要再加上一个行次,
详见以下代码:
代码:
1 2 3
4 5 6 可比的地方对比一下
其中比上一个增加部份的代码为
4 5 6 结果
1 2 3 4 5 6 英文代码的含意是;增加一个行次就要同时加入行次的开始和结束代码,
是行次的开始,放的最前边, 是行次的结束,放在代码的最后边.中间有三个任务就要放入三个任务代码,这三个任务就必须要插入制表的中间部位.4 5 6 >注;凡是在引号字码前加上/的>就是此代码的结束,组建一个行次的组合代码4 5 6 ------------------------------------------------------
二、合并表格栏位
左右栏位合并:
如何将 1、2、3 格这行次合并变成一大格
代码:
1
4 5 6 结果:
1 4 5 6
以上可见2、3都消失了,只剩下1,而且该栏的
标签还多了一个英文标签COLSPAN="3",这就是“左右栏位合并”的属性,COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”,也正因如此,本来的两个 都可以省掉,没有必要放入了,因为都被并掉了,换言之必须删掉. 1 2 3 5 6-----------------------------------------------------
上下栏位合并:
将 1、4(上下)格子合并变成一个大格子
代码:
1 2 3
5 6 结果:
有了上理解,就能知道,要合并栏位就一定用代码,现在要把上下合并,就是例图所示,将1与4合并成一个栏,那就用了一个ROWSPAN代码代入到代码中去.这个英文代码的意思是,指令排行上下栏合并,而且要把这代码插入到所需并合目标〖
1 〗标签的中间加插了一个代码 ROWSPAN=2详见以上实际代码,〖1 〗所以,在下一行次中,就必须要把4 去掉,如果仍然保留,就不能成立,从以上二个不同的并合方式中也可见
COLSPAN="3"是左右合并代码,
ROWSPAN=2是上下合并代码.
------------------------------------------------------
三、表格大小的设置和表内安排调节左右居中的设置
如何设定表格宽”和“高”的大小.
实例;假定“宽100、高60的代码如下:
代码:
1 结果:
1
从这实例的代码可见,WIDTH="100"是宽度,HEIGHT="60">是高度,分别加插在
制表代码的前边和制表任务的后边,而且圈在同一个<>引号之内,这样才能控制这个表式的大小.
----------------------------------------------------------
表内(文字或图片)排列调整为《居中》的设置
如果在此基础上要把表格内文字居中,就必须把居中代码ALIGN=CENTER插入,详见以下代码;(表格中的文字或图片居中ALIGN=CENTER)详见以下代码.
ALIGN=CENTER>1 --------------------------------------------------
表内(文字或图片)控制排列调整为《右》的设置
控制置右:利用 ALIGN=RIGHT 可让表中的文字或图片置右、
详见以下代码.
ALIGN=RIGHT VALIGN=TOP>1 -------------------------------------------------------------------------
表内(文字或图片)控制排列调整为《左》的设置
控制置右;利用 ALIGN=LEFT 可让表中的文字或图片置左,
详见以下代码.
ALIGN=LEFT VALIGN=TOP>1 ----------------------------------------------------------------------
经实验可见调节组合的代码含意如下;
ALIGN 是调整排列的代码,
ALIGN=? 是调整排列符加条件
ALIGN=CENTER 以此调整排列为居中
ALIGN=RIGHT 以此调整排列为右边
ALIGN=LEFT 以此调整排列为左边
至于为何要加在
中?因为, 是一个栏位的任务,我们要指定在某一栏位中所需要居中或偏左或偏右,就必须将ALIGN=?加在 的中间,而且还必强制性地加主符加条作居中或偏左或偏右 1 2 3 4------------------------------------------------------
四、表格背景设置
表格背景颜色的设置方法;
利用背景颜色代码BGCOLOR="色码"就行了。
代码:
BGCOLOR=#BBFFFF>
1 2
3 4 结果:
------------------------------------------------------
如何将二个行次加入不同的颜色
将BGCOLOR="颜色码"加在
中,可以指定“一列”的背景颜色: 1 2 3 4代码如下;
1 2
1 2 结果:
以上实例中;第一行次原来的代码是
1 2 加色后的代码是绿色
1 2 所加入的色码为
1 2 3 4 --------------------------------------------------------- 第二行次加入的色码是紫色
1 2 ----------------------------------------------------
分格加色
以上实例又证明了非但可以每个行次加不同的颜色,那就是也能分格来加色.因为将BGCOLOR="颜色码"加在
中,可以指定“一栏”的背景颜色:试试分格加色; 分格加色代码如下:
1 2 3 4 分格加色的效果如下-
结果
五、 表格框线设置
如何设定表格边框的粗细
只要利用BORDER="粗细值"就行了。
代码:
1 结果:
1
------------------------------------------------------
如何设定表格边框的颜色
只要利用BORDERCOLOR="颜色码"就行了
代码:
1 结果:
1
------------------------------------------------------
设定表格的阴影、亮面颜色,让表格看起来更有立体感
只要用同一种类颜色深浅色调,分别加入二次,加入方法详见以下代码,所示利用 BORDERCOLORLIGHT="#颜色码"(亮面设定) BORDERCOLORDARK="颜色码"(暗面设定)就行了。
代码:
1 结果:
1 -------------------------------------------------------
设定表格栏位格线之间的距离
利用CELLSPACING属性也可设定表格栏位格线之间的距离。一般内定值为1-2,通常习惯设为 0 ,下例为了使看得明显些特此设为"8"。
代码:
8">
1 2 结果:
1 2
-------------------------------------------------
学习制作表式的代码《一》 【代码学习】音画制作代码集 【代码学习】音画制作代码集 HTML代码学习(一) 框式图文导航的制作&代码 幻灯片的制作代码 网页常用代码-网页制作学习园地 精美边框代码与制作效果一. PS学习(一)动画图文的制作流程 免费制作空间的代码 各种表格的制作代码 用代码制作的边框 各种表格的制作代码 导航表格的制作【代码】 留言板的制作和代码 多层边框的代码制作 闪字的代码制作 闪字的代码制作 闪字的代码制作 轻松制作一键清除系统垃圾的代码 - 互联友吧的日志 - 网易博客 博客首页框式图文导航的制作及代码 【代码学习】图片/文字修饰效果与代码【图片加边框制作】 引用 精美边框代码与制作效果(一) 各种表格的制作代码(框)