Markdown表格

您所在的位置:网站首页 表格制作画斜线怎么画 Markdown表格

Markdown表格

2024-07-09 15:14| 来源: 网络整理| 查看: 265

目录 1.首先基础的样式及设置2. 单元格中带有竖线 |3. 斜体,粗体4. 表格内换行5. 合并单元格6. excel转html7.表格整体居中

1.首先基础的样式及设置

表格内容对齐大家应该都知道,如下所示,左边加冒号则居左对齐,右边加冒号居右对齐,两边都加则居中对齐。

项目 | Value -------- | ----- 电脑 | $1600 手机 | $12 导管 | $1 | Column 1 | Column 2 | Column 3 | |:--------| :---------:|--------:| | centered 文本居左 | right-aligned 文本居中 |right-aligned 文本居右|

结果:

项目Value电脑$1600手机$12导管$1 Column 1Column 2Column 3centered 文本居左right-aligned 文本居中right-aligned 文本居右 2. 单元格中带有竖线 |

单元格中的|用|表示,结果会自动转换为|

例如:

项目 | Value -------- | ----- 电脑|平板 | $1600 手机 | $12 导管 | $1

结果如下:

项目Value电脑|平板$1600手机$12导管$1 3. 斜体,粗体

斜体:内容两侧各加一个下划线,例_内容_ 粗体:内容两侧各加两个下划线,例__内容__

项目 | Value -------- | ----- 电脑|平板 | $1600 _手机_ | $12 __导管__ | $1

结果如下:

项目Value电脑|平板$1600手机$12导管$1 4. 表格内换行

用HTML标签

项目 | Value ----- | ----- 电脑|平板 | 一行二行

结果如下:

项目Value电脑|平板一行二行 5. 合并单元格

Markdown并没有单元格合并语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。

首先要了解基础的html表格如下:

行1列1 行1列2 行1列3 行2列1 行2列2 行2列3 行3列1 行3列2 行3列3 行1列1行1列2行1列3行2列1行2列2行2列3行3列1行3列2行3列3

其中 每对.....标签之间为一行,每对 .... 标签之间为一列。

合并行

colspan:规定单元格可纵跨的列数,即跨几列来合并行。

要注意要少写几个标签,如下所示,共三列,其中第二行合并第二列和第三列,只需要在前面再写一列即可,第三行跨三列,即已包括三列,不需要再写

行/列 列2 列3 行2列1 跨两列合并行 跨三列合并行

显示如下

行/列列2列3行2列1跨两列合并行跨三列合并行

合并列

rowspan:规定单元格可横跨的行数,跨几行来合并列。

行1列1 行1列2 行1列3 合并两列 行2列2 行2列3 行3列2 行3列3

在第一列合并了第二三行,则在第二行写合并,第三行就不用了再写第一列了。

显示如下:

行1列1行1列2行1列3合并两列行2列2行2列3行3列2行3列3

合并行列

列一 列二 合并行 列一 列二 合并列 行二列二 行三列二 列一列二合并行列一列二合并列行二列二行三列二 6. excel转html

如果已有excel表,用Markdown语言编辑出对应的excel,比较复杂的表格就很麻烦了。如果这个表格做成只读的,就可以用下面的方式来显示。 参考原文https://www.jianshu.com/p/78f6b3d8ab4f

准备好要处理的excel表格 在这里插入图片描述

另存为html格式——wps、office都支持,生成了一个文件夹和一个htm文件 在这里插入图片描述 在这里插入图片描述

用浏览器打开htm文件,并用右键查看页面源代码如图,注意左下角,如果有多个工作表,一定要切换到想要查看的sheet 在这里插入图片描述

发现用了框架,表格在框架中如图,  图2 页面源代码 所以我们应该查看框架源代码如图 图3 框架源代码:

找到...标签下的内容,复制到Markdown编辑器内。 表格即完成了Markdown的转换。   方法 描述 1 方法1 描述1 2 方法2 描述2 3 方法3 描述3 4 方法4 描述4  方法描述1方法1描述12方法2描述23方法3描述34方法4描述4 注意:说到另存时生成的文件夹,可以发现里面就是所有的代码,包括框架源码和样式,其中sheet001.htm就是我们工作表一的内容,sheet002.htm就是工作表二的内容。 在这里插入图片描述 可以直接用记事本打开找到...标签内容。 在这里插入图片描述 7.表格整体居中

(1)用html写的表格 如5/6里面的写法:

行1列1 行1列2 行1列3 行2列1 行2列2 行2列3 行3列1 行3列2 行3列3

这种直接用style指定表格样式即可:

table { margin: auto; }

展示效果:

行1列1行1列2行1列3行2列1行2列2行2列3行3列1行3列2行3列3 (2)MarkDown写的表格 直接把表格用div标签包裹,指定div标签居中即可,代码如下 .center { width: auto;/*表格宽度*/ display: table; margin: auto; } 项目 | Value -------- | ----- 电脑 | $1600 手机 | $12 导管 | $1

展示效果如下:

项目Value电脑$1600手机$12导管$1


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3