0

0

HTML不同表格属性的总结(附代码)

不言

不言

发布时间:2018-07-21 11:38:54

|

2501人浏览过

|

来源于php中文网

原创

本篇文章给大家分享的是关于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被假定为属于表的主体

速创猫AI简历
速创猫AI简历

一键生成高质量简历

下载

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

    效果如下:

     相关推荐:

    如何动态生成html元素以及为元素追加属性的方法介绍(附代码)

    相关专题

    更多
    html5动画制作有哪些制作方法
    html5动画制作有哪些制作方法

    html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

    499

    2023.10.23

    HTML与HTML5的区别
    HTML与HTML5的区别

    HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

    416

    2024.03.06

    html5从入门到精通汇总
    html5从入门到精通汇总

    想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

    3

    2025.12.30

    html5新老标签汇总
    html5新老标签汇总

    HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

    5

    2025.12.30

    html5空格代码怎么写
    html5空格代码怎么写

    在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

    2

    2025.12.30

    html5怎么做网站教程
    html5怎么做网站教程

    想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

    9

    2025.12.31

    HTML5建模教程
    HTML5建模教程

    想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

    6

    2025.12.31

    html5怎么使用
    html5怎么使用

    想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

    2

    2025.12.31

    php源码安装教程大全
    php源码安装教程大全

    本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

    7

    2025.12.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    AngularJS教程
    AngularJS教程

    共24课时 | 2.2万人学习

    PHP基础入门课程
    PHP基础入门课程

    共33课时 | 1.9万人学习

    Go语言教程-全程干货无废话
    Go语言教程-全程干货无废话

    共100课时 | 9.4万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号