文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

HTML的10个表格相关标记_HTML/Xhtml_网页制作

php中文网
发布： 2016-05-16 16:42:09
原创
2046人浏览过

事实上很多人会说”我看到永远不应该使用表格”的说法，但是这绝对是错误的！这个建议只是针对使用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 caption here
    Head 1 Head 2 Head 3
    Foot 1 Foot 2 Foot 3
    A B C
    D E F


在浏览器中的结果如下图所示:
重新认识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属性？

    重新认识table
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：语义化的网页 XHTML语义化标记_HTML/Xhtml_网页制作 下一篇：html超级链接标记A的TARGET属性详解_HTML/Xhtml_网页制作
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML下载链接添加进度条怎么实现 实现HTML下载链接添加进度条的关键在于利用JavaScript和HTML5的FileAPI来监控下载进度。让我们深入探讨如何实现这一功能，并分享一些实际应用中的经验。在开始之前，先回答你的问题：HTML下载链接添加进度条可以通过JavaScript监听XMLHttpRequest对象的progress事件来实现。我们可以利用这个事件来更新进度条的显示，从而让用户实时了解下载进度的变化。现在，让我们详细展开这个话题。在我的职业生涯中，我曾多次遇到需要为下载链接添加进度条的需求。无论是大文件下载还
2025-06-08 10:30:02
1002
HTML表单提交后清空输入框内容怎么操作 可以使用JavaScript在表单提交后通过form.reset()方法清空HTML表单的输入框内容。具体步骤包括：1.在表单的onsubmit事件中调用submitForm函数。2.使用event.preventDefault()阻止表单默认提交行为。3.获取表单元素并处理数据。4.调用form.reset()方法清空表单。
2025-06-07 08:21:01
615
html中h1和h2的区别 一级二级标题的3个关键差异 h1和h2标签在HTML中的三个关键差异是：1.h1用于页面主标题，h2用于子主题；2.h1字体默认比h2大；3.一个页面通常只有一个h1，多个h2用于划分章节。
2025-06-06 09:15:02
886
html中外边距怎么设置 html外边距margin调整技巧 在HTML中设置外边距需要使用CSS。具体方法包括：1.使用通用margin属性设置所有方向的外边距，如margin:20px。2.使用单独的margin属性设置不同方向的外边距，如margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px，或简写为margin:10px20px30px40px。
2025-06-05 08:21:01
722
html中的行内标签有哪些 html行内标签完整列表解析 HTML中的行内标签在网页设计中起着关键作用，它们用于修饰和格式化文本内容，不会自动换行。常见的行内标签包括：1.用于灵活的样式定制；2.用于创建超链接；3.和用于强调文本；4.用于嵌入图像；5.用于创建表单控件；6.用于创建可点击按钮。使用这些标签时应注意语义化、样式与结构分离、无障碍设计、性能优化和表单设计，以提升网页的整体效果和用户体验。
2025-06-04 08:06:01
630
html中tbody标签的作用 表格主体tbody的语义化意义 标签用于定义表格的主体部分，其作用是将表格数据与表头和表尾区分开来，提升表格的语义化和可访问性。使用的好处包括：1.增强可访问性，帮助屏幕阅读器正确识别表格结构；2.便于样式控制，可以对表格主体部分进行单独的样式设置；3.便于数据操作，支持动态增删改查，提高操作效率；4.性能优化，通过JavaScript动态操作内容，提升性能。
2025-06-03 10:00:02
867
HTML导航栏怎么做？nav标签有什么优势？ 使用HTML创建导航栏推荐采用ul+li结构包裹在nav标签内，1.基本结构用ul+li搭建更清晰且方便CSS美化；2.nav标签具备语义化优势，提升SEO和可访问性；3.推荐使用flex布局进行样式处理，实现水平排列与悬停效果；4.需添加aria-label属性并考虑响应式设计适配移动端。
2025-06-02 10:12:07
899
HTML如何实现轮播图？carousel怎么用HTML制作？ 要实现基础轮播图需结合HTML、CSS和JavaScript。首先用HTML搭建结构，外层div容器包含图片列表，默认第一张显示；接着用CSS将图片叠放并隐藏非active图片；再通过JavaScript定时切换active类实现自动播放；最后可添加按钮实现手动切换。步骤清晰，结构为先，样式控制显示，JS实现动态切换，扩展性强。
2025-05-31 10:03:01
862
HTML里怎么插入YouTube视频 在HTML中插入YouTube视频可以通过以下步骤实现：1.使用标签嵌入视频，替换VIDEO_ID为YouTube视频ID。2.采用响应式设计，使用包装div和CSS确保视频在不同设备上保持16:9比例。3.应用懒加载技术，使用IntersectionObserverAPI减少页面加载时间。4.添加视频标题和描述，提升SEO和用户体验。5.考虑用户隐私，提供同意选项并控制自动播放。
2025-05-30 08:18:02
192
怎样在HTML中创建底部导航栏 在HTML中创建底部导航栏使用和标签。1.使用和列出导航链接。2.通过CSS实现响应式设计，如媒体查询调整移动设备显示。3.优化用户体验，确保链接清晰易懂和可访问性。4.使用语义化标签提升SEO效果。5.考虑性能优化，如使用CSSSprites减少HTTP请求。6.使用position:fixed;使导航栏固定在屏幕底部。7.利用z-index和flexbox解决常见显示问题。
2025-05-29 09:06:02
612
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部