我后面有块蛋糕
Articles11
Tags8
Categories0
「ALW#274」【排版(表格使用)教程】3.1 重置版

「ALW#274」【排版(表格使用)教程】3.1 重置版

本贴来自:https://www.mcbbs.net/thread-1086233-1-1.html
at10XD.png
源bbcode代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
[hide=1][size=3]
[size=0px]233[/size]
[hr]
[size=5]#1 前言
[/size]听说有人让我出新帖子,而且我去年好像也说过要出这个来着(不是)。

本教程可以学到什么:
[list=1]
[*]表格table的使用
[*]16进制颜色表示法
[*]一点也不漂亮的表格排版
[*]审查元素简单使用(可能)
[/list]
本教程不能学到什么:
[list=1]
[*]教你怎么制作辣椒鱿鱼丝
[*]如何当上茶馆版主与yys和绵羊谈笑风生
[/list]

1.0 版本(2017年2月)地址:[url=https://www.mcbbs.net/thread-674238-1-1.html]https://www.mcbbs.net/thread-674238-1-1.html[/url]
2.0 版本(2017年5月)地址:[url=https://www.mcbbs.net/thread-689852-1-1.html]https://www.mcbbs.net/thread-689852-1-1.html[/url] (正在被锁帖,我喜欢吃鱿鱼丝。)以上东西两个版本都可以访问这个总集看到:[url=https://cakeal.github.io/2020/04/19/Cake-%E5%86%99%E7%9A%84MCBBS%E6%95%99%E7%A8%8B%E8%B4%B4%E5%90%88%E9%9B%86/]https://cakeal.github.io/2020/04/19/Cake-%E5%86%99%E7%9A%84MCBBS%E6%95%99%E7%A8%8B%E8%B4%B4%E5%90%88%E9%9B%86/[/url]

本教程所用浏览器:[table=50%]
[tr][td]Microsoft Edge 是最新版本。
版本 84.0.522.44 (官方内部版本) (64 位)[/td][/tr]
[/table]
本教程所用操作系统和屏幕大小:[table=50%]
[tr][td]macOS Catalina 版本 10.15.5
屏幕大小:1920*1080[/td][/tr]
[/table]
[hr]
[size=5]#2 可能接下来会用到的数据[/size]
→使用option command C(macOS)或F12(Windows)可以呼出审查元素。
1.帖子界面显示宽度:757px
[img]https://s1.ax1x.com/2020/07/25/aSwbuR.jpg[/img]
2.帖子编辑状态下的表格边框颜色:[backcolor=#C2A678][color=White]#C2A678[/color][/backcolor]
3.帖子显示状态下的表格边框颜色:[backcolor=#E3EDF5][color=Black]#E3EDF5[/color][/backcolor]
[color=#000000]
[/color][hr]
[size=5]#3 表格基础
[/size][table=500,SandyBrown]
[tr=#00FFFF][td]咕[/td][td]咕[/td][td]咕[/td][/tr]
[tr][td=2,1]咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕[/td][td]咕[/td][/tr]
[tr][td]咕[/td][td]咕[/td][td]咕[/td][/tr]
[/table]
[code][table=500,SandyBrown]
[tr=#00FFFF][td]咕[/td][td]咕[/td][td]咕[/td][/tr]
[tr][td=2,1]咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕咕[/td][td]咕[/td][/tr]
[tr][td]咕[/td][td]咕[/td][td]咕[/td][/tr]
[/table]
[/code]
[[size=0px]233[/size]table=500,SandyBrown]描述了一个表格,长度为500个像素(可以是百分比,最大98%),逗号后面的是表格的全局颜色,建议使用16进制颜色码。16进制颜色码可以通过这个网页转换和查找:[url=https://www.sioe.cn/yingyong/yanse-rgb-16/]https://www.sioe.cn/yingyong/yanse-rgb-16/[/url]
[spoiler]如图所示,这个表格的长度是500(虽然是499,但是我也不知道为什么)[img]https://s1.ax1x.com/2020/07/25/aS0jLn.jpg[/img][/spoiler]
[[size=0px]233[/size]tr]...[[size=0px]233[/size]/tr]描述了一行。其中在tr的后面可以加上=颜色,比如[[size=0px]233[/size]tr=#00FFFF],这样一行会变成#00FFFF这个颜色。
[[size=0px]233[/size]td]...[[size=0px]233[/size]/td]描述了一列。其中td的后面可以加上=列跨度,行跨度,宽度,比如我想让一个表格长为2个格,高为1个格,那么就是[[size=0px]233[/size]td=2,1]。再比如我想让一个表格长为3,高为2,宽度为200个像素,那么就是[[size=0px]233[/size]td=3,2,200]

综合实例:

[table=33%]
[tr=#00FF00][td=1,2]第一行1[/td][td=2,1]第一行2


[/td][/tr]
[tr=#FF0000][td]第二行1


[/td][td=1,2]第二行2[/td][/tr]
[tr=#0000FF][td=2,1]第三行1


[/td][/tr]
[/table]
[code][table=33%]
[tr=#00FF00][td=1,2]第一行1[/td][td=2,1]第一行2


[/td][/tr]
[tr=#FF0000][td]第二行1


[/td][td=1,2]第二行2[/td][/tr]
[tr=#0000FF][td=2,1]第三行1


[/td][/tr]
[/table]
[/code][hr]
[size=5]#4 表格从入门到放弃
[/size]请你问一问你自己,为什么要学这个,是Photoshop不好用了,还是图床不够多了?
[hr]
[size=5]#5 表格嵌(tao)套(wa)
[/size]仔细观察右侧占据情况。
[table=98%]
[tr=#FFFFFF][td][table=98%]
[tr][td]

[/td][/tr]
[/table][/td][/tr]
[/table]
[table]
[tr=#FFFFFF][td][table]
[tr][td]

[/td][/tr]
[/table][/td][/tr]
[/table]
[spoiler][code][table=98%]
[tr=#FFFFFF][td][table=98%]
[tr][td]

[/td][/tr]
[/table][/td][/tr]
[/table]
[table]
[tr=#FFFFFF][td][table]
[tr][td]

[/td][/tr]
[/table][/td][/tr]
[/table]
[/code][/spoiler]
所以98%和不加宽度的区别在于此,根据个人喜好选择。
下面是内嵌98%,加了居中的结果:
[table=98%]
[tr=#FFFFFF][td][align=center][table=98%]
[tr][td]

[/td][/tr]
[/table][/align][/td][/tr]
[/table]
[spoiler][code][table=98%]
[tr=#FFFFFF][td][align=center][table=98%]
[tr][td]

[/td][/tr]
[/table][/align][/td][/tr]
[/table]
[/code][/spoiler]

下面来点简单的示例:
[table]
[tr=#E1FFFF][td][table]
[tr=#E3EDF5][td][table]
[tr=#F0FFF0][td][table]
[tr=#4B0082][td][align=center][color=White]这里是一些字[/color][/align][/td][/tr]
[/table][/td][/tr]
[tr=#F0FFF0][td]这里也是字[hr]我被隔开了QAQ[/td][/tr]
[tr=#FFFFF0][td]这里还是字[hr][hr]莉莉白可爱~[/td][/tr]
[/table][/td][/tr]
[/table][/td][/tr]
[/table]这之中的横线可以用[[size=0px]dfsaf[/size]hr]来获得,例如:[hr]详解:[spoiler][code][table]//最外层表格
[tr=#E1FFFF][td]//最外层表格定义一行一列,颜色为e1ffff[table]//次外层表格
[tr=#E3EDF5][td]//次外层表格定义一行一列,颜色为e3edf5[table]//里层表格
[tr=#F0FFF0][td]//里层表格定义的第一行,颜色为f0fff0[table]//里层表格内的标题自己也有一个表格
[tr=#4B0082][td]//标题的表格定义了一行一列,颜色为4b0082[align=center][color=White]这里是一些字[/color][/align][/td][/tr]
[/table]//标题的表格结束[/td][/tr]//里层表格第一行结束
[tr=#F0FFF0][td](//里层表格的第二行,颜色为f0fff0)这里也是字[hr]我被隔开了QAQ[/td][/tr]//里层表格的第二行结束
[tr=#FFFFF0][td](//里层表格的第三行,颜色为fffff0)这里还是字[hr][hr]莉莉白可爱~[/td][/tr]//里层表格的第三行结束
[/table]//里层表格结束[/td][/tr]
[/table]//次外层表格结束[/td][/tr]
[/table]//最外层表格结束[/code][/spoiler]

[hr]

[size=5]#6 表格隐藏边框(其实不是)
[/size]把表格的颜色更改为#E3EDF5就可以获得一个无边框(其实就是和边框颜色相同)的表格啦。↓注意黑色表格内部的蓝色表格中间是三列,而不是一列
[table]
[tr=Black][td]
[table]
[tr=#E3EDF5][td] 1[/td][td] 2[/td][td] 3[/td][/tr]
[/table]
[/td][/tr]
[/table]

[hr]

#7 简易表格表示法
形似markdown一样,可以用"|"来分割一列,如果要输入"|",可以替换成"\|",换行是"\[size=0px]dfa[/size]n"
例如:
[table]
[tr][td]Week[/td][td]Mon[/td][td]Tue[/td][td]Wed[/td][td]Thu[/td][td]Fri[/td][td]Sat[/td][td]Sun[/td][/tr]
[tr][td]1[/td][td]Math[/td][td]Math[/td][td]Chinese[/td][td]English[/td][td]Physics[/td][td]Biology[/td][td]Self-study[/td][/tr]
[tr][td]2[/td][td]P.E.[/td][td]Chinese[/td][td]English[/td][td]Biology[/td][td]Math[/td][td]Math[/td][td]Self-study[/td][/tr]
[tr][td]3[/td][/tr]
[/table]
[code][table]
Week|Mon|Tue|Wed|Thu|Fri|Sat|Sun
1|Math|Math|Chinese|English|Physics|Biology|Self-study
2|P.E.|Chinese|English|Biology|Math|Math|Self-study
3
[/table][/code]
[hr]

[size=5]#8 提醒
[/size]1.表格练习的方法:自己开一个草稿,就像下面这样
[img]https://s1.ax1x.com/2020/07/25/aS50L6.jpg[/img]
2.一定要多尝试,有耐心。
3.尽早放弃使用表格写帖子。

[hr]

[size=5]#⑨ 后记
[/size]这个帖子我会在我的博客再传一份,以防止这个帖子锁帖而看不了。链接稍后放出。
使用的图床是路过图床,如果你看不到,
[spoiler]我也没办法[/spoiler]
希望这帖子没事🙏。
希望可以加个优秀啥的(精华当然来者不拒)
[attachimg图删了,没了]1655733[/attachimg]
更新记录:
[spoiler]
2020年7月25日 3.0版本,初发布。
2020年7月26日 3.1版本,添加简易表格表示法。
[/spoiler]
[quote]当前长度: 7015 字节,系统限制: 10 到 1000000 字节。[/quote]
[/size]
[/hide]
Author:我后面有块蛋糕
Link:https://cakeal.github.io/2020/08/02/alw-274/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可