Markdown表格——复杂表格
1.首先基础的样式及设置
表格内容对齐大家应该都知道,如下所示,左边加冒号则居左对齐,右边加冒号居右对齐,两边都加则居中对齐。
项目 | Value
-------- | -----
电脑 | $1600
手机 | $12
导管 | $1
| Column 1 | Column 2 | Column 3 |
|:--------| :---------:|--------:|
| centered 文本居左 | right-aligned 文本居中 |right-aligned 文本居右|
结果:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
Column 1 | Column 2 | Column 3 |
---|---|---|
centered 文本居左 | right-aligned 文本居中 | right-aligned 文本居右 |
2. 单元格中带有竖线 |
单元格中的|
用|
表示,结果会自动转换为|
例如:
项目 | Value
-------- | -----
电脑|平板 | $1600
手机 | $12
导管 | $1
结果如下:
项目 | Value |
---|---|
电脑|平板 | $1600 |
手机 | $12 |
导管 | $1 |
3. 斜体,粗体
斜体:内容两侧各加一个下划线,例_内容_
粗体:内容两侧各加两个下划线,例__内容__
项目 | Value
-------- | -----
电脑|平板 | $1600
_手机_ | $12
__导管__ | $1
结果如下:
项目 | Value |
---|---|
电脑|平板 | $1600 |
手机 | $12 |
导管 | $1 |
4. 表格内换行
用HTML标签<br>
项目 | Value
----- | -----
电脑|平板 | 一行<br>二行
结果如下:
项目 | Value |
---|---|
电脑|平板 | 一行 二行 |
5. 合并单元格
Markdown并没有单元格合并语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。
首先要了解基础的html表格如下:
<table>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
</tr>
</table>
行1列1 | 行1列2 | 行1列3 |
行2列1 | 行2列2 | 行2列3 |
行3列1 | 行3列2 | 行3列3 |
其中 每对<tr>.....</tr>
标签之间为一行,每对 <td>....</td>
标签之间为一列。
合并行
colspan
:规定单元格可纵跨的列数,即跨几列来合并行。
要注意要少写几个<td>
标签,如下所示,共三列,其中第二行合并第二列和第三列,只需要在前面再写一列即可,第三行跨三列,即已包括三列,不需要再写<td>
<table>
<tr>
<td>行/列</td>
<td>列2</td>
<td>列3</td>
</tr>
<tr>
<td>行2列1</td>
<td colspan="2">跨两列合并行</td>
</tr>
<tr>
<td colspan="3">跨三列合并行</td>
</tr>
</table>
显示如下
行/列 | 列2 | 列3 |
行2列1 | 跨两列合并行 | |
跨三列合并行 |
合并列
rowspan
:规定单元格可横跨的行数,跨几行来合并列。
<table>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td rowspan="2">合并两列</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<tr>
<td>行3列2</td>
<td>行3列3</td>
</tr>
</table>
在第一列合并了第二三行,则在第二行写合并,第三行就不用了再写第一列了。
显示如下:
行1列1 | 行1列2 | 行1列3 |
合并两列 | 行2列2 | 行2列3 |
行3列2 | 行3列3 |
合并行列
<table>
<tr>
<td>列一</td>
<td>列二</td>
</tr>
<tr>
<td colspan="2">合并行</td>
</tr>
<tr>
<td>列一</td>
<td>列二</td>
</tr>
<tr>
<td rowspan="2">合并列</td>
<td >行二列二</td>
</tr>
<tr>
<td >行三列二</td>
</tr>
</table>
列一 | 列二 |
合并行 | |
列一 | 列二 |
合并列 | 行二列二 |
行三列二 |
6. excel转html
如果已有excel表,用Markdown语言编辑出对应的excel,比较复杂的表格就很麻烦了。如果这个表格做成只读的,就可以用下面的方式来显示。
参考原文https://www.jianshu.com/p/78f6b3d8ab4f
-
准备好要处理的excel表格
-
另存为html格式——wps、office都支持,生成了一个文件夹和一个htm文件
-
用浏览器打开htm文件,并用右键查看页面源代码如图,注意左下角,如果有多个工作表,一定要切换到想要查看的sheet
发现用了框架,表格在框架中如图,
所以我们应该查看框架源代码如图
- 找到
<table>...</table>
标签下的内容,复制到Markdown编辑器内。 表格即完成了Markdown的转换。
<table border=0 cellpadding=0 cellspacing=0 width=192 style='border-collapse:
collapse;table-layout:fixed;width:144pt'>
<col width=64 span=3 style='width:48pt'>
<tr height=18 style='height:13.8pt'>
<td height=18 class=xl65 width=64 style='height:13.8pt;width:48pt'> </td>
<td class=xl65 width=64 style='border-left:none;width:48pt'>方法</td>
<td class=xl65 width=64 style='border-left:none;width:48pt'>描述</td>
</tr>
<tr height=18 style='height:13.8pt'>
<td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>1</td>
<td class=xl65 style='border-top:none;border-left:none'>方法1</td>
<td class=xl65 style='border-top:none;border-left:none'>描述1</td>
</tr>
<tr height=18 style='height:13.8pt'>
<td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>2</td>
<td class=xl65 style='border-top:none;border-left:none'>方法2</td>
<td class=xl65 style='border-top:none;border-left:none'>描述2</td>
</tr>
<tr height=18 style='height:13.8pt'>
<td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>3</td>
<td class=xl65 style='border-top:none;border-left:none'>方法3</td>
<td class=xl65 style='border-top:none;border-left:none'>描述3</td>
</tr>
<tr height=18 style='height:13.8pt'>
<td height=18 class=xl65 align=right style='height:13.8pt;border-top:none'>4</td>
<td class=xl65 style='border-top:none;border-left:none'>方法4</td>
<td class=xl65 style='border-top:none;border-left:none'>描述4</td>
</tr>
</table>
方法 | 描述 | |
1 | 方法1 | 描述1 |
2 | 方法2 | 描述2 |
3 | 方法3 | 描述3 |
4 | 方法4 | 描述4 |
- 注意:说到另存时生成的文件夹,可以发现里面就是所有的代码,包括框架源码和样式,其中sheet001.htm就是我们工作表一的内容,sheet002.htm就是工作表二的内容。
可以直接用记事本打开找到<table>...</table>
标签内容。
7.表格整体居中
(1)用html写的表格
如5/6里面的写法:
<table>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
<tr>
<td>行3列1</td>
<td>行3列2</td>
<td>行3列3</td>
</tr>
</table>
这种直接用style指定表格样式即可:
<style>
table {
margin: auto;
}
</style>
展示效果:
行1列1 | 行1列2 | 行1列3 |
行2列1 | 行2列2 | 行2列3 |
行3列1 | 行3列2 | 行3列3 |
<style>
.center
{
width: auto;/*表格宽度*/
display: table;
margin: auto;
}
</style>
<div class="center">
项目 | Value
-------- | -----
电脑 | $1600
手机 | $12
导管 | $1
</div>
展示效果如下:
项目 | Value |
---|---|
电脑 | $1600 |
手机 | $12 |
导管 | $1 |
更多推荐
所有评论(0)