Markdown (CSDN) MD editor (4) - beautiful table (table background color, cross-row, cross-column, multi-row)

Contents
1, markdown table
2, HTMLtable
 2.1 label attribute
 2.2 cross-column cell (merge cell)
 2.3 cross-row cell (merge cell)
 2.4 line break in cell
 2.5 cell background color
 2.6 cell font (color, size, font)
 2.7 The <, > characters in the cell
 2.8 Other attributes of the html table

Markdown is a lightweight markup language with concise typography syntax, allowing people to pay more attention to the content itself rather than typography. It writes documents in an easy-to-read and easy-to-write plain text format, which can be mixed with HTML, and can export HTML, PDF, and its own .md format files. Because of its conciseness, efficiency, readability, and ease of writing, Markdown is widely used, such as Github, Wikipedia, Jianshu, etc.

---

1. Markdown form

The table syntax of markdown is simple. Use three or more hyphens ( ---) to create the title of each column; use pipes ( |) to separate each column; use colons ( ) on both sides of the hyphen :to indicate which side to align with when creating the title; use Backticks ( `) can emphasize text, see the example directly:

• markdown format text

| Align `left`   | center align |   Align right |
| :------------- | :----------: | ------------: |
| `left`-aligned |   centered   | right-aligned |
| `左`对齐        |    中对齐     |         右对齐 |

• display effect

Align left	center align	Align right
left-aligned	centered	right-aligned
左align	center alignment	right align

---

2. HTMLForm

The table syntax of markdown is simple, and the function is also simple. Sometimes the table needs to set the background color, cross rows, and cross columns. markdown supports the syntax of embedded HTML , so you can use HTML tables to meet such requirements.

The HTML table is <table>defined by the tag, the header
of the table is defined by the tag, each row of the table is defined by the tag, and the divided cells of each row are defined by the tag. These tags have some built-in attributes that are used to finally change the overall style of the table. Let's take a look at these attributes first, and then use examples to see how to make a beautiful table.<th>
<tr>
<td>

2.1 Label attributes

• <table>The attribute attribute of the label
  borderis used to set the border size of the table

• <th>, <td>The attribute of the label The attribute
  colspanindicates that a grid can span several columns. The attribute
  rowspanindicates that a grid can span several
  bgcolorrows. The attribute defines the background color of the cell
  width, expressed in hexadecimal rgb. The attribute is represented by a numerical
  heightvalue to indicate the height of the cell, and the attribute is represented by a numerical
  alignvalue to indicate the alignment. The values ​​are:left、right、center

2.2 Cross-column cells (merged cells)

Create a table below so that the grid in the first row spans two grids, and you only need to add attributes to the cells in the first row colspan="2",
markdown代码如下：

<table border="2" >
	<tr >
		<td colspan="2">跨两个单元格</td>
	</tr>
	<tr >
		<td>第一格</td>
		<td>第二格</td>
	</tr>
</table>

显示效果如下：

across two cells
first frame	second frame

2.3 Cross-row cells (merged cells)

Create a table below so that the grid in the first column spans two rows, and you only need to add attributes to the first cell rowspan="2",
markdown代码如下：

<table border="2" >
	<tr >
		<td rowspan="2">跨两行的单元格</td>
		<td>第一格</td>
	</tr>
	<tr >
		<td>第二格</td>
	</tr>
</table>

显示效果如下：

Cells spanning two rows	first frame
	second frame

2.4 Line break in cell

Create a table below, write multi-line text in the second cell, you only need to add it after each line of text to <br>change the line
markdown代码如下：

<table border="2" >
	<tr >
		<td>只有一行</td>
		<td>
			这是第一行<br>
			这是第二行<br>
			这是第三行<br>
		</td>
	</tr>
</table>

显示效果如下：

only one line

This is the first row This is the second row This is the third row

2.5 Cell background color

Create a table below and set a different background color for each grid. You only need to modify the properties of the cell bgcolor, which can use the color recognized by the system, or use uppercase or lowercase hexadecimal.
markdown代码如下：

<table border="2" >
	<tr >
		<td bgcolor="red">红色</td>
		<td bgcolor="orange">橙色</td>
		<td bgcolor=#FFFF00>黄色</td>
		<td bgcolor=#00FF00>绿色</td>
		<td bgcolor=#0000ff>蓝色</td>
		<td bgcolor=#00ffff>靛色</td>
		<td bgcolor=#ff00ff>紫色</td>
	</tr>
</table>

显示效果如下：

red

orange

yellow

green

blue

Indigo

Purple

You can see this article for the color comparison table: HTML color code comparison table-English code, Chinese description, hexadecimal, rgb value

2.6 Cell font (color, size, font)

Create a table below, use fontthe label to change the font, the first grid uses it 4号红色楷体, and the second grid uses three color fonts at the same time. For more information about fonts, you can read this article: https://blog.csdn.net/wkd_007 /article/details/124253243
markdown代码如下：

<table border="2" >
	<tr >
		<td width="50%"><font face="楷体" color=red size=4>4号红色楷体</font></td>
		<td>
			<font color=red>红</font><font color=green>绿</font><font color=blue>蓝</font>
		</td>
	</tr>
</table>

显示效果如下：

No. 4 red italics

red green blue

<、>2.7 Characters in cells

Create a form below, and you need to input in the second form <、>. Direct input will cause grammatical errors. You need to use html escape characters to replace, &ltexpress <, &gtexpress >, and more escape characters can be found in this article: HTML escape characters Chart
markdown代码如下：

<table border="2" >
	<tr >
		<td >关闭设备</td>
		<td align=left>
			<font face="courier New" font color=red>#include &ltunistd.h&gt</font><br/>
			<font face="courier New" font color=blue>close(framebuf_fd);</font><br/>
		</td>
	</tr>
</table>

显示效果如下：

turn off the device

#include <unistd.h> close(framebuf_fd);

2.8 Other attributes of html table

markdown代码如下：

<table border="2" >
	<tr>
		<th colspan="2" align="center">markdown表格</th>
		<th colspan="2" >html表格</th>
	</tr>
	<tr>
		<td width="10%" rowspan="4">语法</td>
		<td width="40%" align=left>标题->连字符(---)</td>
		<td  width="10%" rowspan="4" bgcolor=#FAEBD7>语法</td>
		<td align=right bgcolor=#FFB6C1>表格-><font color=red>table</font>标签</td>
	</tr>
	<tr>
		<td align=left>分隔每列->管道(|)</td>
		<td align=right bgcolor=#D8BFD8>标题-><font color=red>th</font>标签</td>
	</tr>
	<tr>
		<td align=left>对齐->冒号(:)</td>
		<td align=right bgcolor=#B0C4DE>行-><font color=red>tr</font>标签</td>
	</tr>
	<tr>
		<td align =left>强调->反引号(`)</td>
		<td align=right bgcolor=#AFEEEE>列-><font color=red>td</font>标签</td>
	</tr>
</table>

显示效果:

markdown form		html form
grammar	Title -> Hyphen (---)	grammar	Form -> table tag
	Separate each column -> pipe (|)		title -> th tag
	Align -> Colon (:)		row -> tr tag
	emphasis -> backtick (`)		column -> td label

In the markdown code above , you can see that the tag mentioned in the previous article is also used <font>to make the font of the table richer. If you are unclear about the embedded html table, you can combine the above example, copy the markdown code to the markdown editor to see the effect, and modify it yourself to help you understand.

References:
Markdown Official Tutorial
Markdown Style Customization and Detailed Explanation

---

Related articles:
Markdown editor (1) - realize in-page jump
Markdown editor (2) - text style (change font, font size, font color, bold, italic, highlight, strikethrough)
Markdown editor (3 ) - image scaling, specifying size, centering, left alignment, right alignment