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

yuugi

前言

创建表格最方便的方法是在“所见即所得模式”里点击创建表格的按钮，然后输入表格的行数、列数、宽度和底色，这样一个最原始的表格就被制作出来了。但是怎样才能创建一个漂亮的表格呢？下文为你一一道来。

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

1. {table}{/table}
   
2. [tr][/tr]
   
3. [td][td]

复制代码

2. 表格代码

1. {table}其它代码{/table}

复制代码

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

3. 表格的行与列

1	2
3	4

1. {table}
   
2. [tr][td]1[/td][td]2[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/table}

复制代码

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

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

1	2
3	4

1. {table}
   
2. [tr][td=1,1]1[/td][td]2[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/table}

复制代码

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

1	2
	4

1. {table}
   
2. [tr][td=1,2]1[/td][td]2[/td][/tr]
   
3. [tr][td]4[/td][/tr]
   
4. {/table}

复制代码

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

1
3	4

1. {table}
   
2. [tr][td=2,1]1[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/table}
   

复制代码

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

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

1. [table=表格宽度] 和 [td=单元格所占列数, 单元格所占行数, 单元格宽度]

复制代码

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

1	2
3	4

1. {table=200}
   
2. [tr][td=1,1,100]1[/td][td=1,1,100]2[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/table}

复制代码

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

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

1	2
3	4

1. {table=200,#eeeecc}
   
2. [tr][td=1,1,100]1[/td][td=1,1,100]2[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/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

1. {table=200,#eeeecc}
   
2. [tr=yellowgreen][td]1[/td][td]2[/td][/tr]
   
3. [tr][td]3[/td][td]4[/td][/tr]
   
4. {/table}

复制代码

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

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

1	2
3	4

1. {table=200,#eeeecc}
   
2. [tr=yellowgreen][td]1[/td][td]2[/td][/tr]
   
3. [tr=white][td=2,1][/td][/tr]
   
4. [tr][td]3[/td][td]4[/td][/tr]
   
5. {/table}

复制代码

8.实例

No.	ALBUM	TITLE	artist	date	length
Vol 226
01	empty ocean	empty ocean	桃梨	2005	5:46
02	empty ocean	青い鳥になりたい	桃梨	2005	4:29
03	empty ocean	モノローグ	桃梨	2005	4:48
04	empty ocean	My Ripple -地球の沈黙-	桃梨	2005	5:43
05	sympathizer	sympathizer	栗林みな実	2009	4:17
06	sympathizer	空のこたえ	栗林みな実	2009	4:42
07	ごっちる	燃えて咲く花	遊女	2007	2:16
08	ごっちる	天からの恵み	遊女	2007	2:08
09	コハナとボウの森 Initial01	SYLVAN MALCHUT -ReCall-	桃梨	2007	4:15
10	コハナとボウの森 Initial01	Lost Babylon	桃梨	2007	4:04

1. {table=700,lemonchiffon}[tr=orange][td=1,1,20][b][align=center]No.[/align][/b][/td][td=1,1,215][b][align=center]ALBUM[/align][/b][/td][td=1,1,215][b][align=center]TITLE[/align][/b][/td][td=1,1,180][b][align=center]artist[/align][/b][/td][td=1,1,40][b][align=center]date[/align][/b][/td][td=1,1,40][b][align=center]length[/align][/b][/td][/tr]
   
2. [tr=yellowgreen][td=6,1][size=4][color=Purple][b]Vol 226[/b][/color][/size][/td][/tr]
   
3. [tr][td]01[/td][td]empty ocean[/td][td]empty ocean[/td][td]桃梨[/td][td]2005[/td][td]5:46[/td][/tr]
   
4. [tr][td]02[/td][td]empty ocean[/td][td]青い鳥になりたい[/td][td]桃梨[/td][td]2005[/td][td]4:29[/td][/tr]
   
5. [tr][td]03[/td][td]empty ocean[/td][td]モノローグ[/td][td]桃梨[/td][td]2005[/td][td]4:48[/td][/tr]
   
6. [tr][td]04[/td][td]empty ocean[/td][td]My Ripple -地球の沈黙-[/td][td]桃梨[/td][td]2005[/td][td]5:43[/td][/tr]
   
7. [tr][td]05[/td][td]sympathizer[/td][td]sympathizer[/td][td]栗林みな実[/td][td]2009[/td][td]4:17[/td][/tr]
   
8. [tr][td]06[/td][td]sympathizer[/td][td]空のこたえ[/td][td]栗林みな実[/td][td]2009[/td][td]4:42[/td][/tr]
   
9. [tr][td]07[/td][td]ごっちる[/td][td]燃えて咲く花[/td][td]遊女[/td][td]2007[/td][td]2:16[/td][/tr]
   
10. [tr][td]08[/td][td]ごっちる[/td][td]天からの恵み[/td][td]遊女[/td][td]2007[/td][td]2:08[/td][/tr]
    
11. [tr][td]09[/td][td]コハナとボウの森 Initial01[/td][td]SYLVAN MALCHUT -ReCall-[/td][td]桃梨[/td][td]2007[/td][td]4:15[/td][/tr]
    
12. [tr][td]10[/td][td]コハナとボウの森 Initial01[/td][td]Lost Babylon[/td][td]桃梨[/td][td]2007[/td][td]4:04[/td][/tr]{/table}

复制代码

注1：本文修改自NWBBS的xliz大的教程
注2：文中代码部分的[table]用{table}代替了

小鱼

啊哈，Y叔这个教程好详细，支持一个，收藏去慢慢看～

中微小

绝对是精华
可惜咱大概永远也用不上，OTZ

NAGA

是用{table}的么…怪不得我有时莫名其妙地设置失败…

PS:原来是X的…我说怎么面熟…

yuugi

4# NAGA

都是用[],因某些问题，文中用{}代替了

axiset

太实用了，收藏。以后可以试试。

illusion777

收藏了先，可能会用到

NAGA

5# yuugi


= =那奇怪了……算了不影响使用，论坛代码没有反义符号么= =……

罪与罚

说实话，因为是懒的原故没想到在论谭上做表格是这么麻烦的事情哪。