WordPress插入纯代码html表格,生成合并表格

2023-05-16 13:10:24 浏览数 (1)

WordPress插入表格有很多种方法,可以选用的插件也有很多。

两者均有利有弊,使用插件方便,快速,但功能的实现依赖于插件,给你什么你就只能用什么。

纯代码实现,稳定可维护性可控性高。可自定义度高,随心所欲有什么需求都能做出来,做不出来就是技术还待加强。缺点就是不那么快速,需要技术基础。

插件只能代替某一方面场景,他是给人来用的。而不是代替人的。插件也是代码做的,所以我觉得做技术的人都更应该关注代码,否只知其表,不会其核心技术。容易被卡脖子。

表格生成:

在线HTML表格生成:https://www.textfixer.com/html/html-table-generator.php

表格合并:

手写表格就指定少不了单元格合并,参照下边的文章内的代码开始

CSDN:Html Table 合并单元格:https://blog.csdn.net/jiankunking/article/details/46953073

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ol>
    <li>基本表格</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <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>
    <br/>
    <li>表格合并列</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td colspan="3" >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>
    <br/>
    <li>表格合并行</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td  rowspan="3">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>
    <br/>
    <li>复杂表格</li>
    <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
        <tr>
            <td >1.1</td>
            <td colspan="2">1.2</td>
            <!--<td>1.3</td>-->
        </tr>
        <tr>
            <td >2.1</td>
            <td rowspan="2">
                2.2
                <br/>
                3.2
            </td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <!--<td>3.2</td>-->
            <td>3.3</td>
        </tr>
    </table>
    <br/>
</ol>
</body>
</html>

相关Url:

  • CSDN:Html Table 合并单元格:https://blog.csdn.net/jiankunking/article/details/46953073
  • 在线HTML表格生成:https://www.textfixer.com/html/html-table-generator.php

0 人点赞