H5游戏论坛

 找回密码
 入驻H5
查看: 8040|回复: 161

[其它] [教程]Discuz!论坛table(表格)代码使用教学

[复制链接]

半仙 - 半仙

发表于 2012-11-19 14:47:19 | 显示全部楼层 |阅读模式
本帖最后由 林 于 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]
此为表格的框架,任何表格都必须使用
  1. [table=98%,clor]
复制代码
98%:设定表格宽度为98%,可以使用固定数值但不能超过560,数值超过则变98%,百分数的最大数值也是98%。
color:设定表格的背景颜色,可以使用颜色的英文单词,也可以使用RGB格式或直接使用颜色代码#ffffff(把这个和RGB格式一对照你就会明白。。。不解释)

[tr] [/tr]是行代码
[td] [/td]则是列代码

一行一列:
  1. [tr][td] [/td][/tr]
复制代码
一行两列:
  1. [tr][td] [/td][td] [/td][/tr]
复制代码
两行两列:
  1. [tr][td] [/td][td] [/td][/tr]
  2. [tr][td] [/td][td] [/td][/tr]
复制代码
看明白了嘛,仔细看清楚了,请注意,每个元素都是由2个组成,元素必须合拢,[td]元素放置在[tr]元素之内。

以上就是table代码的初级部分。
当然你也可以说我说的没用,高级编辑模式中可以直接创建表格,比我这样直接打那肯定是要方便很多。
但是,如果你不仅仅只是简单的使用表格,也想创建出非常美观的表格,那么以上的部分那就是必须的了。

初级部分到此结束。

实例讲解:
1、创建一个一行一列的表格:
效果图:
1
代码如下:
  1. [table]
  2. [tr][td] [/td][/tr]
  3. [/table]
复制代码
2、创建一个两行两列的表格:
效果图:
12
22
代码如下:
  1. [table]
  2. [tr][td] [/td][td] [/td][/tr]
  3. [tr][td] [/td][td] [/td][/tr]
  4. [/table]
复制代码
3、创建一个两行两列,宽度为50%的表格:
效果图:
12
22
代码如下:
  1. [table=50%]
  2. [tr][td] [/td][td] [/td][/tr]
  3. [tr][td] [/td][td] [/td][/tr]
  4. [/table]
复制代码
4、创建一个两行两列,宽度为50%,颜色为黑色的表格:
效果图:
12
22
代码如下:
  1. [table=50%,#000000]
  2. [tr][td] [/td][td] [/td][/tr]
  3. [tr][td] [/td][td] [/td][/tr]
  4. [/table]
复制代码
注:
1、table代码的颜色代码不可单独使用,必须先定义表格的宽度后才可以定义颜色;
2、table代码不能自定义边框颜色;
3、table代码不能自动居中,如需要则需使用居中代码;
4、table代码最多可以重叠五层,第六层开始代码失效(注意:在DZ编辑框中,只显示四层的表格。。。第五层就不显示了)
5、数字是为了方便看的。。。请无视。。。

本节回顾:
1、简要介绍下table代码。
2、表格是、[tr]、[td]3个元素建立的。
3、表格的宽度和颜色设置。

下集预告:
1.定义行的颜色
2.定义列的宽度
3.合并单元格
4.合并单元格以及设置宽度
5.综合运用

于是,做几个实例表格。。。方便套用吧。。。
效果:
代码:
  1. [table=560,blue]
  2. [tr][td][/td][/tr]
  3. [/table]
复制代码
其中,颜色和宽度可以自己设置

效果:
代码:
  1. [table=300,Salmon]
  2. [tr][td][/td][/tr]
  3. [/table][table=400,Salmon]
  4. [tr][td][/td][/tr]
  5. [/table][table=500,Salmon]
  6. [tr][td][/td][/tr]
  7. [/table]
复制代码
颜色和宽度之类的都可以自己设置。。。或者多弄几条也可以

效果图:
代码:
  1. [table=560,#C1CDCD]
  2. [tr][td][/td][/tr]
  3. [/table][table=560,#4876FF]
  4. [tr][td][/td][/tr]
  5. [/table][table=560,#0000CD]
  6. [tr][td] [/td][/tr]
  7. [/table][table=560,#4876FF]
  8. [tr][td][/td][/tr]
  9. [/table][table=560,#C1CDCD]
  10. [tr][td][/td][/tr]
  11. [/table]
复制代码
于是,其实很多东西很简单。。。
可以自己多尝试尝试

效果图:
代码:
  1. [table=560,black]
  2. [tr][td][table=560,#ffffff]
  3. [tr][td] [/td][/tr]
  4. [/table][table=560,#ffffff]
  5. [tr][td] [/td][/tr]
  6. [/table][table=560,#ffffff]
  7. [tr][td] [/td][/tr]
  8. [/table][table=560,#ffffff]
  9. [tr][td] [/td][/tr]
  10. [/table][table=560,#ffffff]
  11. [tr][td] [/td][/tr]
  12. [/table][/td][/tr]
  13. [/table]
复制代码
颜色什么的都可以自己设置

代码:
  1. [table=560,yellow]
  2. [tr][td=1,5] [/td][td] [/td][td] [/td][/tr]
  3. [tr][td] [/td][td] [/td][/tr]
  4. [tr][td] [/td][td][/td][/tr]
  5. [tr][td] [/td][td][/td][/tr]
  6. [tr][td] [/td][td][/td][/tr]
  7. [/table]
复制代码
每一行也可以设置行颜色。。。

效果图:
嵌套
代码:
  1. [table=560,#000000]
  2. [tr][td][table=560,#ff0000]
  3. [tr][td][table=560,#00ff00]
  4. [tr][td][table=560,#0000ff]
  5. [tr][td][table=560,#ffffff]
  6. [tr][td]嵌套[/td][/tr]
  7. [/table][/td][/tr]
  8. [/table][/td][/tr]
  9. [/table][/td][/tr]
  10. [/table][/td][/tr]
  11. [/table]
复制代码
效果图:
旋风管家 CAN'T TAKE MY EYES OFF YOU

                               
登录/注册后可看大图
外文名称ハヤテのごとく!
原作/原案畑健二郎
导演/人设工藤昌史
脚本小鹿理惠
类型搞笑、后宫
地区十一区
代码如下:
  1. [align=center][table=560,#000000]
  2. [tr][td][table=560,#ffffff]
  3. [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
  4. [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]
  5. [tr=#9ACD32][td]外文名称[/td][td]ハヤテのごとく![/td][/tr]
  6. [tr=#9ACD32][td]原作/原案[/td][td]畑健二郎[/td][/tr]
  7. [tr=#9ACD32][td]导演/人设[/td][td]工藤昌史[/td][/tr]
  8. [tr=#9ACD32][td]脚本[/td][td]小鹿理惠[/td][/tr]
  9. [tr=#9ACD32][td]类型[/td][td]搞笑、后宫[/td][/tr]
  10. [tr=#9ACD32][td]地区[/td][td]十一区[/td][/tr]
  11. [/table][/td][/tr]
  12. [/table][/align]
复制代码
可以将文字、图片什么的进行替换。。。
也可以适当增加行、或减少
还可以更改颜色,以及设置宽度。。。自己弄吧

于是,其实我们还可以改动一下。。。
效果图:
旋风管家 CAN'T TAKE MY EYES OFF YOU

                               
登录/注册后可看大图
外文名称
ハヤテのごとく!
原作/原案
畑健二郎
导演/人设
工藤昌史
脚本
小鹿理惠
类型
搞笑、后宫
地区
十一区
代码如下:
  1. [align=center][table=560,#000000]
  2. [tr][td][table=560,#ffffff]
  3. [tr=#63B8FF][td=3,1][align=center]旋风管家 CAN'T TAKE MY EYES OFF YOU[/align][/td][/tr]
  4. [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]
  5. [tr=#9ACD32][td=1,2]外文名称[/td][/tr]
  6. [tr=#FFA500][td]ハヤテのごとく![/td][/tr]
  7. [tr=#9ACD32][td=1,2]原作/原案[/td][/tr]
  8. [tr=#FFA500][td]畑健二郎[/td][/tr]
  9. [tr=#9ACD32][td=1,2]导演/人设[/td][/tr]
  10. [tr=#FFA500][td]工藤昌史[/td][/tr]
  11. [tr=#9ACD32][td=1,2]脚本[/td][/tr]
  12. [tr=#FFA500][td]小鹿理惠[/td][/tr]
  13. [tr=#9ACD32][td=1,2]类型[/td][/tr]
  14. [tr=#FFA500][td]搞笑、后宫[/td][/tr]
  15. [tr=#9ACD32][td=1,2]地区[/td][/tr]
  16. [tr=#FFA500][td]十一区[/td][/tr]
  17. [/table][/td][/tr]
  18. [/table][/align]
复制代码
于是,这个其实就是在上面的那个改动了下而已。。。

效果图:
正方
V.S
反方
理由
理由
代码如下:
  1. [align=center][table=560,#87CEFA]
  2. [tr][td][table=560]
  3. [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]
  4. [tr=#FFFACD][td=2,1][align=right]理由[/align][/td][td=2,1][align=left]理由[/align][/td][/tr]
  5. [/table][/td][/tr]
  6. [/table][/align]
复制代码
于是,这个是辩论所需的。。。正常情况下是不需要了

效果图
正方
V.S
反方
理由
理由
代码如下:
  1. [align=center][table=560,#00ff00]
  2. [tr][td][table=560]
  3. [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]
  4. [tr=#ff0000][td=2,2][align=right]理由[/align][/td][/tr]
  5. [tr=#0000ff][td=2,1][align=left]理由[/align][/td][/tr]
  6. [/table][/td][/tr]
  7. [/table][/align]
复制代码
红于蓝的对抗啊,有木有

还有的实例,先暂停一下。。。有空继续填

点评

研究了很久啊  发表于 2012-11-19 18:42
有爱就有H5~

半仙 - 半仙

 楼主| 发表于 2012-11-19 14:47:20 | 显示全部楼层
本帖最后由 林 于 2012-11-20 12:46 编辑

中级篇

so,于是,闲话少说,现在来谈下中级篇。。。
这篇如果你可以熟练使用的话,那么你就可以出师了。。。

现在,我们来详细了解一下行代码[tr]

定义行的颜色
  1. [tr=color]
复制代码
此处color依旧为颜色代码

注:如果table定义了颜色之后,此处会失效。。。优先选择行颜色。。。

定义列的宽度
  1. [td=500]
复制代码
此处定义列的宽度,可以为固定数值,也可以为百分数。固定数值不得大于560,否则会变成98%,百分数最大值也只为98%

合并单元格
  1. [td=2,1]
复制代码
第一个数值为列,第二个为行。。。这样好记点
于是,这个的意思就是,2列,1行合并为一个单元格
  1. [td=3,1]
复制代码
这个的意思就是,3列,1行合并为一个单元格
  1. [td=1,2]
复制代码
这个的意思就是,1列,2行合并为一个单元格
  1. [td=2,2]
复制代码
这个的意思就是,2列,2行合并为一个单元格

这样就清楚了吧,于是,下面还有实例,先看看就好,过会详细介绍

于是,合并行和合并列也介绍完毕。。。

定义合并单元格的宽度
  1. [td=2,1,50%]
复制代码
so,于是,宽度需放在后面

实例讲解:
综合运用
效果图:
1
15
13 57
12345678

代码如下:
  1. [table=500]
  2. [tr=red][td=8,1]1[/td][/tr]
  3. [tr=blue][td=4,1]1[/td][td=4,1]5[/td][/tr]
  4. [tr=yellow][td=2,1]1[/td][td=2,1]3[/td][td=2,1]5[/td][td=2,1]7[/td][/tr]
  5. [tr=green][td]1[/td][td]2[/td][td]3[/td][td]4[/td][td]5[/td][td]6[/td][td]7[/td][td]8[/td][/tr]
  6. [/table]
复制代码
解说:
1.定义表格的宽度为500;
2.定义行的颜色为red(红色);定义合并8列1行;
3.定义行的颜色为blue(蓝色);定义合并4列1行*2;
4.定义行的颜色为yellow(黄 色);定义合并2列1行*4;
5.定义行的颜色为green(绿色);没有定义。。。就是一个很简单的列*8。

so,于是,通过这个案例,明白了一点表格的应用了嘛?
下面,继续讲解一个几个。。。

效果图:
1
23
45
666666

代码如下:
  1. [table=500]
  2. [tr=red][td=8,1]1[/td][/tr]
  3. [tr=blue][td=4,2]2[/td][td=4,1]3[/td][/tr]
  4. [tr=yellow][td=2,1]4[/td][td=2,2]5[/td][/tr]
  5. [tr=green][td]6[/td][td]6[/td][td]6[/td][td]6[/td][td]6[/td][td]6[/td][/tr]
  6. [/table]
复制代码
解说:so,这个比上一个稍微复杂点。。。
1.定义表格的宽度为500;
2.定义行的颜色为red(红色);定义合并8列1行;
3.定义行色颜色为blue(蓝色);定义合并4列2行;定义合并4列1行;
4.定义行的颜色为yellow(黄 色);定义合并2列2行;定义合并2列1行;
5.定义行的颜色为green(绿色);定义行*6

注意:
第4行代码,由于第3行的代码合并了2行,所以,此处代码显示在后面,可以参照上一个例子来看一看。。。
第5行代码,由于第4行的代码也合并了2行,所以,此处也跳过去。。。

表格的嵌套使用:
效果图:
1
代码如下:
  1. [table=500,black]
  2. [tr][td][table=500,yellow]
  3. [tr][td]1[/td][/tr]
  4. [/table][/td][/tr]
  5. [/table]
复制代码
解说:
1.定义表格的宽度为500,;定义表格的颜色为black(黑色);
2.定义一行一列;嵌套一个表格(宽度为500,颜色为yellow(黄 色));
3.定义嵌套的表格为一行一列;
4.定义关闭嵌套的表格;关闭一列一行;
5.定义关闭这个表格。

于是,关于嵌套表格就不详细介绍了,大家想必也看的多了,掌声有请嵌套表格使用的集大成者琉公主:@琉、大成喵:@膜拜殿下。

于是,本章节讲解完毕,预知后事如何,请看下集,table讲解之高级篇。。。

注意:
1.宽度数值可以设置为固定值(最大560),也可以设置为百分数(最大98%)。
2.table代码最多可以重叠五层,第六层开始代码失效(注意:在DZ编辑框中,只显示四层的表格。。。第五层就不显示了)
3.当行定义了颜色之后,table的定义颜色会在本行失效
4.颜色代码
可以参照此网站:http://www.wescn.com/tool/color_3.html
英文单词的支持度有限,最好使用RGB或六位十六进制数来表示(推荐这个,因为看起来也方便点)

本章回顾:
1.定义行的颜色
2.定义列的宽度
3.合并单元格
4.合并单元格以及设置宽度
5.综合运用

下集预告:
1.坑爹的应用和实例
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

 楼主| 发表于 2012-11-19 14:47:21 | 显示全部楼层
本帖最后由 林 于 2012-11-19 19:31 编辑

正常情况下。。。估计是用不到我现在所说的
所以,如果你能耐心看到这里,那么,我就可以宣布,你已经可以出师了,应付正常的表格排版已经没有太大问题了
此篇虽名高级篇,实为坑爹篇。。。

so,于是,高级篇讲解正式开始:

高级篇
效果图:
1 2 3 4 5 6 7 8 9 10
2   
3
4
5
1颜色
2颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色

于是,此为我从另一个地方拿来的。。。因为这坑爹的东西的确是很无语。。。
先以这个来讲解一下,请看代码
代码如下:
  1. [table=98%,black]
  2. [tr][td][color=#ff0000]1 [/color][/td][td][color=#ff0000]2 [/color][/td][td][color=#ff0000]3 [/color][/td][td][color=#ff0000]4 [/color][/td][td][color=#ff0000]5 [/color][/td][td][color=#ff0000]6 [/color][/td][td][color=#ff0000]7 [/color][/td][td][color=#ff0000]8 [/color][/td][td][color=#ff0000]9 [/color][/td][td][color=#ff0000]10 [/color][/td][/tr]
  3. [tr=yellow][td=3,1] [/td][td] [/td][td] [/td][td] 2[/td][td=2,1] [/td][td]  [/td][td] [/td][/tr]
  4. [tr=white][td=1,3] [/td][td] [/td][td] [/td][td] [/td][td=1,2] [/td][td] 3[/td][td] [/td][td] [/td][td=2,1] [/td][/tr]
  5. [tr=blue][td] [/td][td] [/td][td] [/td][td] 4[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  6. [tr=green][td] [/td][td] [/td][td] [/td][td] [/td][td] 5[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  7. [tr=#cccccc][td=1,10]1颜色[/td][/tr]
  8. [tr=#CCFF99][td=1,9]2颜色[/td][/tr]
  9. [tr=#33CC00][td=1,8]3颜色[/td][/tr]
  10. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
  11. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  12. [tr=#330000][td=1,5]6颜色[/td][/tr]
  13. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  14. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  15. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  16. [tr=#9966cc][td]10颜色[/td][/tr]
  17. [/table]
复制代码
解说:看到这么多代码,是不是不相信的说,你会说,不就是6行嘛,怎么会出现这么多代码
于是,我可以很肯定以及确定乃至确信的告诉你,没错。。。请听我慢慢分析。。。

1.定义table代码的宽度为98%;定义表格的颜色为black;
2.定义了列*10;字体颜色什么的就无视吧。。。
3.
  1. [tr=yellow]
复制代码
此处才为真正的第3行,我们是按行算的。。。也就是[tr]代码。。。

第3行(其实是第2行,因为加上了表格那一行)定义了颜色为yellow(table颜色失效);定义合并3列1行;定义1列*3;定义合并2列1行;定义1列*2;
4.定义行颜色为white;定义合并1列3行;定义1列*3;定义合并1列2行;定义1列*3;定义合并2列1行;
5.定义行颜色为blue;定义1列*8(由于此行有2个单元格被合并了,所以,只需要8列即可);
6.定义行颜色为green;定义1列*9(由于此行有1个单元格被合并了,多以,只需要9列即可);

以上均为中级篇内容,很简单,都看的明白吧,重点在这里。。。

7.定义行的颜色为#cccccc;定义合并1列10行,合并了下面10行的内容,那边合并之后它就等于一行;
8.定义行的颜色为#CCFF99;合并了下面9行的内容,因为第1列合并掉了本来存在的10列中的1列,所以它只能合并9行;
9.定义行的颜色为#33CC00;合并了下面8行的内容,因为第1列和第2列合并掉了本来存在的10列中的2列,所以它只能合并8行;
10.定义行的颜色为#CCFF00;合并了下面7行的内容,因为前面3列合并掉了本来存在的10列中的3列,所以它只能合并7行;
11.定义行的颜色为#FFCC00;合并了下面6行的内容,因为前面4列合并掉了本来存在的10列中的6列,所以它只能合并6行;
12.同理。。。
13.同理。。。
14.同理。。。
15.同理。。。
16.定义行的颜色为9966cc;由于是最后1列,所以,so,没错,不需要合并了,结束。
17.关闭表格。。。

于是,看完了吗,看完了吧,有什么感想吗,感觉是不是很坑爹。。。很无语。。。很碉堡。。。
好戏还在后头。。。
so,没错,现在继续。。。

上面重点介绍的那10列的衍生用法:
效果图:
1颜色 1颜色
2颜色
3颜色
4颜色4颜色
5颜色
6颜色
7颜色
8颜色
  
代码如下:
  1. [table]
  2. [tr=#cc00cc][td=1,8]1颜色[/td][td=1,8] 1颜色[/td][/tr]
  3. [tr=#CCFF00][td=1,7]2颜色[/td][/tr]
  4. [tr=#FFCC00][td=1,6]3颜色[/td][/tr]
  5. [tr=#33FF00][td=1,5]4颜色[/td][td=1,5]4颜色 [/td][/tr]
  6. [tr=#CCCC33][td=1,4]5颜色[/td][/tr]
  7. [tr=#CC0000][td=1,3]6颜色[/td][/tr]
  8. [tr=#99CC00][td=1,2]7颜色[/td][/tr]
  9. [tr=#9966cc][td]8颜色[/td][/tr]
  10. [tr][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  11. [/table]
复制代码
解说:
1.定义一个表格。。。
2.定义行颜色为#cc00cc;定义合并1列8行;定义合并1列8行;
3.定义行颜色为#ccff00;定义合并1列7行;
4.定义行颜色为#ffcc00;定义合并1列6行;
5.定义行颜色为#33ff00;定义合并1列5行;定义合并1列5行;
6.定义行颜色为#cccc33;定义合并1列4行;
7.定义行颜色为#cc0000;定义合并1列3行;
8.定义行颜色为#99cc00;定义合并1列2行;
9.定义行颜色为#9966cc;定义1列;
10.定义1列*10;
11.关闭表格。

于是。。。就不细说了,可以参照上面的7-16步。。。

于是,估计大家会看不懂,所以,附上原型表格,对照着看,估计可以容易明白点。。。

第一个表格的最后那10列:
原型表格实例(即不合并的情况):
1

2
3
4
5
6
7
8
9
10
代码如下:
  1. [table=98%]
  2. [tr=#cccccc][td] [/td][/tr]
  3. [tr=#CCFF99][td] [/td][td] [/td][/tr]
  4. [tr=#33CC00][td] [/td][td] [/td][td] [/td][/tr]
  5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  7. [tr=#330000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  8. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  9. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  10. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  12. [/table]
复制代码
解说:
对照着来看就很好理解了,
第1列合并下面的所有行。。。所以只剩1行,所以,第2列就和第1列显示在同1行了
第2列合并下面的所有行。。。所以只剩1行,所以,第3列就和第2列显示在同1行了
下面同理。。。

于是。。。明白了吧,我感觉我已经说的够清楚了
orz

衍生用法的我就不弄了,和这个也差不多。。。

so,于是,此高级篇的讲解结束。。。

楼主点评。。。
此篇的最大意义就在于可以实现单独的1列单独的1种颜色,或者说单独的1个单元格单独的1种颜色。。。
当然,只是看起来是这样而已。。。实际想实现这样的效果。。。那可就不是这么简单的事了

注意:
1.基本都说了。。。不重复了

本章回顾:
1.坑爹的应用和实例

下集预告:
1.坑爹到极点的应用
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

 楼主| 发表于 2012-11-19 14:47:22 | 显示全部楼层
so,于是,上面的高级篇也就是坑爹篇终于结束了
现在,我们来继续坑爹的教学
你无语了嘛,你蛋疼了嘛。。。
那就继续吧

table使用教学之骨灰级篇

骨灰级篇(一)

so,闲话少说,继续
于是,其实这篇可有可无,为什么要弄出来,只是想详细说下这个的应用,以及多占一层楼而已,淡定。。。

实例一:
效果图:
10颜色
9颜色
10颜色
8颜色
9颜色
10颜色
7颜色
8颜色
9颜色
10颜色
6颜色
7颜色
8颜色
9颜色
10颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
2颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
1颜色
2颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色

代码如下:
  1. [table]
  2. [tr=#9966cc][td]10颜色[/td][/tr]
  3. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  4. [tr=#9966cc][td]10颜色[/td][/tr]
  5. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  6. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  7. [tr=#9966cc][td]10颜色[/td][/tr]
  8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  11. [tr=#9966cc][td]10颜色[/td][/tr]
  12. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  13. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  14. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  15. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  16. [tr=#9966cc][td]10颜色[/td][/tr]
  17. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  18. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  19. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  20. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  21. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  22. [tr=#9966cc][td]10颜色[/td][/tr]
  23. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
  24. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  25. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  26. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  27. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  28. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  29. [tr=#9966cc][td]10颜色[/td][/tr]
  30. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
  31. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
  32. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  33. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  34. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  35. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  36. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  37. [tr=#9966cc][td]10颜色[/td][/tr]
  38. [tr=#cc00cc][td=1,9]2颜色[/td][/tr]
  39. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
  40. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
  41. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  42. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  43. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  44. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  45. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  46. [tr=#9966cc][td]10颜色[/td][/tr]
  47. [tr=#77FFEE][td=1,10]1颜色[/td][/tr]
  48. [tr=#cc00cc][td=1,9]2颜色[/td][/tr]
  49. [tr=#cc33cc][td=1,8]3颜色[/td][/tr]
  50. [tr=#CCFF00][td=1,7]4颜色[/td][/tr]
  51. [tr=#FFCC00][td=1,6]5颜色[/td][/tr]
  52. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  53. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  54. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  55. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  56. [tr=#9966cc][td]10颜色[/td][/tr]
  57. [/table]
复制代码
解说:
坑爹。。。于是。。。无语了。。。
so,继续吧。。。
1.定义一个表格
2.定义行颜色为#9966cc;定义1列;
3.定义行颜色为#99CC00;定义合并1列2行;
4.定义行颜色为#9966cc;定义1列;
.
.
.
.
.
.
47.定义行颜色为#77FFEE;定义合并1列10行;
48.定义行颜色为#cc00cc;定义合并1列9行;
49.定义行颜色为#cc33cc;定义合并1列8行;
50.定义行颜色为#CCFF00;定义合并1列7行;
51.定义行颜色为#FFCC00;定义合并1列6行;
52.定义行颜色为#33FF00;定义合并1列5行;
53.定义行颜色为#CCCC33;定义合并1列4行;
54.定义行颜色为#CC0000;定义合并1列3行;
55.定义行颜色为#99CC00;定义合并1列2行;
56.定义行颜色为#9966cc;定义1列;
57.关闭表格。

so,于是,简便的说下。。。不介意吧。。。这个毕竟太坑爹了。。。

于是,仔细看看47-56,有没有似曾相识的感觉
so,没错,就是高级篇说到的那10列。。。

于是,在向上看去,可以发现都是这样
依次递增

1

2

3

4

5

6

7

8

9

10

于是,就是这样的模型,所以,现在我们来反过来看下原先的表格实例图:
效果图:
10
9
10
8
9
10
7
8
9
10
6
7
8
9
10
5
6
7
8
9
10
4
5
6
7
8
9
10
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
代码如下:
  1. [table=98%]
  2. [tr=#9966cc][td]10[/td][/tr]
  3. [tr=#99CC00][td]9 [/td][/tr]
  4. [tr=#9966cc][td] [/td][td]10[/td][/tr]
  5. [tr=#CC0000][td]8 [/td][/tr]
  6. [tr=#99CC00][td] [/td][td]9 [/td][/tr]
  7. [tr=#9966cc][td] [/td][td] [/td][td]10[/td][/tr]
  8. [tr=#CCCC33][td]7 [/td][/tr]
  9. [tr=#CC0000][td] [/td][td]8 [/td][/tr]
  10. [tr=#99CC00][td] [/td][td] [/td][td]9 [/td][/tr]
  11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  12. [tr=#33FF00][td]6 [/td][/tr]
  13. [tr=#CCCC33][td] [/td][td]7 [/td][/tr]
  14. [tr=#CC0000][td] [/td][td] [/td][td]8 [/td][/tr]
  15. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  16. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  17. [tr=#FFCC00][td]5 [/td][/tr]
  18. [tr=#33FF00][td] [/td][td]6 [/td][/tr]
  19. [tr=#CCCC33][td] [/td][td] [/td][td]7 [/td][/tr]
  20. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
  21. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  22. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  23. [tr=#CCFF00][td]4 [/td][/tr]
  24. [tr=#FFCC00][td] [/td][td]5 [/td][/tr]
  25. [tr=#33FF00][td] [/td][td] [/td][td]6 [/td][/tr]
  26. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
  27. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
  28. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  29. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  30. [tr=#cc33cc][td]3 [/td][/tr]
  31. [tr=#CCFF00][td] [/td][td]4 [/td][/tr]
  32. [tr=#FFCC00][td] [/td][td] [/td][td]5 [/td][/tr]
  33. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
  34. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
  35. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
  36. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  37. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  38. [tr=#cc00cc][td]2 [/td][/tr]
  39. [tr=#cc33cc][td] [/td][td]3 [/td][/tr]
  40. [tr=#CCFF00][td] [/td][td] [/td][td]4 [/td][/tr]
  41. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td]5 [/td][/tr]
  42. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
  43. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
  44. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
  45. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  46. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  47. [tr=#77FFEE][td]1 [/td][/tr]
  48. [tr=#cc00cc][td] [/td][td]2 [/td][/tr]
  49. [tr=#cc33cc][td] [/td][td] [/td][td]3 [/td][/tr]
  50. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4 [/td][/tr]
  51. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5 [/td][/tr]
  52. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]6 [/td][/tr]
  53. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]7 [/td][/tr]
  54. [tr=#CC0000][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]8 [/td][/tr]
  55. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]9 [/td][/tr]
  56. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  57. [/table]
复制代码
卧槽,这是何等卧槽;
坑爹,这是何等坑爹;
蛋疼,这是何等蛋疼;
无语,这是何等无语;
碉堡,这是何等碉堡。。。

具体实现方式,就orz,饶了我吧,我真心不想再打了。。。
上面的有。。。可以参照下。。。慢慢改

注意:
1.淡定点就好

本章回顾:
1.坑爹到极点的应用

下集预告:
1.终极篇应用实例

有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

 楼主| 发表于 2012-11-19 14:47:23 | 显示全部楼层
本帖最后由 林 于 2012-11-19 16:53 编辑

so,现在我们继续。。。
耐心点吧。。。最后一篇了
于是,都看到这里了,那就坚持点吧。。。
感谢每一位看到这里的会员,多谢支持的说~

骨灰级篇(二)

于是。。。有没有被前面的哪些代码给吓到。。。
好吧,我承认我恶趣味。。。但是,也不能全怪我。。。我也只是看到那几个例子很不错,所以就借用下而已,@hoshinoi ,于是,多谢了。。。
虽然实例借用了,但是详细的解说以及其ta所有东东都是我自己写的。。。
各项我也尽力说的更清楚了的说~

于是,继续我们的教程:
效果图:
1颜色
2颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
代码如下:
  1. [table]
  2. [tr=#77FFEE][td=1,9]1颜色[/td][/tr]
  3. [tr=#cc00cc][td=1,7]2颜色[/td][/tr]
  4. [tr=#cc33cc][td=1,5]3颜色[/td][/tr]
  5. [tr=#CCFF00][td=1,3]4颜色[/td][/tr]
  6. [tr=#FFCC00][td]5颜色[/td][/tr]
  7. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  11. [tr=#9966cc][td]10颜色[/td][/tr]
  12. [/table]
复制代码
解说:
1.定义一个表格
2.定义行颜色为#77FFEE;定义合并1列9行;
3.定义行颜色为#cc00cc;定义合并1列7行;
4.定义行颜色为#cc33cc;定义合并1列5行;
5.定义行颜色为#CCFF00;定义合并1列3行;
6.定义行颜色为#FFCC00;定义1列;
7.定义行颜色为#33FF00;定义合并1列5行;
8.定义行颜色为#CCCC33;定义合并1列4行;
9.定义行颜色为#CC0000;定义合并1列3行;
10.定义行颜色为#99CC00;定义合并1列2行;
11.定义行颜色为#9966cc;定义1列;
12.关闭表格。

于是,这样看起来的话,可能感觉很不好理解吧,那么,继续,原实例图登场:
效果图:
1
2
3
4
5
6
7
8
9
10

代码如下:
  1. [table]
  2. [tr=#77FFEE][td]1[/td][/tr]
  3. [tr=#cc00cc][td] [/td][td]2[/td][/tr]
  4. [tr=#cc33cc][td] [/td][td] [/td][td]3[/td][/tr]
  5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4[/td][/tr]
  6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5[/td][/tr]
  7. [tr=#33FF00][td] [/td][td] [/td][td] [/td][td] [/td][td]6[/td][/tr]
  8. [tr=#CCCC33][td] [/td][td] [/td][td] [/td][td]7[/td][td] [/td][/tr]
  9. [tr=#CC0000][td] [/td][td] [/td][td]8[/td][td] [/td][td] [/td][/tr]
  10. [tr=#99CC00][td] [/td][td]9[/td][td] [/td][td] [/td][td] [/td][/tr]
  11. [tr=#9966cc][td]10[/td][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  12. [/table]
复制代码
这个其实很坑爹。。。完全不需要这样的说。。。虽然和这个方式不同,但是效果是差不多的。。。

效果图:
1颜色
2颜色
3颜色
4颜色
5颜色
6颜色
7颜色
8颜色
9颜色
10颜色
代码:
  1. [table]
  2. [tr=#77FFEE][td=1,5]1颜色[/td][/tr]
  3. [tr=#cc00cc][td=1,4]2颜色[/td][/tr]
  4. [tr=#cc33cc][td=1,3]3颜色[/td][/tr]
  5. [tr=#CCFF00][td=1,2]4颜色[/td][/tr]
  6. [tr=#FFCC00][td]5颜色[/td][/tr]
  7. [tr=#33FF00][td=1,5]6颜色[/td][/tr]
  8. [tr=#CCCC33][td=1,4]7颜色[/td][/tr]
  9. [tr=#CC0000][td=1,3]8颜色[/td][/tr]
  10. [tr=#99CC00][td=1,2]9颜色[/td][/tr]
  11. [tr=#9966cc][td]10颜色[/td][/tr]
  12. [/table]
复制代码
于是,并不是说上面那个不好,只不过,这个还是以方便为主,这样想必大家也好理解点。。。

原型效果图:
1
2
3
4
5
6
7
8
9
10
代码如下:
  1. [table]
  2. [tr=#77FFEE][td]1[/td][/tr]
  3. [tr=#cc00cc][td] [/td][td]2[/td][/tr]
  4. [tr=#cc33cc][td] [/td][td] [/td][td]3[/td][/tr]
  5. [tr=#CCFF00][td] [/td][td] [/td][td] [/td][td]4[/td][/tr]
  6. [tr=#FFCC00][td] [/td][td] [/td][td] [/td][td] [/td][td]5[/td][/tr]
  7. [tr=#33FF00][td]6[/td][/tr]
  8. [tr=#CCCC33][td] [/td][td]7[/td][/tr]
  9. [tr=#CC0000][td] [/td][td] [/td][td]8[/td][/tr]
  10. [tr=#99CC00][td] [/td][td] [/td][td] [/td][td]9[/td][/tr]
  11. [tr=#9966cc][td] [/td][td] [/td][td] [/td][td] [/td][td]10[/td][/tr]
  12. [/table]
复制代码
这样应该会好容易理解点。。。2个对照着看,通过这2者的区别,也比较容易掌握。。。

多谢你十分淡定的看完了
so,没错,于是,教程结束了

于是。。。
我会说我把楼主、沙发、板凳、报纸、地板全占了嘛

orz,给跪了

感言:
于是,早就想做个教程了。。。一直以来,时间不怎么足,再加上这个表格的教程很坑爹,而且,也没想好该怎么来大众化的说明下,所以,一直拖到了现在。
终于,昨晚,不知道是怎么回事,突然来劲了,于是,就开工做了这么个教程。。。
再加上今天不怎么忙
所以。。。这个教程就这么出来了

于是,感谢hoshino君
另外,其实我这篇教程所说的都是一些基础的东西。。。
真正的排版却不是这样。。。只要你认真看了初级篇和中级篇,差不多就可以进行排版了,请大胆的试试,多发发帖,多使用使用表格,那么,其实,排版也是件挺简单的事。

想学习排版方面知识,请参照hotomi大小姐,琉公主,大成喵,豆芽等的帖子,至于我的,就算了吧

orz,排版什么的太坑爹了,所以,懒得花太多时间来排版的说。。。
我也只是使用最简单的表格的嵌套来排版而已。。。

恩,于是,结束了,今天花了太多时间在这教程上。。。最后一点时间,要做点事了
于是,有事可以回复,或去我留言板留言,短消息均可以,直接加我好友我也不介意,晚上回去后如果有时间会慢慢解答的(其实,更希望好好看看这篇教程。。。基本已经说的很详细了。。。很详细了。。。)
当然,如果你愿意粉我的话,我也十分欢迎哦,亲。

最后,很多地方言语可能用的不准确,请见谅,高手也请见谅,求别喷。。。

点评

不放手歌让大家慢慢看么╮(╯▽╰)╭  发表于 2012-11-19 15:04
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

发表于 2012-11-19 14:48:29 | 显示全部楼层
本帖最后由 永`澄 于 2012-11-19 14:58 编辑

看到前3楼,我赶脚还跟得上,嗯,这帖很好~

                               
登录/注册后可看大图

看到4楼,嗯,果然会有高难度的么,乖乖的膜拜吧

                               
登录/注册后可看大图

看到5楼,我摔鼠标了,不能直视Orz~

                               
登录/注册后可看大图

点评

orz,公司电脑。。。没声音。。。于是,你发给我一首吧。。。  发表于 2012-11-19 15:11
淡定。。。前3楼的够用了。。。4、5那是卖萌的╮(╯▽╰)╭  发表于 2012-11-19 15:01
有爱就有H5~
回复 支持 反对

使用道具 举报

浮云 - 浮云

发表于 2012-11-19 14:49:39 | 显示全部楼层
看來很實用的

点评

- -需要就实用,不需要就一点用都没有。。。  发表于 2012-11-19 15:20
有爱就有H5~
回复 支持 反对

使用道具 举报

发表于 2012-11-19 14:51:43 | 显示全部楼层
于是还有前排吗?= - =

好厉害的教程呢~

辛苦了~

点评

只会表格的话,是做不出来木木姐的这种排版的╮(╯▽╰)╭ 所以。。。这个只是简要介绍下表格。。。  详情 回复 发表于 2012-11-19 15:21
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

发表于 2012-11-19 14:55:35 | 显示全部楼层
咱看完还是不会的说

点评

= =于是。。。看看就好。。。正常情况下是不需要这样的。。。  发表于 2012-11-19 15:21
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

发表于 2012-11-19 14:57:32 | 显示全部楼层
跪破膝盖

点评

= =  发表于 2012-11-19 15:12
握爪~大天才  发表于 2012-11-19 15:10
有爱就有H5~
回复 支持 反对

使用道具 举报

叫兽 - 叫兽

发表于 2012-11-19 14:58:51 | 显示全部楼层
偶慢慢自学吧,排版白痴在此。关键是看着代码就头痛

点评

= =  发表于 2012-11-19 15:12
玩贴吧不用排版w  发表于 2012-11-19 15:08
我也是  发表于 2012-11-19 15:08
有爱就有H5~
回复 支持 反对

使用道具 举报

浮云 - 浮云

发表于 2012-11-19 15:00:13 | 显示全部楼层
原来还可以弄阶梯表格呀

点评

阶梯的其实很简单。。。重点是每列一种颜色。。。不过,那是不实用的东西。。。  发表于 2012-11-19 15:13
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

发表于 2012-11-19 15:05:04 | 显示全部楼层
什么时候转个DIV来吧。。

点评

于是。。。就算弄了也没法用 而且,DIV现在还不是很熟,基本现在也只是会应用而已 所以。。。算了吧 等以后或许可以做出来,另外,如果需要学习,DIV,也不需要到这里来学吧 table基本就够用了。。。  详情 回复 发表于 2012-11-19 15:09
有爱就有H5~
回复 支持 反对

使用道具 举报

半仙 - 半仙

 楼主| 发表于 2012-11-19 15:09:29 | 显示全部楼层
夏娜酱 发表于 2012-11-19 15:05
什么时候转个DIV来吧。。

于是。。。就算弄了也没法用
而且,DIV现在还不是很熟,基本现在也只是会应用而已
所以。。。算了吧
等以后或许可以做出来,另外,如果需要学习,DIV,也不需要到这里来学吧
table基本就够用了。。。

点评

对对~· 强力要求神级DIV教导~QAQ  发表于 2012-11-20 01:21
那又不是偶弄的→→  发表于 2012-11-19 15:15
有爱就有H5~
回复 支持 反对

使用道具 举报

叫兽 - 叫兽

发表于 2012-11-19 15:11:26 | 显示全部楼层
楼主晚上帮偶弄四个帖子吧,哈哈,你懂的!

急寻苦力中

点评

= =你排版已经很好了。。。比我好 所以,就不需要了吧。。。  详情 回复 发表于 2012-11-19 15:14
有爱就有H5~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 入驻H5

本版积分规则

Archiver|手机版|小黑屋|免责声明|H5Gal游戏论坛 |网站地图|网站地图

GMT+8, 2024-5-4 10:48 , Processed in 0.161655 second(s), 25 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表