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

news2024/11/24 19:32:14

文章目录

Part.I Introduction
Part.II 表格样式控制
- Chap.I 对齐方式
- Chap.II 表格中文本控制
- Chap.III 单元格合并
- Chap.IV 颜色控制
Part.III 实用技巧
- Chap.I Excel 转 HTML
Reference

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 表格的制作）、文本的加粗、斜体、换行…如下表所示

名称	代码	样式
竖线	`\|`	\|
斜体	`_斜体_`	斜体
粗体	`__粗体__`	粗体
换行	`一行<br>二行`	一行二行

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>