html完整表格结构,正确认识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)

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

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

你也可以使用

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

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

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

关于表格的一些技巧

根据w3schools的解释和用法，在一个table定义中，

元素必须出现在之前，这样，浏览器就可以在接受到所有数据之前呈现表注了。另外，如果不是这个顺序，将不能通过W3C的HTML4和XHTML验证，无论你声明哪种DTD。

html完整表格结构,正确认识html表格（table）的结构相关推荐

html中相同结构标签怎么区分,html标签结构总结
html如果看作一个房子的话,那么元素可以看成毛坯房,属性可以看成精装修,由css和js实现的 1. 元素: HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都 ...
python中table表结构_python中的简易表格prettytable
安装:pip install PrettyTable 普通表格 from prettytable import PrettyTable table = PrettyTable(['编号','云编号', ...
【唠叨两句】如何将一张树型结构的Excel表格中的数据导入到多张数据库表中...
小弟昨天遇到一个相对比较棘手的问题,就像标题说的那样.如何将一张树型结构的Excel表格中的数据导入到多张数据库表中,在现实中实际是七张数据库表,这七张表之间有着有着相对比较复杂的主外键关系,对于我这 ...
常用的表格检测识别方法——表格结构识别方法 (下）
常用的表格检测识别方法--表格结构识别方法(下) 3.2表格结构识别方法表格结构识别是表格区域检测之后的任务,其目标是识别出表格的布局结构.层次结构等,将表格视觉信息转换成可重建表格的结构描述信息. ...
常用的表格检测识别方法——表格结构识别方法(上）
第三章常用的表格检测识别方法 3.2表格结构识别方法表格结构识别是表格区域检测之后的任务,其目标是识别出表格的布局结构.层次结构等,将表格视觉信息转换成可重建表格的结构描述信息.这些表格结构描述信 ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
plotly同时可视化表格与图（plotly Table and Chart ）
plotly同时可视化表格与图(plotly Table and Chart ) # 同时输出表格和图形: from plotly.subplots import make_subplots impo ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
bootstrapr表格父子框_JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）...
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

html完整表格结构,正确认识html表格（table）的结构

html完整表格结构,正确认识html表格（table）的结构相关推荐

最新文章

热门文章