在Google code的wiki page上画表格的技巧

最近在google code上想画一个结构图，
用表格比较理想，那么怎么画出我要的各种效果呢？
研究了一下，发现真的可以画出很多各式各样的表格，
总结一下有什么吧。

1、正常的表格。

figure-T1

代码很简单，两个“||”之间是一个格子，它会自动将下面一行的宽度和上面一行对齐，即，一列一个宽度。

||C1R1||||C2R1||||C3R1||
||C1R2||||C2R2||||C3R2||
||C1R3||||C2R3||||C3R3||

 

2、金子塔状的表格.(左对齐)

figure-T2

这个代码也很简单,同一列上不要有cell的地方就留一个"||||"，或者"|| ||",再或者索性不写,那么就被处理成没有cell了.

||C1R1||||||||||
||C1R2||||C2R2||||||
||C1R3||||C2R3||||C3R3||
//或者
||C1R1|||| |||| ||
||C1R2||||C2R2|||| ||
||C1R3||||C2R3||||C3R3||
//再或者
||C1R1||
||C1R2||||C2R2||
||C1R3||||C2R3||||C3R3||

 

3、金字塔状的表格。（右对齐）

figure-T3

这次一定要注意了，要留空的地方需要写成"|| ||"。即在两个"||"之间要插入一个空格，这样才能画出座金字塔的效果。

|| |||| ||||C3R1||
|| ||||C2R2||||C3R2||
||C1R3||||C2R3||||C3R3||

 

4、“合并单元格”效果的表格。

figure-T4

如果在华右对齐金字塔的时候,没有在两个"||"中间插入空格会是怎么样的呢?就是上图的效果.

||||||||||C3R1||
||||||C2R2||||C3R2||
||C1R3||||C2R3||||C3R3||

 

这样，我们就能随心所欲的画任何想要的表格效果，比如下面。

figure-T5

 

 

还有可能有一个问题，
如果我要两张表，那么是不是下一张表的列宽都是对齐上一张表的呢？

figure-TT1
 
代码如下：

||C1R1||||||||||
||C1R2||||C2R2||||||
||C1R3||||C2R3||||C3R3||
||Column1Row1||||Column2Row1||||Column3Row1||
||Column1Row2||||Column2Row2||||Column3Row2||
||Column1Row3||||Column2Row3||||Column3Row3||

这样子只要在两张表中间空一行就好了额。

figure-TT2

代码如下：

||C1R1||||||||||
||C1R2||||C2R2||||||
||C1R3||||C2R3||||C3R3||

||Column1Row1||||Column2Row1||||Column3Row1||
||Column1Row2||||Column2Row2||||Column3Row2||
||Column1Row3||||Column2Row3||||Column3Row3||

 

虽然浪费时间，不过觉得挺有趣的~
只是有一个问题我百思不得其解，
如果我要放一个空的cell在那里要用什么代码呢？
who can tell me？

另外。。。

我还做了一个自动转化的小工具，
还在进一步完善，感兴趣的可以联系我的。

xuyang22@gmail.com

[2009-01-31补充]

突然发现上面提到的疑问自己解决了，
之前写这个东西的时候所有的表格都是在maxthon2.0里面截图的，
看来浏览器的执行结果对于表格是有影响的。
用maxthon2.0里面 # 的自动标号也是执行错误的，
所以一切要以Chrome为准，看看google官方的理解是什么 = =

//同样的还是这个代码，两个||之间插入空格
|| |||| ||||C3R1||
|| ||||C2R2||||C3R2||
||C1R3||||C2R3||||C3R3||

Chrome就画出了空格，