提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

〖大前端 - 基础入门三大核心之 html 篇⑯〗- 认识表格 与 合并单元格

基础HTML前端入门 核心 合并 表格 三大
2023-09-14 09:05:18 时间
  • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
  • 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
  • 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。

文章目录

我们已经把表单相关的内容学完了，知道了什么是表单、如何创建表单、表单有哪些基本控件等。网页中还有种比较常见的东西，就是表格。接下来就一起学习它吧。

⭐️创建表格

我们通常理解的表格就是N行N列的一个表格，在HTML中理解表格的方式和N行N列稍微有些偏差。

在HTML中，表格用<table></table>创建。

一个表格还是有N行，每行用一个标签对<tr></tr>创建。每行都有N个格，每格用一个标签对<td></td>创建。

tr表示table row，即表格的行
td表示table data，即表格的数据

  • <table>标签的border属性：表示表格边框的粗细。

上图中的一个三行四列的表格，用HTML标签创建，需要些三对<tr></tr>，每对<tr></tr>包含四对<td></td>。

示例代码：

<table border="1">
    <caption>字母表</caption>
    <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
    </tr>
</table>
  • <table>标签的caption标签：表格的标题，常常最为<table>的第一个子元素出现，写在所有的tr之前

  • <th>标签

    <th>标签是表格的标题标签，th和td是同一级的。

    image-20221129152925308

这里可以看到表格创建出来还是比较”丑“的，没关系，等以后学了CSS，就可以把表格美化成我们想要的样子了。

在上文中，我们已经了解了HTML中表格的创建方式是使用<table>标签包裹<tr>标签再包裹<td>标签创建的。也了解到表格标题行的标签是<th>,标题标签是<caption>。在使用表格过程中，还有个常见的功能就是合并单元格。那么在HTML中怎么合并单元格呢？

⭐️ 合并单元格

合并单元格有两种：跨列合并单元格、跨行合并单元格。

🌟 跨列合并单元格

HTML中跨列合并单元格就用到了<table>标签的colspan属性

实现上图效果的代码如下：

<table border="1" width="200">
    <tr>
        <td colspan="2">A</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>A1</td>
        <td colspan="3">B1</td>
    </tr>
    <tr>
        <td colspan="4">A2</td>
    </tr>
</tble>

🌟 跨行合并单元格

HTML中跨列合并单元格就用到了<table>标签的rowspan属性

实现上图效果的代码如下：

<table border="1" width="200">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>A1</td>
        <td rowspan="2">B1</td>
        <td>C1</td>
        <td rowspan="3">D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>C2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</tble>

🌟 跨行并且跨列合并单元格

同时使用colspan和rowspan属性就可以同时实现跨行&跨列合并单元格。

实现上图效果的代码如下：

<table border="1" width="200">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>A1</td>
        <td rowspan="2">B1</td>
        <td rowspan="3" colspan="2">D1</td>
    </tr>
    <tr>
        <td>A2</td>
    </tr>
    <tr>
        <td>A3</td>
        <td>B3</td>
    </tr>
</tble>

  • 合并单元格的难点：

  • 一定要分清楚有几行，每行有几个小格，有几个小格就有几个td。遵循这个原则，就不怕合并出错。

跨行且跨列的表格在实际项目中遇到的概率较小，但是我们也要掌握方法。有些面试题中会有这样的题目，可以增加我们面试成功的概率。

相关文章