首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

HTML不同表格属性的总结（附代码）

作者：眭嘀佶毅 | 来源：互联网 | 2020-08-09 06:29
本篇文章给大家分享的是关于HTML不同表格属性的总结（附代码），内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。
本篇文章给大家分享的是关于HTML不同表格属性的总结（附代码），内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。

这里主要总结记录下表格的一些属性和简单的样式，方便以后不时之需。

1、

　　用来定义HTML的表格，具有本地属性 border 表示边框，border属性的值必须为1或空字符串("")。该属性不会控制边框的样式，而是由CSS来控制

　　table元素可以有tr，th，td，thead，tbody，tfoot，colgroup元素

2、

　　用来定义表格的一行。由于HTML表格是面向行的，所以必须分别表示每一行

　　tr元素可以在table，thead，tbody和tfoot元素内使用

　　tr元素内可以包含一个或者多个td或th元素

　　它的align,bgcolor等属性已过时，如果要设置属性，请使用CSS设置

3、

　　用来定义表格的页眉，表头的包装器。可以定义一行或多行，这些行是 table 元素的列标签

　　没有thead元素，所有的tr被假定为属于表的主体

6、

　　用来定义表格的主体

7、

　　用来定义标记表格的页脚

⚠️：

、标签内部必须拥有 标签

    • 和标签不管放在

    　　用来定义表格单元格，可以同colspan，rowspan，headers局部属性使用

    　　(1)colspan： 列跨度，该属性规定了单元格可横跨的列数，该属性的值必须是整数

    　　(2)rowspan：行跨度，该属性规定了单元格可横跨的行数，该属性的值必须是整数

    　　(3)headers：该属性的值是一个或多个单元的ID属性值，将单元格与列标题相关联，可用于使用屏幕阅读器

    ⚠️：每个表格必须包含以上三个元素

    一个简单的实例

        
        
    
            
    
                A
                B
                C
            
    
            
    
                D
                E
                F

    效果如下：

    4、

    　　用来定义标题单元格，使我们有效区分数据及其描述

    　　它同 <td> 元素具有相同的局部属性，两者有如下区别：

    		是表示头标记，通常位于首行或者首列。而且中的文字默认会被加粗，而是不会的

    		• 是数据标记，表示单元格的具体的数据

    5、

    标签内的哪个位置，都会被分别定为到表格的头部和底部。可以出现在或之前或之后。在html5之前，元素必须出现在元素之前，在html5中，可以将元素放在或最后一个元素后面

    8、

    　　用来定义表列组，可以使用其来将样式应用于某个列，当然也可以使用下面要说的col元素

    　　具有局部属性 span 的

    表示列组应该横跨的列数。默认是一列，即对表格的一列设置样式

    　　

    可以包含一个或多个 元素

    9、

    　　用来表示表单个列，建议使用

    包裹元素而不是直接设置span属性定义组

    　　

    也具有局部属性span

    　　

    放在的元素内部，的咩哥实例表示组中的一列。使用该标签可以将样式应用于列的组和该组的单个列

    10、

    　　用来定义表格的标题，每个表中只能包含一个

    元素

    一个简单的例子：

        
        
    
    
        
    
            
                
                
            
            
            
                
    
                    Rank
                    Name
                    Color
                    Size & Votes
                
    
                
            
                
    
                    Rank Footer
                    Name Footer
                    Color Footer
                    Size And Votes Footer
                
    
                
            
                
    
                    Favorite:
                    XML
                    CSS
                    Java
                    IOS
                
    
                
    
                    2nd Favorite:
                    Web
                    HTML5
                    CS
                    460

    View Code

    效果如下：


    推荐阅读
    • js

      Alink回归预测的不完善问题及期待

      本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
    • json

      VScode格式化文档换行或不换行的设置方法

      VScode格式化文档换行或不换行的设置方法
      本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
    • 上传

      基于layUI的图片上传前预览功能的2种实现方式

      基于layUI的图片上传前预览功能的2种实现方式
      本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
    • js

      HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

      HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
      本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
    • js

      求解hdu 1003 java题目的动态规划优化方法

      本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
    • js

      OC学习笔记之@property和@synthesize

      本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
    • js

      Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

      Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine
      本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]
    • js

      Hibernate基础映射

      在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
    • js

      SpringBoot集成前端模版（thymeleaf）的配置步骤

      本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
    • js

      测试人的性格，点火让他着急，考验婚姻问题的善意玩人

      本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
    • js

      Java实现大数乘法（分治算法）

      本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
    • js

      Webpack5内置处理图片资源的配置方法

      Webpack5内置处理图片资源的配置方法
      本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
    • js

      知识图谱——机器大脑中的知识库

      知识图谱——机器大脑中的知识库
      本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
    • js

      Linux进程控制块PCBtask_struct结构体结构及作用详解

      本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
    • js

      Voicewo在线语音识别转换jQuery插件的特点和示例

      Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    author-avatar
    眭嘀佶毅
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有