Nintendo World BBS

 找回密码
 注册
查看: 25949|回复: 0

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

 关闭 [复制链接]

0

主题

0

好友

3487

积分

Nw精英

Rank: 6Rank: 6

蘑菇
2 朵
N币
3877 枚
帖子
2893
注册时间
2002-6-27
发表于 2007-6-20 21:08:24 |显示全部楼层
前言
在NW里创建表格最方便的方法是在“所见即所得模式”里点击创建表格的按钮,然后输入表格的行数、列数、宽度和底色,这样一个最原始的表格就被制作出来了。但是怎样才能创建一个漂亮的表格呢?下文为你一一道来。

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

1. 表格代码简介
在NW里,制作表格需要使用到以下代码:
  1. [table][/table]
  2. [tr][/tr]
  3. [td][td]
复制代码


2. 表格代码
  1. [table]其它代码[/table]
复制代码

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


3. 表格的行与列
12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table]
  3. [tr][td]1[/td][td]2[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码

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

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

12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table]
  3. [tr][td=1,1]1[/td][td]2[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码

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

12
4


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table]
  3. [tr][td=1,2]1[/td][td]2[/td][/tr]
  4. [tr][td]4[/td][/tr]
  5. [/table]
复制代码

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

1
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table]
  3. [tr][td=2,1]1[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码

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

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

  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table=表格宽度] 和 [td=单元格所占列数, 单元格所占行数, 单元格宽度]
复制代码

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

12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table=200]
  3. [tr][td=1,1,100]1[/td][td=1,1,100]2[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码

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

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

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

12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table=200,#eeeecc]
  3. [tr][td=1,1,100]1[/td][td=1,1,100]2[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码

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

blacksiennadarkolivegreendarkgreendarkslatebluenavyindigodarkslategray
darkreddarkorangeolivegreentealblueslategraydimgray
redsandybrownyellowgreenseagreenmediumturquoiseroyalbluepurplegray
magentaorangeyellowlimecyandeepskybluedarkorchidsilver
pinkwheatlemonchiffonpalegreenpaleturquoiselightblueplumwhite


12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table=200,#eeeecc]
  3. [tr=yellowgreen][td]1[/td][td]2[/td][/tr]
  4. [tr][td]3[/td][td]4[/td][/tr]
  5. [/table]
复制代码


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

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

12
34


  1. 这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
  2. [table=200,#eeeecc]
  3. [tr=yellowgreen][td]1[/td][td]2[/td][/tr]
  4. [tr][td=2,1][/td][/tr]
  5. [tr][td=2,1][/td][/tr]
  6. [tr][td=2,1][/td][/tr]
  7. [tr][td=2,1][/td][/tr]
  8. [tr][td=2,1][/td][/tr]
  9. [tr][td=2,1][/td][/tr]
  10. [tr][td=2,1][/td][/tr]
  11. [tr][td]3[/td][td]4[/td][/tr]
  12. [/table]
复制代码

8.实例

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

游戏名称
Puzzle Quest: Challenge of the Warlords
游戏发行
D3 Publisher
游戏制作
1sh Playable Productions
Infinite 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. [table=90%,#c1c183][tr=white][td=1,9][font=Tahoma][align=center][img=230,230]http://shanachan.files.wordpress.com/2007/04/51z5-yhgql_aa280_.jpg[/img][/align][/font][/td][td][b][font=Tahoma]游戏名称[/font][/b][/td][td][align=left][font=Tahoma]Puzzle Quest: Challenge of the Warlords[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏发行[/font][/b][/td][td][align=left][font=Tahoma]D3 Publisher[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏制作[/font][/b][/td][td][align=left][font=Tahoma]1sh Playable Productions[/font][/align][align=left][font=Tahoma]Infinite Interactive[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏类型[/font][/b][/td][td][align=left][font=Tahoma]Puzzle Action[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏人数[/font][/b][/td][td][align=left][font=Tahoma]1 - 2人[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏发售[/font][/b][/td][td][align=left][font=Tahoma]2007年03月20日(美版)
  2. 2007年03月16日(欧版)[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]游戏售价[/font][/b][/td][td][align=left][font=Tahoma][/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]WIFI对应[/font][/b][/td][td][align=left][font=Tahoma]WIFI对应[/font][/align][/td][/tr][tr=white][td][b][font=Tahoma]官网地址[/font][/b][/td][td][align=left][url=http://www.infinite-interactive.com/puzzlequest][font=Tahoma][color=#0000ff]点击进入[/color][/font][/url][/align][tr][td=3,1][font=Tahoma][color=#0000ff][/color][/font][/td][/tr][tr][td=3,1][font=Tahoma][color=#0000ff][/color][/font][/td][/tr][tr][td=3,1][font=Tahoma][color=#0000ff][/color][/font][/td][/tr][tr][td=3,1][font=Tahoma][color=#0000ff][/color][/font][/td][/tr][tr=white][td=3,1][b][align=center][font=Tahoma][/font][/align][align=center][font=Tahoma] [/font][/align][align=center][font=Tahoma]Puzzle Quest是由D3Publish发行的一款另类的、融合了RPG要素的解谜游戏。[/font][/align][list=1][*][font=Tahoma]游戏简介(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)[*]武器和魔法推介[*]其他它料[/font][/b][/list][/td][/tr][/table]
复制代码
宁卖祖宗田,不卖祖宗言
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

手机版|Archiver|任天堂世界 ( 京ICP备05022083号-1 )

京公网安备 11010202001397号

GMT+8, 2017-4-29 01:53 , Processed in 0.123635 second(s), 19 queries , Gzip On.

Powered by Discuz! X2.5 Licensed

© 2001-2012 Comsenz Inc.

回顶部