HTML——表格的快速生成以及表格的合并

最新推荐文章于 2025-03-22 22:53:29 发布

猫小姐和她的影子

最新推荐文章于 2025-03-22 22:53:29 发布

阅读量8.1k

点赞数 10

分类专栏：案例文章标签： html css

本文链接：https://blog.csdn.net/qq_45685564/article/details/119085005

版权

案例专栏收录该内容

5 篇文章

订阅专栏

本文介绍Sublime Text中快速生成各种复杂表格的方法，包括单行单列、多行多列及带填充数据的表格等，并详细讲解如何创建不规则表格与表头带斜线的单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sublime表格的快速生成

单行单列

快捷键：table>tr>td 然后在按一下 tab键
注意：其中标签定义的是有若干行，表示每行
被分割成若干单元格。
实现：
在这里插入图片描述

单行多列

快捷键：table>tr>td*N 然后按一下tab键，其中N是一个整数，代表需要生产多少列
在这里插入图片描述

多行单列

快捷键：table>tr*M>td 然后按一下tab键，其中M是一个整数，代表需要生产多少行
在这里插入图片描述

多行多列

快捷键：table>trM>tdN 然后在按一下 tab 键，其中M和N都是整数，M代表需要产生多少行，N代表需要产生多少列
在这里插入图片描述

带填充数据的表格

快捷键：table>tr*M>td{填充的内容 $KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲*N 然后在按一下 tab 键\dots$ 是一个从1开始自增的整数
在这里插入图片描述

高级表格

表格标题

什么是表格标题呢？
在这里插入图片描述
如何实现这样的表格标题呢？其实很简单。
使用一个caption标签就可以解决。

代码：

<table align="center" width="800" border="1">
    <caption><h2>2016年9月份全球操作系统市场份额</h2></caption>
    <tr>
        <td>操作系统</td>
        <td>厂商</td>
        <td>2016.09</td>
        <td>2016.08</td>
        <td>增长值</td>
    </tr>
    <tr>
        <td>windows 7</td>
        <td>Microsoft</td>
        <td>48.27%</td>
        <td>47.25%</td>
        <td>1.03%</td>
    </tr>
    <tr>
        <td>wWindows 10</td>
        <td>Microsoft</td>
        <td>22.53%</td>
        <td>22.99%</td>
        <td>-0.46%</td>
    </tr>
    <tr>
        <td>windows XP</td>
        <td>Microsoft</td>
        <td>9.11%</td>
        <td>9.36%</td>
        <td>-0.25%</td>
    </tr>
    <tr>
        <td>windows 8.1</td>
        <td>Microsoft</td>
        <td>7.83%</td>
        <td>7.92%</td>
        <td>-0.09%</td>
    </tr>
    <tr>
        <td>Mac OS ×10.11</td>
        <td>Apple</td>
        <td>4.07%</td>
        <td>4.38%</td>
        <td>-0.31%</td>
    </tr>
    <tr>
        <td>Linux</td>
        <td>Linux</td>
        <td>2.23%</td>
        <td>2.11%</td>
        <td>0.13%</td>
    </tr>
    <tr>
        <td>windows 8</td>
        <td>Microsoft</td>
        <td>1.78%</td>
        <td>1.82%</td>
        <td>-0.04%</td>
    </tr>
    <tr>
        <td>Mac OS ×10.10</td>
        <td>Apple</td>
        <td>1.53%</td>
        <td>1.73%</td>
        <td>-0.20%</td>
    </tr>
    <tr>
        <td>Windows Vista</td>
        <td>Microsoft</td>
        <td>1.09%</td>
        <td>1.05%</td>
        <td>0.04%</td>
    </tr>
</table>

实现效果：

在这里插入图片描述

不规则表格之单元格的合并

接下来我们看看生活中不常见的不规则的表格如何实现吧。
例如这样的课程表，该如何用HTML和css去实现呢。
在这里插入图片描述
**第一步：**我们先使用上面的快速生成表格的方法生成一个10行8列的表格。table>tr10>td8
**第二步：**实现单元格合并。
可以看到该表格第一行的第一个单元格合第二个单元格是合并的。
1.水平方向的合并（按列合并）。其中“2”是指合并几个单元格

  <td colspan="2" >   </td>

需要注意的是，合并的单元格，只需要写一个td。也就是说，这里水平方向合并了两个单元格，那么这一行中的第二对标签不需要写。

而上午和下午这两个区域也是不规则的，垂直方向的单元格合并。而“上午”这一块区域的垂直方向的合并，则只需要在第二个中的第一个中写，后面四行的第一个都不需要写。就能完成垂直方向的合并。
2.垂直方向的合并（按行合并）

<td rowspan="5">上午</td>

第三步：表头带斜线的单元格怎么实现。
实现的方法很多，下次再进行总结。我这里使用的是伪元素的方法构造出斜对角线。
然后再用两个容器放内容，容器的高度是单元格的一半，上面的容器中的文字右对齐，下面容器里的文字左对齐。就可以实现这个效果了。

接下来看看具体代码吧

html的代码

 <table align="center" width="800" border="1">
        <tr>
            <td colspan="2" class="top">
                <span>星期</span>
                <span>节次</span>
            </td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>

        </tr>
        <tr>

            <td rowspan="5">上午</td>
            <td>早自习</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td></td>
        </tr>
        <tr>
            <td>第一节</td>
            <td>物理</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>第二节</td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td>数学</td>

        </tr>
        <tr>
            <td>第三节</td>
            <td>英语</td>
            <td>生物</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>第四节</td>
            <td>化学</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>第一节</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td>化学</td>
            <td>计算机</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>第二节</td>
            <td>语文</td>
            <td>物理</td>
            <td>生物</td>
            <td>英语</td>
            <td>生物</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>第三节</td>
            <td>德育</td>
            <td>数学</td>
            <td>体育</td>
            <td>生物</td>
            <td>自习</td>
            <td> </td>

        </tr>
        <tr>
            <td>晚上</td>
            <td>晚自习</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td> </td>
        </tr>
    </table>```

###### css的代码

```css
body table tr .top {
            border: solid 1px #000;
            width: 100px;
            height: 26px;
            position: relative;
            background-color: transparent;
        }

        .top:before {
            position: absolute;
            top: 0px;
            right: 0;
            left: 0;
            bottom: 0;
            border-bottom: 26px solid #000;
            border-right: 198px solid transparent;
            content: "";
        }

        .top:after {
            position: absolute;
            left: 0;
            right: 1px;
            top: 1px;
            bottom: 0;
            border-bottom: 26px solid white;
            border-right: 197px solid transparent;
            content: "";
        }
        body table tr .top span:nth-child(1){
            position: absolute;
            top: 0;
            right: 3px;
            text-align: right;
            height: 50%;
            z-index: 12;
        }
        body table tr .top span:nth-child(2){
            position: absolute;
            text-align: left;
            top: 50%;
            left: 3px;
            transform: translate(0,-50%);
            height: 50%;
            z-index: 12;
        }

实现效果

在这里插入图片描述