xliz 发表于 2007-6-20 21:08:24

[教程] 如何制作漂亮的表格?

前言
在NW里创建表格最方便的方法是在“所见即所得模式”里点击创建表格的按钮http://bbs.newwise.com/images/common/bb_table.gif,然后输入表格的行数、列数、宽度和底色,这样一个最原始的表格就被制作出来了。但是怎样才能创建一个漂亮的表格呢?下文为你一一道来。

对于我来说,我会使用“所见即所得模式”来创建出表格的大致框架,然后使用下文提到的代码和技巧来完善整个框架,最后回到“所见即所得模式”里输入内容,并且编辑内容的格式(如粗体、居中、列表等等)。

1. 表格代码简介
在NW里,制作表格需要使用到以下代码:




2. 表格代码
其它代码
以上代码为制作表格的最基础代码,其它关于表格的内容一律添加在以上两个代码的中间。
{table}代码的高级形式为{table=表格宽度, 表格底色},我会在下文里详细介绍。


3. 表格的行与列
1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
34

实例说明,一个表格以{table}开始,以{/table}结束。表格的一行以{tr}开始,以{/tr}结束,并且在其中加插{td}和{/td}来定义一个单元格。而该单元格的内容(例如实例里的"1"、"2"、"3"和"4")则写在{td}和{/td}中间。
{tr}代码的高级形式为{tr=列底色}
{td}代码的高级形式为{td=单元格所占列数, 单元格所占行数, 单元格宽度}
同上,{tr}和{td}代码的高级形式会在下文里详细介绍。

4.单元格的大小
由于设置单元格的底色时,必须先设定其大小,所以我先说明一下如何设置跨行或者跨列的单元格。在前文里提到了{td}代码的高级形式为{td=单元格所占列数, 单元格所占行数}。“单元格所占行数”和“单元格所占列数”填入相应的正整数,以下用例子说明:

1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
34

当值为“1,1”时,单元格占1行和1列,也就是一个普通的单元格的大小。

124

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
4

当值为“1,2”时,单元格占1行和2列,相应地,原本内容是“3”的单元格代码需要删掉,因此此时它的位置已经被内容为“1”的单元格所占据。

134

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

1
34

当值为“2,1”时,单元格占2行和1列,相应地,原本内容是“2”的单元格代码需要删掉,因此此时它的位置已经被内容为“1”的单元格所占据。

5.表格和单元格的宽度
设置表格宽度和单元格宽度的代码分别是:

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

用来设定宽度的数值可以是百分数(以当前页面大小的百分比来设定宽度)或者正整数(1~999,设定宽度为多少个像素)。例子:

1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
34

注意事项:
● 当一行的单元格的总宽度比整个表格所设定的宽度要小得时候,表格宽度 - 同一行单元格总宽度 = 该行没有设定宽度的单元格的宽度。
● 当表格和单元格都没有设定宽度的时候,单元格的宽度由里面内容的长度来决定

6.表格和一列的底色
表格的默认底色为透明,或者可以认为是代码为 #DDE5F2 的浅蓝色

在NW里,我们可以改变
(1)整个表格的底色,方法是:
  使用{table=表格宽度,XXXXXX}代码(因此设定表格底色的同时,也必须设定表格的宽度),XXXXXX可以是6位的RGB颜色代码(前面需要加上#号),也可以是论坛默认的描述颜色的英文单词(见下表)。6位的RGB颜色代码可以在开始=>附件=>画笔的编辑自定义颜色里获得。

1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
34

(2)某一行的底色,方法是:
  使用{tr=XXXXXX}代码,XXXXXX可以是6位的RGB颜色代码(前面需要加上#号),也可以是论坛默认的描述颜色的英文单词。

blacksiennadarkolivegreendarkgreendarkslatebluenavyindigodarkslategraydarkreddarkorangeolivegreentealblueslategraydimgrayredsandybrownyellowgreenseagreenmediumturquoiseroyalbluepurplegraymagentaorangeyellowlimecyandeepskybluedarkorchidsilverpinkwheatlemonchiffonpalegreenpaleturquoiselightblueplumwhite

1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12
34


注意:
● 我们不能单独对某一个单元格设定其底色。
● 表格设定底色后,内部的字体请尽量使用底色的反相色(也就是色环上对角线上的颜色,点击查看色环)

7.表格线(只限横线)加粗
在需要加粗横线的部分,重复创建只有一个单元格的行,并且不要在里面填写任何内容

1234

这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果

12







34

8.实例

下面提供一个评测或者写攻略时会常用的格式:

http://shanachan.files.wordpress.com/2007/04/51z5-yhgql_aa280_.jpg游戏名称Puzzle Quest: Challenge of the Warlords游戏发行D3 Publisher游戏制作1sh Playable ProductionsInfinite Interactive游戏类型Puzzle Action游戏人数1 - 2人游戏发售2007年03月20日(美版)
2007年03月16日(欧版)游戏售价WIFI对应WIFI对应官网地址点击进入 Puzzle Quest是由D3Publish发行的一款另类的、融合了RPG要素的解谜游戏。[*]游戏简介(by myhyli)[*]职业介绍(by xliz)[*]大本营 (Your Citadel) 建筑物功能说明(by XLIz)[*]升级技能点说明(by myhyli)[*]Rune 资料(by 二甲, XLIz)[*]同伴资料(by Morrowind2004, XLIz)[*]敌人捕抓指南(by XLIz)[*]头衔介绍(by 二甲、XLIz)[*]状态说明(by flyegg、二甲、Nickitt、XLIz)[*]敌人捕抓、咒语与坐骑(by XLIz)[*]武器和魔法推介[*]其他它料
http://shanachan.files.wordpress.com/2007/04/51z5-yhgql_aa280_.jpg游戏名称Puzzle Quest: Challenge of the Warlords游戏发行D3 Publisher游戏制作1sh Playable ProductionsInfinite Interactive游戏类型Puzzle Action游戏人数1 - 2人游戏发售2007年03月20日(美版)
2007年03月16日(欧版)游戏售价WIFI对应WIFI对应官网地址点击进入 Puzzle Quest是由D3Publish发行的一款另类的、融合了RPG要素的解谜游戏。[*]游戏简介(by myhyli)[*]职业介绍(by xliz)[*]大本营 (Your Citadel) 建筑物功能说明(by XLIz)[*]升级技能点说明(by myhyli)[*]Rune 资料(by 二甲, XLIz)[*]同伴资料(by Morrowind2004, XLIz)[*]敌人捕抓指南(by XLIz)[*]头衔介绍(by 二甲、XLIz)[*]状态说明(by flyegg、二甲、Nickitt、XLIz)[*]敌人捕抓、咒语与坐骑(by XLIz)[*]武器和魔法推介[*]其他它料
页: [1]
查看完整版本: [教程] 如何制作漂亮的表格?