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

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

前言
在NW里创建表格最方便的方法是在“所见即所得模式”里点击创建表格的按钮

，然后输入表格的行数、列数、宽度和底色，这样一个最原始的表格就被制作出来了。但是怎样才能创建一个漂亮的表格呢？下文为你一一道来。

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

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

[table][/table]
[tr][/tr]
[td][td]

复制代码

2. 表格代码

[table]其它代码[/table]

复制代码

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

3. 表格的行与列

1	2
3	4

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

复制代码

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

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

1	2
3	4

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

复制代码

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

1	2
	4

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

复制代码

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

1
3	4

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

复制代码

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

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

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

复制代码

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

1	2
3	4

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

复制代码

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

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

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

1	2
3	4

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

复制代码

（２）某一行的底色，方法是：
　　使用｛tr＝XXXXXX｝代码，XXXXXX可以是6位的RGB颜色代码（前面需要加上#号），也可以是论坛默认的描述颜色的英文单词。

black	sienna	darkolivegreen	darkgreen	darkslateblue	navy	indigo	darkslategray
darkred	darkorange	olive	green	teal	blue	slategray	dimgray
red	sandybrown	yellowgreen	seagreen	mediumturquoise	royalblue	purple	gray
magenta	orange	yellow	lime	cyan	deepskyblue	darkorchid	silver
pink	wheat	lemonchiffon	palegreen	paleturquoise	lightblue	plum	white

1	2
3	4

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

复制代码

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

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

1	2







3	4

这里为了排版的好看，我在某些代码后面用硬回车来换行了，在实际使用以下代码的时候，所有硬回车都要删掉，否则会有不良效果
[table=200,#eeeecc]
[tr=yellowgreen][td]1[/td][td]2[/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td=2,1][/td][/tr]
[tr][td]3[/td][td]4[/td][/tr]
[/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) 武器和魔法推介其他它料

[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日(美版)
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]

复制代码

		自动登录	找回密码
密码			注册