`
alvinqq
  • 浏览: 185408 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

重新发现HTML表格

    博客分类:
  • css
阅读更多
原文:http://www.qianduan.net/rediscovering-html-tables.html
根据我最近的一些实践以及在和一些读者进行关于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属性?
  • 大小: 10.5 KB
  • 大小: 3.2 KB
分享到:
评论

相关推荐

    html纯css实现表格样式

    在实践中不断尝试和优化,你会发现 CSS 在构建表格样式时具有极高的灵活性和表现力。在 "display-grid-template" 文件中,可能包含了一些关于使用 CSS Grid 创建表格样式的示例代码,你可以参考这些例子来进一步理解...

    jquery插件colResizable实现表格列可拖拽伸缩表格大小

    colResizable与大多数其他jQuery插件兼容,但如果你发现冲突,可以尝试使用`destroy`方法先移除colResizable,然后再重新应用。 6. **事件处理**: colResizable提供了一些事件,如`beforeResize`和`afterResize`,...

    一个基于纯j实现的 HTML Tables表格排序的例子代码

    在网页开发中,HTML表格(HTML Tables)是用于展示数据的重要元素。然而,原生的HTML表格并不支持动态排序,即用户无法直接点击表头来按照某一列的数据进行升序或降序排序。为了解决这个问题,开发者通常会借助...

    jquery 操作表格

    在该文件中,我们可能会发现以下关键知识点: 1. **选择表格元素**:使用jQuery的选择器(如`$('table')`)来选取表格元素,可以是整个表格,也可以是特定的行(`$('tr')`),列(`$('td')`)或者单元格(`$('th')`)。 ...

    使用 Jquery 操作表格

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果以及Ajax交互。本教程将深入讲解如何...不断实践和探索,你会发现 jQuery 在处理表格和其他 HTML 元素时的无穷可能性。

    ExcelToHtmlTable转换算法:将Excel转换成Html表格并展示(项目源码+详细注释+项目截图)

    转换算法的难点在于,如何处理行列合并,将Excel的行列合并模型转换成Html表格的行列合并模型。 背景故事 因实际需要,需要将Excel展现在Web界面中。 最初,想在网上找开源的东东,结果没有1个是想要的。有的特别...

    HTML5完整版后台模板 拥有简洁优雅的 风格界面 76 个模板页面,包括图表、表格、地图、消息中心、监控面板

    2. **表格**:优化的表格设计支持数据排序、筛选和分页,同时兼容各种数据格式,便于信息的管理和检索。通过Ajax动态加载和编辑功能,使数据操作更加灵活。 3. **地图**:集成Google Maps或其他地图API,用于展示...

    Html旁门左道 第六天:表格线制作技法

    在这个话题中,我们将学习如何巧妙地控制表格的边框、行线和列线,以实现更加美观和专业的布局。 首先,我们要了解HTML表格的...在实践中不断尝试和创新,你会发现更多的“旁门左道”,让你的HTML表格技艺日臻完善。

    EasyUI 1.3.1动态表格列示例

    例如,如果你发现框架本身不支持某些动态列效果,或者性能优化的需求,你可以下载EasyUI的源码,定位到相关部分进行修改并重新打包。 在处理动态表格列时,需要注意以下几点: - **性能优化**:大量列可能导致页面...

    漂亮的表格样式 tablecloth

    这款插件提供了多种预设的表格样式,涵盖了不同的颜色方案、边框风格、行高和列宽等设置,用户可以根据自己的需求选择适合的样式,使得原本单调的HTML表格变得生动有趣。不仅如此,Tablecloth还支持自定义CSS样式,...

    ueditor 百度编辑器 解决表格没有边框

    因为项目需要,发现直接从word和excel复制粘贴以后,居然在禅道上表格没有边框了,故查了一下 这里从word,以及excel粘贴复制,都能直接有边框了,同时在编辑器里面新增表格,也能直接显示边框了,不需要右键--&gt;...

    HTML表格边框的控制实现代码

    HTML表格边框的控制是网页开发中经常需要面对的问题,尤其是对于初学者而言,表格的布局和边框设计可能会显得有些复杂。HTML中的表格是通过标签及其相关子标签如(表格行)、(表格头部单元格)和(表格数据单元格)...

    jquery表格table导出下载成

    为了能够实现前端表格的导出功能,各种尝试发现tableExport是一个很不错的插件。因此最后选择了hhurz的JQuery Plugin来实现表格的导出功能。 可以从下面的地址下载TableExport插件;该插件可以将Html的表格导出成为 ...

    关于表格的正则表达式讨论(表格)

    看过许多UBB代码,包括JS,ASP,JSP的,一直没发现表格的UBB,虽然可以直接用HTML模式实现相同表格功能,但对于某些开放的站点来说开放HTML模式终究是不合适的,故一直想实现表格的UBB。 我的设想是在HTML编辑器...

    html表格设置单元格和单元格之间间距为0,还存在间隙

    找了半天没有发现错误后,重新写的过程中发现是由于在表格上方有 标签的原因。 补充:对表格的这个现象不只是 会影响,其他控件或标签也有可能会影响。因此,在出现这种情况时,可以查看一下表格上方是否有影响...

    Word表格使用技巧

    其实只要按下Alt键不松开,然后再试着用鼠标去调整表格的边线,就会发现表格的标尺发生了变化,精确到了0.01厘米,明显精确了许多。 另有妙用的Ctrl和Shift键 通常情况下拖动表格线是在相邻的两列之间调整列宽,...

    JS实现动态生成html table表格的方法分析

    刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- – 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有如下代码: ...

    jsp+js实现可排序表格

    如果发现相邻两行的顺序不正确(即当前行的值大于下一行的值),则交换它们的位置,直到整个表格按正确的顺序排列。 总的来说,这个项目展示了如何利用JSP和JavaScript协作,实现用户友好的数据展示。在服务器端,...

    数据大屏(HTML+CSS)

    数据大屏作为BI的一部分,可以帮助管理层快速理解业务状态,及时发现潜在问题,从而做出更明智的决策。 总之,掌握HTML+CSS制作数据大屏的技术,不仅能为企业节约购买第三方服务的成本,还能提升数据产品的核心竞争...

    Python自动办公实例-在Word表格中将上下行相同内容的单元格自动合并.zip

    网络爬虫则可能需要解析HTML表格,虽然不是直接操作Word,但类似的逻辑可以迁移应用。至于“游戏开发”,虽然不直接相关,但Python在游戏脚本编写和自动化测试方面也有一定的应用。 总之,这个实例展示了Python在...

Global site tag (gtag.js) - Google Analytics