资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Markdown 高级表格控制

创作时间:

作者:

@小白创作中心

Markdown 高级表格控制

引用

CSDN

https://blog.csdn.net/Gou_Hailong/article/details/138440244

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

Part.I Introduction

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

Part.II 表格样式控制

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

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

这是最基本的Markdown表格语句，很多情况下这种表格样式并不能满足我们多样的需求，笔者探索了一下『如何使用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>

可以把每一个标签理解为一个容器，比如<table>容器里面有行容器<tr>，行容器里面又有单元格容器<td>。下面是上面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)