14----表格

news2024/9/22 13:43:10

本节我们将学习markdown表格的相关知识:

一、表格的基本知识:

1. 打印表格:

表格使用竖线|区分每一列,在表格头和表格体之间使用至少一个减号-来分隔表头和表格内容(一般使用3个-)。表格的行由自然行来区分(自然行就是我们平常看到的行的定义)。示例如下:

  • markdown的形式输入:
|第一列|第二列|第三列|
|---|---|---|
|第一行第一列|第一行第二列|第一行第三列|
|第二行第一列|第二行第二列|第二行第三列|
  • HTML渲染后输出:
第一列第二列第三列
第一行第一列第一行第二列第一行第三列
第二行第一列第二行第二列第二行第三列

2. 对齐方式:

  • 可以使用冒号(:)在表头行(或分隔行)中指定对齐方式。
    冒号在左侧表示左对齐;
    冒号在右侧表示右对齐;
    冒号在两侧表示居中对齐。
    示例如下:
  • markdown的形式输入:
| 我是列1 | 我是列2 | 我是列3 |
|: --- | :---: | ---: |
| 内容1 | 内容2 | 内容3 |
| 注释1 | 注释2 | 注释3 |
| 总计1 | 总计2 | 总计3 |
  • HTML渲染后输出:
    在这里插入图片描述

  • 我们可以发现,在上面这个表格中,第一列是左对齐的,中间一列居中对齐,第三列右对齐。

  • 附:表格解读:

    (1). 表头行:表头行是指表格中的第一行,通常用于显示表格的列名或标题。表头行一般位于表格的第一行,用来标识每一列的含义或内容。在Markdown的表格语法中,表头行的作用是提供给读者一个参考,让他们知道每一列代表的意义,以便更好地理解和解读表格中的数据。同时,表头行也可以用来指定每一列的对齐方式,以使表格更加美观和易读。

    (2). 内容行:表头行的下方是内容行,用来显示每一列的具体内容。内容行可以有多行,每一行对应表格中的一条记录或数据。内容行的作用是展示表格中的具体数据,为读者提供实际的信息。内容行的数量可以根据实际情况进行增加或减少,以适应需要展示的数据量。

    (3). 分隔行:在Markdown中,| --- | --- | --- | 这一行通常被称为分隔线(Separator line)或分隔行(Divider line),用于分隔表头行内容行,并定义了表格的列边界和对齐方式。分隔线的作用是为了美观和可读性,通过显示列的边界和对齐方式,使表格更加清晰和易读。它也可以帮助读者更好地理解表格的结构和布局。但需要注意的是,分隔线并不是Markdown表格语法的必需部分,可以根据实际需要选择是否使用分隔线。如果不使用分隔线,表格的渲染效果可能会有所不同,但仍然可以正确显示表格内容。


3. 合并单元格

  • 在Markdown中,目前并没有官方支持合并单元格的语法。因此,如果需要在Markdown中实现合并单元格的效果,可能需要借助其他工具或扩展。

一种常见的方法是使用HTML标签来实现合并单元格的效果。可以在Markdown表格中嵌入HTML标签,利用HTML的表格合并单元格功能来实现合并效果。示例如下:

| 列1 | 列2 | 列3 |
| --- | --- | --- |
| 内容1 | <td colspan="2">合并单元格</td> |
| 内容2 | 内容3 | 内容4 |

colspan="2"表示要合并的单元格数,这里是合并了第二列和第三列。

  • 注:这种方法可能在某些编辑器中不适用。

4. 表格边框:

  • Markdown默认不支持绘制表格边框,如果需要绘制边框,可以使用扩展语法,如GitHub Flavored Markdown(GFM)的语法。

5. 在表格中使用其他元素

在表格中可以使用斜体单行元素,比如粗体斜体、行内代码、超链接、图片、Emoji表情、HTML等。

(1. 单元格内换行:

在单元格内换行时,可以使用HTML的换行标签<br>来实现,但需要注意的是Markdown本身不支持在单元格内直接换行。
示例:

  • markdown的形式输入:
| 列1 | 列2 |
| --- | --- |
| 第一行<br>第二行 | 内容2 |
  • HTML渲染后输出:
列1列2
第一行
第二行
内容2

(2. 使用其他元素:

  • markdown的形式输入:
|第一列|第二列|
|:---:|:---:|
|**粗体**|_斜体_|
|`行内代码`|[超链接](./超链接)|
|:cat:|<span style={{color:"red"}}>带颜色的字</span>|
  • HTML渲染后输出:
第一列第二列
粗体斜体
行内代码超链接
🐱<span style={{color:“red”}}>带颜色的字
  • 上面这个表格里我们分别使用了markdown的粗体,斜体,超链接,Emoji,React等等。

二、注意事项:

在使用Markdown的表格时,有一些注意事项需要注意:

  1. 对齐方式的一致性:在表头行中指定了单元格的对齐方式后,后续的表格内容行应该保持一致,以确保表格的整体美观和可读性。

  2. 单元格内容的长度:较长的单元格内容可能会导致表格过宽,建议在必要时进行换行或缩短内容,以保持表格的可读性。

  3. 表格边框的处理:Markdown的标准语法不支持绘制表格边框,如果需要边框,可以使用扩展语法,如GFM的语法,或者使用其他工具来生成带边框的表格。

  4. 跨行合并单元格的限制:Markdown的标准语法不支持跨行合并单元格,如果需要跨行合并单元格,可以使用扩展语法,如GFM的语法,或者使用其他工具来生成跨行合并的表格。

  5. 编辑器的支持:不同的Markdown编辑器对表格的支持程度可能有所不同,一些编辑器可能会自动对齐表格,而其他编辑器可能不会。因此,在编辑和预览表格时,最好使用支持表格功能较好的编辑器。

  • 总体而言,Markdown的表格语法相对简单,但在一些特殊需求下可能会受到限制。如果需要更复杂的表格布局或功能,可以考虑使用其他工具或库来生成表格。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/901840.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL数据库——SQL(3)-DQL(基本查询、条件查询、聚合函数、分组查询、排序查询、分页查询、案例练习)

目录 语法 基本查询 1.查询多个字段 2.设置别名 3.去除重复记录 示例 条件查询 1.语法 2.条件 示例 聚合函数 介绍 常见聚合函数 语法 示例 分组查询 语法 示例 排序查询 1.语法 2.排序方式 示例 分页查询 语法 示例 DQL案例练习 执行顺序 DQL总结…

【Linux操作系统】Linux系统编程中的共享存储映射(mmap)

在Linux系统编程中&#xff0c;进程之间的通信是一项重要的任务。共享存储映射&#xff08;mmap&#xff09;是一种高效的进程通信方式&#xff0c;它允许多个进程共享同一个内存区域&#xff0c;从而实现数据的共享和通信。本文将介绍共享存储映射的概念、原理、使用方法和注意…

降级gcc和g++为版本gcc-7和g++-7

错误提示&#xff1a; /usr/local/cuda-10.1/include/crt/host_config.h:129:2: error: #error -- unsupported GNU version! gcc versions later than 8 are not supported! 129 | #error -- unsupported GNU version! gcc versions later than 8 are not supported! …

TiDB 源码编译之 TiFlash 篇

作者&#xff1a; ShawnYan 原文来源&#xff1a; https://tidb.net/blog/5f3fe44d 导言 TiFlash 从去年四月一日开源至今已经过去将近一年半&#xff0c;这段时间里 TiFlash 从 v6.0.0-DMR 升级到了 v7.3.0-DMR &#xff0c;并增加了若干新特性&#xff0c;比如支持 …

aardio的CS架构mysql数据表查询实例

import win.ui; /*DSG{{*/ var winform win.form(text"aardio form";right759;bottom479) winform.add( buttonAdd{cls"button";text"复制";left516;top442;right587;bottom473;z11}; buttonClose{cls"button";text"退出";…

HTML详解连载(8)

HTML详解连载&#xff08;8&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一&#xff1a;额外标签发方法二&#xff1a;单伪元素法方法三&#xff1a;双伪元素法方法四&#xff1a;overflow浮动-总结…

漫谈红黑树:红黑树的奇妙演化

漫谈红黑树&#xff1a;红黑树的奇妙演化 一、红黑树的提出二、红黑树性质的简单推导三、结论 博主简介 &#x1f4a1;一个热爱分享高性能服务器后台开发知识的博主&#xff0c;目标是通过理论与代码实践的结合&#xff0c;让世界上看似难以掌握的技术变得易于理解与掌握。技能…

Dockerfile快速搭建自己专属的LAMP环境

目录 编写Dockerfile 1.文件内容需求&#xff1a; 2.值得注意的是centos6官方源已下线&#xff0c;所以需要切换centos-vault源&#xff01; 3.Dockerfile内容 4.进入到 lamp 开始构建镜像 推送镜像到私有仓库 1.创建用户并添加到私有仓库&#xff1a;​编辑​编辑 2.推…

CK-A60180、CK-B1542、CK-L3095单向离合器

CK-A1542、CK-A1747、CK-A2052、CK-A2652、CK-A3072、CK-A3580、CK-A4090、CK-A45100、CK-A450110、CK-A60130、CK-A65140、CK-A70150、CK-A75160、CK-A80170、CK-A1250、CK-A1855、CK-A2060、CK-A2563、CK-A2563T、CK-A2870、CK-A3080T、CK-A3585、CK-A35100、CK-A35140、CK-A…

Mybatis对参数的处理

环境配置 项目结构 导入依赖 <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.10</version></dependency><dependency><groupId>mysql</grou…

16、可重入锁+设计模式

可重入锁设计模式 while判断并自旋重试获取锁setnx含自然过期时间Lua脚本官网删除锁命令但不能保证可重如 问题&#xff0c;如何兼顾锁的可重入性问题&#xff1f; 可重入锁 可重入锁又名递归锁 是指在同一个线程在外层方法获取锁的时候&#xff0c;再进入该线程的内层方法…

Vue实战

初始化项目 创建项目 指令&#xff1a; pnpm create vite 实例&#xff1a; C:\Users\Administrator\Desktop\Vue\Vue3_admin_template>pnpm create vite .../Local/pnpm/store/v3/tmp/dlx-6140 | 1 Packages are hard linked from the content-addressable store to…

单体版ruoyi表格绑定按钮

先需要在表格中添加一个按钮&#xff0c;可以快速操作这条数据的某个0/1状态 表格的列 editFlag是检验用户是否有操作的权限 var editFlag [[${permission.hasPermi(pipayshop:itemCommoidtyInfoCategoryTop:edit)}]]; 绑定状态条 /* 用户状态显示 */function statusTools(…

我和 TiDB 的故事 | 远近高低各不同

作者&#xff1a; ShawnYan 原文来源&#xff1a; https://tidb.net/blog/b41a02e6 Hi, TiDB, Again! 书接上回&#xff0c; 《我和 TiDB 的故事 | 横看成岭侧成峰》 &#xff0c;一年时光如白驹过隙&#xff0c;这一年我好似在 TiDB 上投入的时间总量不是很多&#xff0…

baidu一面二叉树路径组数求和

举例&#xff1a;如下图&#xff0c;124125136 386 int sumTree(TreeNode* node,int sum){if(nodenullptr){return 0;}if(node->leftnullptr && node->rightnullptr){sum*10;sumnode->val;return sum;}sum *10;sum node->val;int sum_left sumTree(no…

网络安全---Ring3下动态链接库.so函数劫持

一、动态链接库劫持原理 1.1、原理 Unix操作系统中&#xff0c;程序运行时会按照一定的规则顺序去查找依赖的动态链接库&#xff0c;当查找到指定的so文件时&#xff0c;动态链接器(/lib/ld-linux.so.X)会将程序所依赖的共享对象进行装载和初始化&#xff0c;而为什么可以使用…

NPM 创建和管理组织

目录 1、创建一个组织 2、将用户帐户转换为组织 3、组织中开启双因素身份验证 3.1 关于组织的双因素身份验证 3.2 先决条件 3.3 在您的组织中要求双因素身份验证 3.4 帮助已删除的成员和外部协作者重新加入您的组织 4、重命名组织 5、删除组织 1、创建一个组织 任何n…

HRS--人力资源系统(Springboot+vue)--打基础升级--(三)查询用户信息

接上一集已经写了好导航侧界面&#xff0c;现在写个导航侧功能中的查询用户信息 1. 首先写一个员工信息vue&#xff0c;嗯 就叫employee.vue 2. 特地预留了右边的空白位置是用来展示数据的&#xff0c;所以我们要做子目录的一个关联&#xff0c;其次记得做地址的路由 3. Vue…

FreeRTOS基础六:中断管理2

在中断中使用队列 FreeRTOS的队列可以方便的实现中断传递数据到任务。但是如果数据到来的频率的非常高&#xff0c;导致中断触发频繁&#xff0c;则这种方式是非常不高效的。正如一些Demo所实现的&#xff0c;在UART中断中接收串口数据&#xff0c;然后放到队列中&#xff0c;…

华为OD机试关于无输入截止条件的ACM输入逻辑

无输入截止条件的ACM输入 华为OD机试题中有一些题目是没有输入截止条件的,比如 华为OD机试 - 数字游戏(Java & JS & Python)_伏城之外的博客-CSDN博客 从输入描述来看,每组有两行输入,但是并没有告诉我们具体有几组? 那么输入该如何截止呢? 此时,有两种输入…