为博客添加自定义的表格

1、一般表格

| 标题 | 内容 |
| :-: | :-: |
|这是标题 | 这是内容 |

看看效果

标题 内容
这是标题 这是内容

对齐方式说明

|:--:|居中对齐、
|:--|左对齐
|--:|右对齐

2、合并单元格(很遗憾Markdown并不支持,需要使用HTML的table,好在markdown兼容html)


1)简单单元格合并

主标题
副标题
A B C
D E F
G H I

代码如下:

<table border="1"> 
    <tr>
        <th colspan="3">主标题</th>
    </tr>
    <tr>
        <th colspan="3">副标题</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
</table>

  1. 较复杂单元格合并
主标题
副标题
跨行合格单元格 跨列合并单元格
A B C
D F F G
H I J K
注1:这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字

注2:这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字

代码如下:

<table>
    <tr>
        <td colspan="4" align="center">主标题</th>
    </tr>
    <tr>
        <td colspan="4" align="center">副标题</th>
    </tr>
    <tr align="center">
        <td rowspan="2">跨行合格单元格</td>
        <td colspan="3">跨列合并单元格</td>
    </tr>
    <tr align="center">
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr align="center">
        <td> D </td>
        <td> F </td>
        <td> F </td>
        <td> G </td>
    </tr>
    <tr align="center">
        <td> H </td>
        <td> I </td>
        <td> J </td>
        <td> K </td>
    </tr>
    <tr>
    <td colspan="4">注1:这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字</p>
注2:这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字这里是备注说明文字</td>
    </tr>
<table>


posted @ 2021-03-19 19:45  ITRyan  阅读(147)  评论(0)    收藏  举报