问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

Markdown 高级表格控制使用指南

创作时间:
作者:
@小白创作中心

Markdown 高级表格控制使用指南

引用
CSDN
1.
https://blog.csdn.net/Gou_Hailong/article/details/138440244

本文是一篇关于Markdown高级表格控制的使用指南。文章详细介绍了Markdown表格的各种高级功能,包括对齐方式、文本控制、单元格合并以及颜色控制等。通过多个章节和具体示例,帮助读者掌握Markdown表格的高级用法。

Part.I Introduction

本文是Markdown 使用笔记的子博客,将介绍如何优雅地使用 Markdown 表格,让文档更加美观。

Part.II 表格样式控制

在 CSDN Markdown 编辑器菜单栏上面点击『表格』,会出现下面的 Mardown 语句

  
|  |  |
|--|--|
|  |  |
  

这是最基本的 Mardown 表格语句,很多情况下这种表格样式并不能满足我们多样的需求,笔者探索了一下『如何使用 Markdown 做出高级的表格』,目前可以做出如下样式的表格,下文会具体介绍

Chap.I 对齐方式

对齐可以左对齐、居中、右对齐,通过
:
控制,示例如下:

  
| Column 1 | Column 2  |	Column 3 |
|:-| :-:|-:|
| left-aligned 文本居左 |  centered 文本居中 |right-aligned 文本居右|
  

Column 1 Column 2 Column 3
left-aligned 文本居左 centered 文本居中 right-aligned 文本居右

通过 HTML 语法令表格整体居中

  
<style>
.center 
{
  width: auto;/*表格宽度*/
  display: table;
  margin: auto;
}
</style>
<div class="center">
项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1
</div>
  

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

Chap.II 表格中文本控制

主要是对表格内容的操作,包括特殊字符的表示(比如
|
,因为整个字符用于 Markdown 表格的制作)、文本的加粗、斜体、换行…如下表所示
名称 代码 样式
竖线 | |
斜体 斜体 斜体
粗体 粗体 粗体
换行 一行
二行 一行二行

Chap.III 单元格合并

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

  
<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th>
    </tr>
    <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>
  

可以把每一个标签理解为一个容器,比如

容器里面有 行容器 ,行容器里面又有单元格容器
。下面是上面 HTML 语法构建的表格: 表头 表头 表头 行1列1 行1列2 行1列3 行2列1 行2列2 行2列3 行3列1 行3列2 行3列3

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

  
<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th>
    </tr>
    <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

Chap.IV 颜色控制

使用 HTML 语法,可以设置表格的背景颜色和字体颜色,如下所示

  
<table>
<tbody>
    <tr>
        <th>项目</th><th>颜色名称</th><th>颜色</th>
    </tr>
    <tr>
        <td><font color="Hotpink">文本颜色</font></td>
        <td><font color="Hotpink">Hotpink</font></td>
        <td bgcolor="Hotpink">rgb(240, 248, 255)</td>
    </tr>
    <tr>
        <td><font color="Pink">文本颜色</font></td>
        <td><font color="pink">AntiqueWhite</font></td>
        <td bgcolor="Pink">rgb(255, 192, 203)</td>
    </tr>
</table>
  

项目 颜色名称 颜色
文本颜色 Hotpink rgb(240, 248, 255)
文本颜色 AntiqueWhite rgb(255, 192, 203)

Part.III 实用技巧

Chap.I Excel 转 HTML

在 Excel 编辑好表格后,依次点击『文件』→另存为→选择位置→保存类型选择
网页(.htm;.html)
。然后会看到生成了一个
*.htm
文件和一个
*.files
文件夹,打开文件夹会看到有下面的一些文件
用文本编辑器打开所需表格的
htm
,搜索

Reference
  • Markdown表格——复杂表格
  • CSDN-markdown 表格样式设置(跨行表格,背景色等)
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号