创建表格最方便的方法是在“所见即所得模式”里点击创建表格的按钮[url=http://mod.life.topzj.com/images/common/bb_table.gif]然后输入表格的行数、列数、宽度和底色,这样一个最原始的表格就被制作出来了。但是怎样才能创建一个
漂亮的表格呢?下文为你一一道来。
对于我来说,我会使用“所见即所得模式”来创建出表格的大致框架,然后使用下文提到的代码和技巧来完善整个框架,最后回到“所见即所得模式”里输入内容,并且编辑内容的格式(如粗体、居中、列表等等)。
1. 表格代码简介
制作表格需要使用到以下代码:
复制内容到剪贴板
代码:
[table][/table]
[tr][/tr]
[td][td]2. 表格代码复制内容到剪贴板
代码:
[table]其它代码[/table]以上代码为制作表格的最基础代码,其它关于表格的内容一律添加在以上两个代码的中间。
{table}代码的高级形式为{table=表格宽度, 表格底色},我会在下文里详细介绍。
3. 表格的行与列
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[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"、"2"、"3"和"4")则写在{td}和{/td}中间。
{tr}代码的高级形式为{tr=列底色}
{td}代码的高级形式为{td=单元格所占列数, 单元格所占行数, 单元格宽度}
同上,{tr}和{td}代码的高级形式会在下文里详细介绍。
4.单元格的大小
由于设置单元格的底色时,必须先设定其大小,所以我先说明一下如何设置跨行或者跨列的单元格。在前文里提到了{td}代码的高级形式为{td=单元格所占行数, 单元格所占列数}。“单元格所占行数”和“单元格所占列数”填入相应的正整数,以下用例子说明:
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[table]
[tr][td=1,1]1[/td][td]2[/td][/tr]
[tr][td]3[/td][td]4[/td][/tr]
[/table]当值为“1,1”时,单元格占1行和1列,也就是一个普通的单元格的大小。
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[table]
[tr][td=1,2]1[/td][td]2[/td][/tr]
[tr][td]4[/td][/tr]
[/table]当值为“1,2”时,单元格占1行和2列,相应地,原本内容是“3”的单元格代码需要删掉,因此此时它的位置已经被内容为“1”的单元格所占据。
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[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,设定宽度为多少个像素)。例子:
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[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 的浅蓝色
我们可以改变
(1)整个表格的底色,方法是:
使用{table=表格宽度,XXXXXX}代码(因此设定表格底色的同时,也必须设定表格的宽度),XXXXXX可以是6位的RGB颜色代码(前面需要加上#号),也可以是论坛默认的描述颜色的英文单词(见下表)。6位的RGB颜色代码可以在开始=>附件=>画笔的编辑自定义颜色里获得。
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[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](2)某一行的底色,方法是:
使用{tr=XXXXXX}代码,XXXXXX可以是6位的RGB颜色代码(前面需要加上#号),也可以是论坛默认的描述颜色的英文单词。
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[table=200,#eeeecc]
[tr=yellowgreen][td]1[/td][td]2[/td][/tr]
[tr][td]3[/td][td]4[/td][/tr]
[/table]注意:
● 我们不能单独对某一个单元格设定其底色。
● 表格设定底色后,内部的字体请尽量使用底色的反相色(也就是色环上对角线上的颜色,点击查看色环)
7.表格线(只限横线)加粗
在需要加粗横线的部分,重复创建只有一个单元格的行,并且不要在里面填写任何内容
复制内容到剪贴板
代码:
这里为了排版的好看,我在某些代码后面用硬回车来换行了,在实际使用以下代码的时候,所有硬回车都要删掉,否则会有不良效果
[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]