码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • HTNL---表格标签和列表标签

    一、表格标签

    对于表格我想就不用做很多细说了吧，Excel大家应该都知道。HTML中的表格不是用来布局页面的而是用来展示数据的。

    1：表格标签基本使用

    1.  
    2. <table>
    3. <tr>
    4.  
    5. <th>姓名th>
    6. <th>年龄th>
    7. <td>第一td>
    8. <td>第二td>
    9.  
    10. tr>
    11. table>

    这里的

    就是表格，可以理解成表格中的行，包含在中的
    就是一行的列。

     

    		标签是表头单元格标签，在表格中我们一把会看到第一行中字体居中加粗等等，而这个效果可以通过标签实现。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <table>
    14.         <tr>
    15.             <th>姓名th>
    16.             <th>年龄th>
    17.             <th>地址th>
    18.  
    19.         tr>
    20.         <tr>
    21.             <td>张三td>
    22.             <td>19td>
    23.             <td>安徽td>
    24.         tr>
    25.     table>
    26. body>
    27.  
    28. html>

    2：表格标签基本属性

    1. 属性名            属性值                  描述
    2. align         left、center、right        规定表格相对周围元素的对齐方式
    3. border        1或""                      规定表格单元格是否拥有边框，默认为"",表示没有边框
    4. cellpadding   像素值                     规定单元边沿与其内容之间的空白，默认为1像素
    5. cellspacing   像素值                     规定单元格之间的空白，默认为2像素
    6. width         像素值或者百分比            规定表格的宽度

    注意这些属性我们都写在了

    标签中。

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.  
    13.     <table align="center" border="1" cellspacing="0">
    14.         <tr>
    15.             <th>姓名th>
    16.             <th>年龄th>
    17.             <th>地址th>
    18.  
    19.         tr>
    20.         <tr>
    21.             <td>张三td>
    22.             <td>19td>
    23.             <td>安徽td>
    24.         tr>
    25.     table>
    26. body>
    27.  
    28. html>

    3：表格标签的相关结构

    表格的结构其实就分成两种，表头结构和表身，一般表头就是第一行。

    1. <thead>thead>表头
    2. <tbody>tbody>表身

     注意

    里面必须要有标签

    4：合并单元格

    合并单元格的概念我想大家应该都知道，我就不多说了，直接说HTML中如何实现单元格的合并吧。

    单元格的合并又分为跨行合并和跨列合并。

    跨行：rowspan

    跨列：colspan

    如果你是跨行合并就要以左边为主，左边是目标单元格。跨列合并的话就要以上面为主，上面是目标单元格。

    合并单元格的方式：

    （1）确定跨行还是跨列

    （2）找到目标单元格，写上合并方式=合并单元格数量，如：

    （3）删除多余的单元格

    具体实例：

    这是一个5*5的表格，假如我现在合并第二行的第二列到第四列

    1. <table align="center" border="1" width="500" height="500" cellspacing="0">
    2.         <tr>
    3.             <td>td>
    4.             <td>td>
    5.             <td>td>
    6.             <td>td>
    7.             <td>td>
    8.         tr>
    9.         <tr>
    10.             <td>td>
    11.             <td colspan="3">td>
    12.  
    13.  
    14.             <td>td>
    15.         tr>
    16.         <tr>
    17.             <td>td>
    18.             <td>td>
    19.             <td>td>
    20.             <td>td>
    21.             <td>td>
    22.         tr>
    23.         <tr>
    24.             <td>td>
    25.             <td>td>
    26.             <td>td>
    27.             <td>td>
    28.             <td>td>
    29.  
    30.         tr>
    31.         <tr>
    32.             <td>
    33.  
    34.             td>
    35.             <td>td>
    36.             <td>
    37.  
    38.             td>
    39.             <td>td>
    40.             <td>td>
    41.         tr>
    42.  
    43.     table>

    二、列表标签

    1：有序列表

    有序列表即为有排列顺序的列表，在HTML中

      标签定义有序列表，
    1. 标签用来定义列表项，列表排序以数字来显示。

      1. <ol>
      2. <li>第一li>
      3. <li>第二li>
      4. ol>

      注意在

        标签中不能插入除了
      1. 之外的东西，但是你可以在
      2. 标签中插入。

        2：无序列表

        无序列表顾名思义就是没有顺序排列的列表。用

          标签定义无序列表，
        • 标签定义列表项。

          1. <ul>
          2. <li>第一li>
          3. <li>第二li>
          4. ul>

          3：自定义列表

          这个不是自己想怎么定义就定义的，也是有讲究的。

          定义自定义列表,
          定义列表中的其中一项，
          定义对于其中一个项的解释。

          1. <dl>
          2. <dt>1dt>
          3. <dd>1的解释1dd>
          4. <dd>1的解释2
          5. dl>

        • 相关阅读:
          【Spring云原生系列】SpringBoot+Spring Cloud Stream：消息驱动架构（MDA）解析，实现异步处理与解耦合
          2022年全国大学生数学建模竞赛E题目-小批量物料生产安排详解+思路+Python代码时序预测模型(三)
          Linux中搭建DNS 域名解析服务器（详细版）
          Amine-PEG3-carboxylic acid, hydrochloride；氨基三聚乙二醇羧基，盐酸盐，127457-79-8
          关于初次new springboot项目
          【大数据ETL工具，Kettle的学习和使用】
          自定义QChartView实现鼠标放在图表时，显示鼠标位置坐标值(x,y)
          c++智能指针[ shared_ptr / unique_ptr / weak_ptr ]介绍与使用
          Java 面试问题总结（详细） —— MySql 模块（MySQL高级）（建议收藏）
          CH455G驱动数码管
        • 原文地址：https://blog.csdn.net/gaoqiandr/article/details/127905338
        • 最新文章
        • 攻防演习之三天拿下官网站群
          数据安全治理学习——前期安全规划和安全管理体系建设
          企业安全 | 企业内一次钓鱼演练准备过程
          内网渗透测试 | Kerberos协议及其部分攻击手法
          0day的产生 | 不懂代码的"代码审计"
          安装scrcpy-client模块av模块异常，环境问题解决方案
          leetcode hot100【LeetCode 279. 完全平方数】java实现
          OpenWrt下安装Mosquitto
          AnatoMask论文汇总
          【AI日记】24.11.01 LangChain、openai api和github copilot
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
          奉劝各位学弟学妹们，该打造你的技术影响力了！
          五年了，我在 CSDN 的两个一百万。
          Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
          面试官都震惊，你这网络基础可以啊！
          你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候，用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图，Python爬虫120例，再上征途
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
        正则表达式工具 cron表达式工具 密码生成工具

        京公网安备 11010502049817号