根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后,决定写这篇文章。总的来说,我注意到由于误导性信息,他们对于 table的使用有种先入为主的厌恶。事实上很多人会说”我看到永远不应该使用表格”的说法,但是这绝对是错误的!这个建议只是针对使用HTML表格来定 义网页的布局,但是表格在方便的排列数据信息行和列方面非常完美,而且如果你一定要在一个页面上显示表列数据,你就不得不使用它们!为什么不呢?然而,在 这种情况下,一些人无视了用于table的某些HTML标签的存在并且不知道该如何正确的使用它们。
HTML有10个表格相关标签。下面是一个带有简介的列表,但是首先,文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:
- <caption> 定义表格标题(4, 5)
- <col> 为表格的列定义属性(4, 5)
- <colgroup> 定义表格列的分组(4, 5)
- <table> 定义表格(4, 5)
- <tbody> 定义表格主体(4, 5)
- <td> 定义一个单元格 (4, 5)
- <tfoot> 定义表格的表注(底部)(4, 5)
- <th> 定义表格的表头 (4, 5)
- <thead> 定义表格的表头(4, 5)
- <tr> 定义表格的行(4, 5)
一个基本的表格结构如下:
它包含一个标题、头部、主体和底部。正确的HTML元素顺序是:
- <table>
- <caption>
- <thead>
- <tfoot>
- <tbody>
你也可以使用<col> 和<colgroup> 来定义表格的列或为列分组:
- <table>
- <caption>
- <colgroup>
- <col>
- <thead>
- <tfoot>
- <tbody>
下面是一个正确的表格结构实例:
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <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定义中,<tfoot>元素必须出现在<tbody>之前,这样,浏览器就可以在接受到所有数据之前呈现表注了。另外,如果不是这个顺序,将不能通过W3C的HTML4和XHTML验证,无论你声明哪种DTD。(了解更多)。
- 在 HTML 4.01 中,表格的align和bgcolor属性不赞成使用,所以在HTML 5中不再有任何table的属性被支持(事实上,在XHTML 1.0 Strict DTD中已经不支持”align”和”bgcolor”属性了);
- 所有主流浏览器都支持<colgroup> 标签,但是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属性?
相关推荐
转换算法的难点在于,如何处理行列合并,将Excel的行列合并模型转换成Html表格的行列合并模型。 背景故事 因实际需要,需要将Excel展现在Web界面中。 最初,想在网上找开源的东东,结果没有1个是想要的。有的特别...
为了能够实现前端表格的导出功能,各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。 可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 ...
虽然iText-helloworld-master可能不直接与Word转HTML有关,但如果你在项目中发现了这个文件夹,它可能是一个示例项目,演示了如何使用iText进行基本的操作。通常,这样的示例会包括如何初始化iText,添加文本、图片...
html2fpdf 或 html2pdf 是在fpdf上开发的一个可以...在实际使用中发现,html2fpdf 对于较为简单的html页面的生成还是较为正确的,但涉及到复制样式或嵌套表格时,生成的pdf文件就不能接受了,在使用上还有很大局限性。
其实只要按下Alt键不松开,然后再试着用鼠标去调整表格的边线,就会发现表格的标尺发生了变化,精确到了0.01厘米,明显精确了许多。 另有妙用的Ctrl和Shift键 通常情况下拖动表格线是在相邻的两列之间调整列宽,...
html转word html转换成word文档 项目简介 最近一直在做关于前端富文本生成的html代码转换成word的需求,对各种工具进行了尝试,对效果都不是很满意,最后从茫茫大海中找到一个非常好的工具,顾分享出来 主要转换方式...
由于项目需要,关于js将table转为excel,纠结了好久,在网上找了很多资料,前面也上传了两个版本,后来发现问题很多,到目前为止这个版本是兼容性最好。可以自定义文件名,下载表格有边框,有标题,欢迎下载;
此外,HTML格式还支持搜索引擎优化,有助于提高在线内容的可发现性。 在使用PDF万能转换器时,附带的注册码允许用户激活完整版软件,享受无限制的转换次数和高级功能。这包括批量转换,一次性处理多个PDF文件,大大...
因此,需要设计错误检测机制,一旦发现错误,进行重传或恢复操作,保证数据的完整性。 8. **实时更新**:网络游戏中的数据是动态变化的,需要实时监控表格更新,并同步到数据库,确保玩家看到的数据是最新的。 9. ...
同时,HTML格式的文件还可以进行搜索引擎优化,提升网页的可发现性。 在使用AnyBizSoft PDF Converter时,用户需要注意的是,尽管软件尽力保持转换后的文件与原始PDF的一致性,但字体、排版和图像质量可能会略有...
HTML内容可以是文本、表格、图片等,这些元素都将被转换到Word文档中。在实际应用中,你可能会使用动态生成的HTML,比如从数据库获取的数据。 为了触发导出功能,可以添加一个按钮或者其他交互元素,然后为其绑定一...
当你在网页上发现一个有用的表格,但无法直接下载时,可以使用浏览器的“文件”菜单中的“另存为”功能,将网页保存为HTML或HTM格式。确保在保存选项中选择正确的文件类型。 2. **在Excel中导入HTML文件** 打开...
接下来是创建HTML表格的结构。在这个例子中,我们创建了一个具有五个列的表格,每列的表头都有一个不同的data-resizable-column-id属性,这是因为早期版本的jquery.resizableColumns.js插件需要这样的属性来识别哪些...
打开HTML文件后,你可能会发现页面上存在许多不需要的元素,如广告、导航栏等。此时,可以通过以下步骤进行清理: 1. **删除不需要的部分**:直接选中这些不需要的内容,按下Delete键删除。 2. **处理表格**:如果...
它构成了互联网的基础,让开发者能够构建结构化的页面,并通过超链接将信息组织在一起。... ...`<head>`包含元信息,如...在学习过程中,不断练习,熟悉各种元素和属性,你会发现HTML其实并不复杂,而是构建网络世界的基石。
例如,如果正文是以表格形式呈现,可以全选表格,然后在WPS的“表格”菜单中选择“转换”——“表格转换为文本”,这将去除表格的外框,使内容更适合文档格式。 完成上述步骤后,网页的主要内容应该已经成功转换为...
PDF转Word软件是一种工具,专门设计用于将Adobe PDF格式的文档转换成Microsoft Word文档,这样用户就可以在Word中编辑、修改或重新格式化内容。这种转换对于那些需要对PDF文件进行进一步处理,但发现PDF不支持编辑的...
在大数据分析模板中,HTML负责组织数据可视化组件,如图表、表格和图像,以确保用户能够轻松地导航和理解数据。模板设计者会使用HTML5的最新特性,如Canvas或SVG元素,来实现更高效、动态的数据图形。 接着,我们要...
如果发现任何格式错误或缺失内容,需要返回Word进行修正,然后再重新编译。 **编辑和美化CHM文件** 转换后的CHM文件虽然结构清晰,但可能仍需进行一些编辑和美化工作,以提升用户体验: 1. **内容修订**:检查CHM...