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]
|