|
本帖最后由 林 于 2012-11-25 21:11 编辑
于是,这个世界上有种神出鬼没,名叫读者的生物,听说这种生物完全没有读前言的习惯。
所以,至于为什么我突发奇想弄个表格教程什么的,我也完全不知道呢!╮(╯▽╰)╭
或许是脑袋被门夹了,又或者走路摔着了,总之,我就是做了这个教程。。。
坑爹的教程,没用的教程。。。
不知道会不会有人看的教程,就算看了,估计也不会去做的教程。。。
另外,此教程是给对table代码不熟悉的人所开的,高手请绕道。。。
好了,废话就不说了(你不是一直在说废话嘛。。。)
嗯,于是,结果就是这样,我又抽出了我所剩不多的时间,来做了这个教程。。。
希望对大家稍微有点帮助
首先,向大家介绍下排版,为什么要说到排版
orz,饶了我吧,我也不知道的说╮(╯▽╰)╭
请无视,于是,继续
排版嘛,不好说,总之,现在我们所说的排版,以图片+字体+颜色+表格+音乐+视频这样为主。。。
其中,图片的搭配使用我也不太好,可以参照木木姐的,掌声有请hotomi大小姐(请原谅我,简单君绫崎ハヤテ)
字体和颜色就不需要我来说了吧,暴暴受的红大粗也可以考虑,有请阿市`来为我们献上一曲(喂喂,这里可是教程哎,不是50286频道)
于是,我熟悉的也就只有表格了,嗯,现在正式向大家介绍下表格这个坑爹的玩意。。。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
初级篇
首先让我们来了解下table(表格)代码!
table:英文名称table,t a b l e(请注意不要打错),中文名称表、表格、制表
其实,不只是DZ,编辑网页时也会经常用到它
table最先只是被用来制作表格,这样可以很直观的来表现出数据
后来,坑爹的出现了用table来制作网页。。。
于是,经验告诉我们,table是个很坑爹的玩意(至于为什么,自行问度娘),所以,现在已经没人用table来制作网页了。
闲话就不多说了,于是,来简单的介绍下table的构成(话说早就该开始了吧)。
使用table可以调整宽度、背景颜色、行与列等
功能十分强大,熟练使用的话,做个排版不错的帖子还是没问题的
表格由 table 元素以及一个或多个 tr、 td 元素组成。
tr 元素定义表格行,td 元素定义表格列。
[ table] [ /table]
此为表格的框架,任何表格都必须使用98%:设定表格宽度为98%,可以使用固定数值但不能超过560,数值超过则变98%,百分数的最大数值也是98%。
color:设定表格的背景颜色,可以使用颜色的英文单词,也可以使用RGB格式或直接使用颜色代码#ffffff(把这个和RGB格式一对照你就会明白。。。不解释)
[tr] [/tr]是行代码
[td] [/td]则是列代码
一行一列:一行两列:- [tr][td] [/td][td] [/td][/tr]
复制代码 两行两列:- [tr][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td] [/td][/tr]
复制代码 看明白了嘛,仔细看清楚了,请注意,每个元素都是由2个组成,元素必须合拢,[td]元素放置在[tr]元素之内。
以上就是table代码的初级部分。
当然你也可以说我说的没用,高级编辑模式中可以直接创建表格,比我这样直接打那肯定是要方便很多。
但是,如果你不仅仅只是简单的使用表格,也想创建出非常美观的表格,那么以上的部分那就是必须的了。
初级部分到此结束。
实例讲解:
1、创建一个一行一列的表格:
效果图:
代码如下:- [table]
- [tr][td] [/td][/tr]
- [/table]
复制代码 2、创建一个两行两列的表格:
效果图:
代码如下:- [table]
- [tr][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td] [/td][/tr]
- [/table]
复制代码 3、创建一个两行两列,宽度为50%的表格:
效果图:
代码如下:- [table=50%]
- [tr][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td] [/td][/tr]
- [/table]
复制代码 4、创建一个两行两列,宽度为50%,颜色为黑色的表格:
效果图:
代码如下:- [table=50%,#000000]
- [tr][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td] [/td][/tr]
- [/table]
复制代码 注:
1、table代码的颜色代码不可单独使用,必须先定义表格的宽度后才可以定义颜色;
2、table代码不能自定义边框颜色;
3、table代码不能自动居中,如需要则需使用居中代码;
4、table代码最多可以重叠五层,第六层开始代码失效(注意:在DZ编辑框中,只显示四层的表格。。。第五层就不显示了)
5、数字是为了方便看的。。。请无视。。。
本节回顾:
1、简要介绍下table代码。
2、表格是、[tr]、[td]3个元素建立的。
3、表格的宽度和颜色设置。
下集预告:
1.定义行的颜色
2.定义列的宽度
3.合并单元格
4.合并单元格以及设置宽度
5.综合运用
于是,做几个实例表格。。。方便套用吧。。。
效果:
代码:- [table=560,blue]
- [tr][td][/td][/tr]
- [/table]
复制代码 其中,颜色和宽度可以自己设置
效果:
代码:- [table=300,Salmon]
- [tr][td][/td][/tr]
- [/table][table=400,Salmon]
- [tr][td][/td][/tr]
- [/table][table=500,Salmon]
- [tr][td][/td][/tr]
- [/table]
复制代码 颜色和宽度之类的都可以自己设置。。。或者多弄几条也可以
效果图:
代码:- [table=560,#C1CDCD]
- [tr][td][/td][/tr]
- [/table][table=560,#4876FF]
- [tr][td][/td][/tr]
- [/table][table=560,#0000CD]
- [tr][td] [/td][/tr]
- [/table][table=560,#4876FF]
- [tr][td][/td][/tr]
- [/table][table=560,#C1CDCD]
- [tr][td][/td][/tr]
- [/table]
复制代码 于是,其实很多东西很简单。。。
可以自己多尝试尝试
效果图:
代码:- [table=560,black]
- [tr][td][table=560,#ffffff]
- [tr][td] [/td][/tr]
- [/table][table=560,#ffffff]
- [tr][td] [/td][/tr]
- [/table][table=560,#ffffff]
- [tr][td] [/td][/tr]
- [/table][table=560,#ffffff]
- [tr][td] [/td][/tr]
- [/table][table=560,#ffffff]
- [tr][td] [/td][/tr]
- [/table][/td][/tr]
- [/table]
复制代码 颜色什么的都可以自己设置
代码:- [table=560,yellow]
- [tr][td=1,5] [/td][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td] [/td][/tr]
- [tr][td] [/td][td][/td][/tr]
- [tr][td] [/td][td][/td][/tr]
- [tr][td] [/td][td][/td][/tr]
- [/table]
复制代码 每一行也可以设置行颜色。。。
效果图:
代码:- [table=560,#000000]
- [tr][td][table=560,#ff0000]
- [tr][td][table=560,#00ff00]
- [tr][td][table=560,#0000ff]
- [tr][td][table=560,#ffffff]
- [tr][td]嵌套[/td][/tr]
- [/table][/td][/tr]
- [/table][/td][/tr]
- [/table][/td][/tr]
- [/table][/td][/tr]
- [/table]
复制代码 效果图:
旋风管家 CAN'T TAKE MY EYES OFF YOU | | 外文名称 | ハヤテのごとく! | 原作/原案 | 畑健二郎 | 导演/人设 | 工藤昌史 | 脚本 | 小鹿理惠 | 类型 | 搞笑、后宫 | 地区 | 十一区 |
|
代码如下:- [align=center][table=560,#000000]
- [tr][td][table=560,#ffffff]
- [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
- [tr=#FF69B4][td=1,7][align=center][img=160,120]http://m1.img.libdd.com/farm4/2012/0925/22/D3589DD52A623C20D96C432222D07F474F01F5663682_1280_955.jpg[/img][/align][/td][/tr]
- [tr=#9ACD32][td]外文名称[/td][td]ハヤテのごとく![/td][/tr]
- [tr=#9ACD32][td]原作/原案[/td][td]畑健二郎[/td][/tr]
- [tr=#9ACD32][td]导演/人设[/td][td]工藤昌史[/td][/tr]
- [tr=#9ACD32][td]脚本[/td][td]小鹿理惠[/td][/tr]
- [tr=#9ACD32][td]类型[/td][td]搞笑、后宫[/td][/tr]
- [tr=#9ACD32][td]地区[/td][td]十一区[/td][/tr]
- [/table][/td][/tr]
- [/table][/align]
复制代码 可以将文字、图片什么的进行替换。。。
也可以适当增加行、或减少
还可以更改颜色,以及设置宽度。。。自己弄吧
于是,其实我们还可以改动一下。。。
效果图:
旋风管家 CAN'T TAKE MY EYES OFF YOU | | 外文名称 | ハヤテのごとく! | 原作/原案 | 畑健二郎 | 导演/人设 | 工藤昌史 | 脚本 | 小鹿理惠 | 类型 | 搞笑、后宫 | 地区 | 十一区 |
|
代码如下:- [align=center][table=560,#000000]
- [tr][td][table=560,#ffffff]
- [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
- [tr=#FF69B4][td=1,13][align=center][img=160,120]http://m1.img.libdd.com/farm4/2012/0925/22/D3589DD52A623C20D96C432222D07F474F01F5663682_1280_955.jpg[/img][/align][/td][/tr]
- [tr=#9ACD32][td=1,2]外文名称[/td][/tr]
- [tr=#FFA500][td]ハヤテのごとく![/td][/tr]
- [tr=#9ACD32][td=1,2]原作/原案[/td][/tr]
- [tr=#FFA500][td]畑健二郎[/td][/tr]
- [tr=#9ACD32][td=1,2]导演/人设[/td][/tr]
- [tr=#FFA500][td]工藤昌史[/td][/tr]
- [tr=#9ACD32][td=1,2]脚本[/td][/tr]
- [tr=#FFA500][td]小鹿理惠[/td][/tr]
- [tr=#9ACD32][td=1,2]类型[/td][/tr]
- [tr=#FFA500][td]搞笑、后宫[/td][/tr]
- [tr=#9ACD32][td=1,2]地区[/td][/tr]
- [tr=#FFA500][td]十一区[/td][/tr]
- [/table][/td][/tr]
- [/table][/align]
复制代码 于是,这个其实就是在上面的那个改动了下而已。。。
效果图:
代码如下:- [align=center][table=560,#87CEFA]
- [tr][td][table=560]
- [tr=#ffffff][td=30]正方[/td][td][/td][td=1,2,100][align=center]V.S[/align][/td][td][/td][td=30][align=right]反方[/align][/td][/tr]
- [tr=#FFFACD][td=2,1][align=right]理由[/align][/td][td=2,1][align=left]理由[/align][/td][/tr]
- [/table][/td][/tr]
- [/table][/align]
复制代码 于是,这个是辩论所需的。。。正常情况下是不需要了
效果图
代码如下:- [align=center][table=560,#00ff00]
- [tr][td][table=560]
- [tr=#ffffff][td=30]正方[/td][td][/td][td=1,3,100][align=center]V.S[/align][/td][td][/td][td=30][align=right]反方[/align][/td][/tr]
- [tr=#ff0000][td=2,2][align=right]理由[/align][/td][/tr]
- [tr=#0000ff][td=2,1][align=left]理由[/align][/td][/tr]
- [/table][/td][/tr]
- [/table][/align]
复制代码 红于蓝的对抗啊,有木有
还有的实例,先暂停一下。。。有空继续填 |
|