当前位置: 首页 > article >正文

【HTML】二、列表、表格

文章目录

  • 1、列表
    • 1.1 无序列表
    • 1.2 有序列表
    • 1.3 定义列表
  • 2、表格
    • 2.1 定义
    • 2.2 表格结构标签
    • 2.3 合并单元格

1、列表

列表分为:

  • 无序列表
  • 有序列表
  • 定义列表:一个标题下有多个小分类
    在这里插入图片描述

1.1 无序列表

ul嵌套li,ul是无序列表,li是列表条目

<body>
    <ul>
        <li>开发</li>
        <li>测试</li>
        <li>发布</li>
    </ul>
</body>

效果:
在这里插入图片描述
注意,ul标签里,只能嵌套li标签,不能嵌套h、img等其他标签,但li标签里,可以包裹任何内容

1.2 有序列表

ol嵌套li,ol是有序列表,li是列表条目

<body>
    <ol>
        <li>开发</li>
        <li>测试</li>
        <li>发布</li>
    </ol>
</body>

效果:

在这里插入图片描述
同样的,ol标签里,只能嵌套li标签,但li标签里,可以包裹任何内容

1.3 定义列表

一个标题下有多个内容,如很多官网底部的:

在这里插入图片描述
dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情

在这里插入图片描述

<body>
      <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dd>维修服务价格</dd>
        <dd>订单查询</dd>
        <dd>以旧换新</dd>
     </dl>
</body>

效果:
在这里插入图片描述
注意:dl里面只能包含dt和dd,而dt和dd则可以包含任何内容

2、表格

2.1 定义

类似excel,用来展示数据,语法上:table嵌套tr,tr嵌套td/th,th是表头,有加粗和居中效果

在这里插入图片描述
比如写上面这个表格,一行一行写

<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2.2 表格结构标签

此外,还有三个表格结构标签:
在这里插入图片描述
加上他们的好处是:

  • 让表格结构更加清晰
  • 方便为这三大块分别设置不同的CSS样式
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
       
    </table>
</body>

以上代码,在前端展示效果上,和不加结构标签一模一样

2.3 合并单元格

在这里插入图片描述
合并时,保留最左最上的单元格(如上图的跨行合并,保留最上的单元格,跨列合并,则保留最左的单元格)

在这里插入图片描述

  • 跨行合并,保留最的单元格,添加属性rowspan,其值为需要合并的单元格数量,删掉被合并的其他单元格
  • 跨列合并,保留最的单元格,添加属性colspan,其值为需要合并的单元格数量,删掉被合并的其他单元格
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <!-- <td>100</td> 删掉被合并的其他单元格-->
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>

效果:
在这里插入图片描述
注意,合并不能跨越表格结构标签,比如上面把李四和总结两个格子合并,就横跨了tbody和tfoot


http://www.kler.cn/a/587026.html

相关文章:

  • MATLAB直方图全解析
  • Java面试:集合框架体系
  • Linux系统之less命令的基本使用
  • Windows安装Apache Maven 3.9.9
  • windows协议不再续签,华为再无windows可用,将于四月发布鸿蒙PC
  • 【强化学习】PPO算法代码详解
  • java八股文之消息中间件
  • 创业者认知、思辨、成长指南
  • HarmonyOS NEXT个人开发经验总结
  • Docker 镜像和容器相关命令总结
  • Linux第三次练习
  • Qt实现多线程
  • vscode python相对路径的问题
  • 3.6、数字签名
  • Ollama+OpenWebUI本地部署大模型
  • nvm安装node失败的处理方法
  • @RequestParam、@RequestBody、@PathVariable
  • DeepSeek技术解析:MoE架构实现与代码实战
  • 十种处理权重矩阵的方法及数学公式
  • Java注解对象克隆