网站Logo MsBlog
首页
关于

Markdown表格的使用以及技巧

pmsa
1409
2021-05-12

格式：

添加表格的格式如下：

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

效果如下：

image.png

对齐：

可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。

|  左对齐     | 居中对齐     | 右对齐        |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

显示效果如下：

image.png

格式化表格中的文字

可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调
不能添加标题，块引用，列表，水平规则，图像或HTML标签

在表中转义管道字符

可以使用表格的HTML字符代码（|）在表中显示竖线（|）字符

Markdown表格技巧：

问题如下：
image.png
这个表格序号和方法占用列宽太长了，想让序号和方法列宽小一点，描述的列宽大一点

解决方法：可以从外部定义一个 「Style」来指定各列的列宽

  1. 「Style」来指定各列的列宽
<style>
table th:first-of-type {
    width: 4cm;
}
table th:nth-of-type(2) {
    width: 150pt;
}
table th:nth-of-type(3) {
    width: 8em;
}
</style>
  1. 把单位改成 % 这样就相当于按照所占行宽的比例来分配列宽
<style>
table th:first-of-type {
    width: 20%;
}
table th:nth-of-type(2) {
    width: 20%;
}
table th:nth-of-type(3) {
    width: 60%;
}
</style>

| 序号 | 方法        |描述        |
| --- | ----------- |----------- |
| 1 | GET |请求指定的页面信息，并返回实体主体。      |
| 2 | HEAD |类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头。|
| 3 | POST |向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。|
| 4 | PUT |从客户端向服务器传送的数据取代指定的文档的内容。|
| 5 | DELETE |请求服务器删除指定的页面。|
| 6 | CONNECT |HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。|
| 7 | OPTIONS |允许客户端查看服务器的性能。|
| 8 | TRACE |回显服务器收到的请求，主要用于测试或诊断。|
| 9 | PATCH |是对 PUT 方法的补充，用来对已知资源进行局部更新 。|

最终显示效果如下：
image.png

动物装饰