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

HTML教程:HTML的10个表格相关标记

作者：川大蛋炒饭-_246 | 来源：互联网 | 2023-09-02 23:36
根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主

根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用HTML表格来定义网页的布局，但是表格在方便的排列数据信息行和列方面非常完美，而且如果你一定要在一个页面上显示表列数据，你就不得不使用它们！为什么不呢？然而，在这种情况下，一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。

HTML有10个表格相关标签。下面是一个带有简介的列表，但是首先，文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:


  • 定义表格标题(4, 5)

  • 为表格的列定义属性(4, 5)

  • 定义表格列的分组(4, 5)

  • 定义表格(4, 5)
  • 定义表格主体(4, 5)
  • 定义表格的表注(底部)(4, 5)
  • 定义表格的表头(4, 5)
  • 定义表格的行(4, 5)

    一个基本的表格结构如下:

    它包含一个标题、头部、主体和底部。正确的HTML元素顺序是：


    定义一个单元格 (4, 5)
  • 定义表格的表头 (4, 5)




  • 你也可以使用

    和 来定义表格的列或为列分组：



  •






  • 下面是一个正确的表格结构实例：


    <table border="1">
    <caption>Table caption here</caption>
    <colgroup span="1" style="background:#DEDEDE;"/>
    <colgroup span="2" style="background:#EFEFEF;"/>
     

    <thead>
    <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    </tr>
    </thead>
     

    <tfoot>
    <tr>
    <td>Foot 1</td>
    <td>Foot 2</td>
    <td>Foot 3</td>
    </tr>
    </tfoot>
     

    <tbody>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    </tr>
    <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    </tr>
    </tbody>
    </table>


    在浏览器中的结果如下图所示:

    关于表格的一些技巧



    • 根据w3schools的解释和用法，在一个table定义中，
    元素必须出现在之前，这样，浏览器就可以在接受到所有数据之前呈现表注了。另外，如果不是这个顺序，将不能通过W3C的HTML4和XHTML验证，无论你声明哪种DTD。
  • 在 HTML 4.01 中,表格的align和bgcolor属性不赞成使用，所以在HTML 5中不再有任何table的属性被支持（事实上，在XHTML 1.0 Strict DTD中已经不支持”align”和”bgcolor”属性了）；

  • 所有主流浏览器都支持
    • 标签，但是Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性；
  • css中的empty-cells:show|hide 可以设定空单元格是否显示边框。注意，这个需要设置在table而不是td/th中。IE6中比较容易遇到该问题；

  • css中的border-collapse:collapse | separate 可以设置表格的边框是否被合并成一个边框；

  • css中的border-spacing属性等效于table的cellspacing属性。

    • 为了实现现在所提倡的表现和结构分离的开发模式，前端观察建议将页面中所有与表现层有关的东东，都用CSS来控制，不用HTML自带的属性来控制页面的表现，而table是最容易被忽略的一个。

    关于table的更多详细内容可以查看W3C的文档： w3 Introduction to tables

    最后留一个非常简单的问题给大家，CSS的哪个属性等效于table的cellpadding属性？



    推荐阅读
    • header

      Python瓦片图下载、合并、绘图、标记的代码示例

      Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]
    • header

      响应式页面的概述和实现方式

      本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]
    • match

      使用圣杯布局模式实现网站首页的内容布局

      使用圣杯布局模式实现网站首页的内容布局
      本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
    • string

      南邮ctf-web的writeup

      本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
    • header

      HTML中表格的页眉页脚布局解决方案

      本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]
    • header

      常用的CSS属性及用法整理

      本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
    • header

      CSS |网格行结束属性

      CSS|网格-行-结束属性原文:https://www.gee ... [详细]
    • header

      Python爬虫_HTTP标准

      文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议（超文本传输协议）是用于从WWW服务 ... [详细]
    • char

      前端提高篇(七十)：SVG基本使用、基本样式、路径path

      前端提高篇(七十)：SVG基本使用、基本样式、路径path
      SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范，与html5的使用有所区别SVG绘制出来的是矢量图，放大之后不会失真官方文 ... [详细]
    • php

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

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

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

      Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • header

      使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例

      使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
      本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤，可以获取到网站首页的新闻数据。代码示例使用Python编写，并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
    • string

      C#导入、导出功能

      导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
    • header

      欢乐的票圈重构之旅——RecyclerView的头尾布局增加

      欢乐的票圈重构之旅——RecyclerView的头尾布局增加
      项目重构的Git地址：https:github.comrazerdpFriendCircletreemain-dev项目同步更新的文集：http:www.jianshu.comno ... [详细]
    • string

      PHP二维数组根据某个字段排序的方法

      本文介绍了一种在PHP中对二维数组根据某个字段进行排序的方法，以年龄字段为例，按照倒序的方式进行排序，并给出了具体的代码实现。 ... [详细]
    author-avatar
    川大蛋炒饭-_246
    这个家伙很懒，什么也没留下！
    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社区 版权所有