Markdown 高级表格控制 ∈ Markdown 使用笔记

Markdown 高级表格控制 ∈ Markdown 使用笔记

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 文本居右|

通过 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>

可以把每一个标签理解为一个容器，比如 <table> 容器里面有 行容器 <tr> ，行容器里面又有单元格容器 <td> 。下面是上面 HTML 语法构建的表格：

合并行 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>

合并列 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>

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>

Part.III 实用技巧

Chap.I Excel 转 HTML

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

用文本编辑器打开所需表格的 htm ，搜索 <table ，将下面的部分贴到 Markdown 编辑器，并且删除 Markdown 不支持的语法即可。